Utopia - Reactのデザイン設計をスムーズしてくれるWebエディタ
最近のWebフロントエンドフレームワークでは、デザインとコードの分離ではなく、画面の役割をもって分離しています。そのためデザインとコードが一つのコードの中にあり、デザイナーにとっては慣れるまでデザインしづらいと感じているかも知れません。 もしReactで開発しているプロジェクトならば、Utopiaを使ってデザインしてみると良さそうです。
Utopiaの使い方
エディタ画面です。
ストーリーボードなる機能もあります。
コードエディタです。左側にはファイルツリーがあります。
コンポーネントの構造も可視化されます。
マウスで選ぶと選択されているコンポーネントが斜線されます。
ズーム表示もできます。
Utopiaはコンポーネントを変更したり、右側にあるプロパティを変更することでリアルタイムにデザインを確認できます。Visual Studio Codeとデザインプレビューが組み合わさった形になります。2ウェイの同期が行われているので、プロパティの変更がコンポーネントにも反映され、デザインがとてもスムーズになるでしょう。
UtopiaはTypeScript製のオープンソース・ソフトウェア（MIT License）です。