フロントエンドと連携する Figma の活用を考える

Gaji-Labo では、ほとんどのプロジェクトで Figma を使用してUIデザインを進めています。
エンジニアやプロジェクト参加メンバーへの共有が簡単な上に、閲覧権限であれば無料なので、気軽にハンズオフするメンバーを増やすことができます。

これまでのプロジェクトの経験やいろいろ試したことから Figma でフロントエンドと連携しやすい活用をまとめてみます。
少しずつですが、Figma でデザインをする際のスタイルガイドをまとめていければなあと考えています。

やるとよいこと

• デザインの状況（「WIP」「作業中」「レビュー中」など）を明記する。
• 画面について説明、コンポーネントについての説明を画面上に残す。
• カラー、タイポグラフィの定義してライブラリ化する。
• デザインやスタイル定義のスタイルガイドを作る。
• コンポーネントの Description を記入する。
• UIフレームワークを使用する場合は、想定するコンポーネントのリンクをコンポーネントの Link に記入する。
• コンポーネントは Variants で派生パターン・バリエーションをまとめる。

忘れていけないと思うのは、Figma は共有されている状態では、誰でもいつでも見られてしまうので、デザインの状況がわかるようにしておく必要があります。
デザインの最新版はどれか、まだ作業途中なのか、状況をファイル内のページやフレームの名前に書いておいたり、アノテーション要素で伝わる工夫をしておくとよさそうです。

また、ルール化をしておく必要があり個人の好みにもなりそうですが、ページやフレーム、コンポーネントの名前に絵文字をいれて差別化すると、文字だけよりは伝わりやすいのではないかと思います。
✅ で更新完了やレビュー完了したもの、🚩 でデザインの現在地、🚧 で下書き・ドラフト要素など、絵文字によるビジュアルでどういうものかイメージしやすくできそうです。

気をつけること

• 画像・オブジェクトは実装にあわせてフレーム化するなどの対応はすり合わせておく。
• アイコンはストロークのアウトライン化、不要なストロークの削除を忘れない。
• 状況のアップデートを共有して見られること任せにしない。

画像の書き出しは、閲覧権限（Can View）でも簡単に行なえます。デザイナーが画像書き出しのための設定する必要がないので、Photoshop や Zeplin 読み込みのための対応をしていた頃よりは楽になりました。フロントエンドの実装の仕方にあわせてよしなに書き出して対応してもらうこともできます。
対応の注意点になりそうなのは、閲覧権限ではグループ/フレームでレイヤーをまとめる編集ができないこと。レスポンシブなど実装の対応のために画像をグループで書き出したい場合もあるので、画像の書き出し方についてはフロントエンドとすり合わせておくのが良いと思います。

画面やコンポーネントのデザインは「いつでも見られるのでよろしく」にしてしまうと、アップデートされた箇所が分かりづらいなどの問題も発生するので、定期的に状況を共有すると良いと思います。

考えていること

Figma は共有しやすいのでフロントエンドに渡しっぱなしでも、それなりに進めることは可能です。アノテーションなどで説明を置いておく方法も色々あるので、Figma 上でデザインの情報を充実することもできます。
とはいえ、フロントエンドとデザイナーが実装に進められるようにコミュニケーションすることはなくならないはずです。話してすり合わせることで、よりデザインと実装の精度があげられるならばその時間は大事なことだと考えます。

Gaji-Labo ではキャプチャを見せたり、Zoomで画面共有したりしてデザインを共有することが多いですが、Figma 上での会話も試してみて良いかもなあと思っています。（ただし、画面やオブジェクトの多いファイルはそれだけで重くてメモリに負担がかかるので、なかなか手が出せていないです・・）

今後もデザインをする際のスタイルガイドだけでなく、UIパーツやアノテーションを統一したテンプレートも作っていきたいと思っているので、ツールを使う上で揃えることを日々考えていきたいとも思います。