FigmaのDev Modeを意識したAuto layoutの作り方

はじめに

こんにちは、デザイナーのリョウです。

2023年にリリースしたFigmaのDev Modeは、UIデザインから開発への移行をするのに大変役に立っています。その機能を十分に活かすには、Figmaデータの作り方がとても重要です。

まずはDev Modeの主な特徴を簡単に説明します

コードフレンドリーなUI
・従来のFigmaビューと異なる開発者向けUI
・コード表示が強化され、CSS, Tailwind, Swift, Flutter, React Native などのコードスニペットを取得可能・レイヤー構造が簡潔に表示され、開発者が必要な情報を素早く確認できる
コンポーネント情報の取得
・どのデザインシステムのコンポーネントが使用されているかを明示
・変数（Variables）やスタイル（Styles）が簡単に確認可能
レスポンシブデザインの詳細確認
・レイアウトグリッドやオートレイアウトの情報を開発者が直接確認
・フレームのサイズ変更時の挙動を把握しやすい
コメント＆フィードバック
・デザイナーと開発者間でコメントを直接やり取り可能
・コードの修正が必要な箇所に直接フィードバックを残せる
連携機能
・GitHub / JIRA / Storybook などの開発ツールと連携
・デザインのバージョン管理が可能
マルチプラットフォーム対応
・Web, iOS, Android など、異なるプラットフォーム向けの開発をサポート
・フレームワークごとのコードスニペットを生成

デザイナーとエンジニアがやりとりしやすいデザインデータの作り方を模索しながらFigmaを使い込んできましたが、Dev Modeを意識したAuto layoutの作り方とDev Modeの活用方法を自分なりに解説します。

「エンジニアにもデザイナーにもわかりやすい」とは？

なぜこのテーマで記事を書いたかというと、デザイナーチームがエンジニアさんとのFigmaデータのやりとりで悩みを抱えていたからです。

Auto layoutをきれいに組んでいますが、エンジニア目線はどうなのか
コーディングの知識があまりないデザイナーは、Dev Modeのすごさがよくわからない
Dev Modeについて知識の交流が少ないので実際に活用されているのかわからない

こういった背景があり、デザインから開発に移行する際に、確認事項が増え、予想以上の時間とコストがかかってしまうこともあります。

Dev Modeを活用すると、一部の確認作業が必要なくなり、デザインから開発への移行がよりシンプルになります。

Dev Modeを使うメリット：
1. 開発に必要なデザイン・画面だけを素早く参照できる
2. デザインに関連するリンク(GitHubやStorybook,Notionなど)を辿れる
3. UIの要素をコードに出力できる
4. コンポーネントの詳細をその場で確認できる
5. 画面単位でデザインの変更履歴を見れる

今回は、Dev Modeの活用でFigmaデータのやりとりがより円滑になるように、Auto layoutとDev Modeを画像で解説します。

結論、Auto layoutはFlexboxやGridLayoutと似た構造で作成することです。

Figma Dev Modeのコードの出力をきれいに

Dev Modeでは、CSSなどの値が出力されます。CSSを意識してデザインデータを作成すれば、コードの出力もきれいになり、エンジニアさんがコピペして使用することも可能です。

具体的にいくつかの点で解説します。

HTMLの基本構造でレイアウトを組む

HTMLの構造を意識してレイヤーを構成しましょう。

そうするとコンテンツの階層とspacing設定がCSS値としてきれいにに出力されます。

HTMLを意識した構成で作成すると、下記のメリットもあります：

レイヤー名を元に、コンテンツの確認・編集ができる
整理されたデータで、ページの流用がしやすい
データ管理や運用がしやすい

チームでの作業・プロジェクト運用でトラブルを避けられるかもしれません。

CSSでflexやgirdのプロパティとなる箇所は必ずAuto layoutを使用

Figmaを使い慣れると、むしろAuto layout機能を使わないと気持ち悪いですね。

Auto layout機能の詳しい使い方はここでは省きますが、Hug contentsかFill containerで縦・横幅の最小値、最大値も設定できます。

Dev Modeで確認する際も、より詳細なコードが出力されます。

特にレスポンシブの対応時に便利で、スマホ画面とPC画面の作成がより簡単にできます。

Local variablesを活用する

さらに、カラーやspacingなどを管理するLocal variables機能を使うと、デザインデータが管理しやすいだけでなく、エンジニアがDev Modeを通じてCSS変数やJSONとしてエクスポートできます。
これにより、デザインシステムとコードのやりとりがスムーズになり、手作業によるミスも減らせます。

注意すべき点は、エンジニアに編集権限がないとLocal variables機能が利用できないことです（コードやオプジェクト単体では確認できますが、Local variablesの設定画面を確認したり編集できないため、別途をガイド作成するのがおすすめ）。

Local variables機能の詳細は公式で確認できます。 help.figma.com

Figma Dev Modeの見方

Dev Modeに切り替える方法

Figma下部のツールバーの</>ボタンを押すと、 Dev Modeに切り替えられます。
右サイドバーで「Inspect」でコードの出力やエクスポートボタンがあり、「Plugin」で開発連携のプラグインを導入できます。

「Ready for dev」状態に変更

デザイン画面をSectionで囲んで、右上の</>ボタンを押すと、Section内で囲まれる画面を「Ready for dev」状態にできます。エンジニアも開発の準備ができたと確認できます。
「Ready for dev」を押してプルダウンメニューの「Show in focus view」で、画面をフォーカスした状態にできます。「Mark as completed」で開発完了の状態に変更できます。

Compare changesでデザインバージョンを比較

Compare changesは「Ready for dev」にした後デザインが変更された場合、変更前と後のデザインバージョンを比較できる機能です。
Dev Modeでデザイン画面を選択、右サイドバーの「Inspect」で「Compare changes」をクリックして、「Compare with previous versions」を選択します。するとモーダルでデザインのバージョンを比較できます。
「Side by side」でbefore&afterを並べて比較できます。
「Overlay」はbefore&afterを重ねて表示し、細かい変更を目視で確認できます。
右サイドには変更前後のCSSとプロパティーの違いをハイライトで表示します。

また、デザインデータと実装後の画面を比較する時も「Compare changes」機能を利用できます。
Overlay機能で細かいズレを確認でき、デザインと実装画面の差分を割り出せます。

詳しくは公式で確認できます。 help.figma.com

Annotateでメモや注意書き

Dev Modeの「Annotate」ツールで書いたメモや注意書きはとてもわかりやすいです。コメント機能で書くより見やすいと思います。

出力コードが選択できる

Dev Modeでは、Figma to Codeなどのプラグインを利用することで、CSSに加えJSX、Tailwind CSS, Flutter、SwiftlEなと、さまざまな形式のコードを出力できます。右側のサイドメニューから、目的に合わせたコード出力オプションを選択するだけで、開発環境に最適なコードを手軽に生成可能です。