デザインからコードへの再現も容易！ プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】

共同作業に最適なプロトタイピングツール「Figma」入門　第3回

開発フェーズ

　デザインやアニメーションが完成すると、エンジニアが開発するフェーズに移行します。未招待のエンジニアにFigmaのプロジェクトやファイルの招待を送りアクセスしてもらうことで、必要な情報を取得するためのコラボレーションツールとして機能します。多くの場合、Viewerという無料で利用できる権限でも、エンジニアに便利な機能を利用することができますので、紹介する機能を通して開発に役立てていただければと思います。

CSS、コード情報取得

　Figmaにアクセスすると、開発に必要な情報を、選択したフレームやオブジェクトから取得できます。Figmaでは作成した画面を1つのキャンバス内に並べて作ることになるため、各画面デザインの取得が画面を切り替えることなく可能です。デザインした画面量が多くなるほど、どの画面から情報を取得すべきか判断が難しくなるため、デザイナーは画面のフレーム名を判別しやすく命名、整列させておくなどの工夫をしておきましょう。

　さらに、Webやネイティブアプリに必要なCSSやコードも取得することができます。ただし、CSSやiOSでの開発には十分参考になるコードが生成されるものの、Android向けには不十分な内容とエンジニアから報告があったので、今後の改善に期待したいところです（2021年8月時点）。

コード情報の取得

素材書き出し

　素材の取得方法も簡単です。PNGなどの画像形式や、SVGのベクトルデータなどを任意で書き出せます。書き出したい素材を選択し、Exportの設定をすることで素材を書き出せます。デザイナーへの素材作成の依頼が不要になるため、お互いスムーズに作業を進められます。

　1つの素材に対して複数の解像度、ファイル形式、命名を設定し、一度設定した後はその情報を保持することができるので、素材が更新された際も必要な素材をすぐに書き出すことができます。

素材の書き出し

APIの利用

　株式会社ブリューアスではAPIを利用し、Figmaの該当ファイルがデザイナー（Editor権限）で更新された際、Slackで通知する機能を開発しています。理由は、開発開始後にデザイナーがエンジニアに連絡せずデータの編集・削除・追加などしてしまうと、デザインデータと実装されたものに乖離が生まれてしまいます。デザイナーは、エンジニアに正しく更新や変更を認識してもうらように努める必要があるので、自動通知後にしっかりコミュニケーションでフォローをしていきます。

おわりに

　まだ触れていないFigmaの大きなメリットの一つに、Figmaの運営は非常にアグレッシブで、機能改善や新機能追加などアップデートが頻繁に行われる点も挙げられます。昨年だとブランチ機能、ホワイトボード機能など大きな機能追加がありましたが、かゆいところに手が届くアップデートを頻繁に行っています。もちろん、まだ改善余地がある機能、他サービスの方がメリットがある点などありますが、このようにスピーディに改善がされ、プラグインが日に日に追加されて進化している点も大きな魅力です。まだ導入検討中の組織の方でも、Figmaの機能アップデートをウォッチし、懸念事項が解消されているかどうかを定期的に確認しておくことをお勧めします。