前回はFigmaのおおまかな概要についてご紹介したので、今回はFigmaの開発モードについてご紹介します
Figmaの開発モードとは？
Figmaの開発モードには以下のような特徴があります
- 選択しているオブジェクトのスタイルの詳細を視覚的に確認することができる（パディングは何PX分なのか等）
- 選択しているオブジェクトのスタイルをコードベースで確認し、ソースをコピーすることもできる
- 生成するコードは複数言語から選択できる（HTML、CSS、JS、React、SCSS等）
- デフォルトプラグインを利用して、デザインから生成したコードをwebエディターで確認できる
- VScodeの拡張機能で生成したコードを確認できる
今回試みたこと
実際のwebページを想定し、1フレームにまとめられたコンポーネントをReact + CSSでコード化してみます。更にFigmaのデフォルトプラグインである「Anima」を利用して、生成したコードと、実際のコンポーネントをwebエディター上で表示してみました
良かった点
実際にFigmaでのデザインや開発モードを使ってみると、エディターでも確認できるようになったので、実装後の画面やソースコードのイメージも掴みやすくなりそうだなと感じました。生成されたコードは全てそのまま利用出来るわけではないですが、実装における手助けにはなり得ると思いました。
また、顧客とのやり取りに関しても、Figmaに関するスキルレベルがある程度高ければ、その場でデザイン調節ができたり簡単な挙動確認もできるため、作業効率を高められる可能性を感じました。
イマイチポイント
今回は1ページのみでコード生成した例を紹介しましたが、もっとページ数が多くなった場合はコンポーネント分割が煩雑になることもあり、実務で使うには小さなコンポーネント限定にする配慮が必要と感じました。生成されるコードにも人の手で修正が必要な箇所も多くあり、まだ発展途上な感覚もありました。
複数言語でも生成もサポートされていますが、大半はAI BETA版だったりすることに注意が必要と感じました。
また、Figmaはデザイナーだけではなく、エンジニアも使用することを想定して作られているソフトですが、そもそもFigmaの学習コストが高いように感じています。ある程度のデザイン知識も必要ですし、紹介したFigmaコンポーネントには適切な命名がされていないため、生成コードでも人が読み込みやすいとは言えないclassNameになっていたりします。そして場合によってはFigmaだけではなく、連携されている別ツールの習熟も必要となることもあります。
今後の展望
現状では、学習コストと釣り合うだけの実務における作業効率向上の手段としては不十分な点が多いと感じました。
しかしながら、昨今の生成AIの進歩を見ると、近い将来デザインデータから実務に耐えうるコードを生成できるうになる可能性も感じることができました。
個人的にはFigmaやデザインには興味があるので、学習を継続し、コード化を念頭にしたFigmaコンポーネントの作り方や、具体的な学習コストの測定なども行ってみたいと考えています
参考文献
「デザインからコードへ」、「コードからデザインへ」という考えについて
https://www.uxpin.com/studio/jp/blog-jp/code-to-design-vs-design-to-code-which-is-better-jp/
Figmaの開発モードにおける実務視点について
https://coosy.co.jp/blog/about-figma-divmode/
