はじめに
株式会社YUZURIHAでUIUXデザイナーとして働いている林です。
YUZURIHAのとあるプロジェクトでは、デザイナーがFigmaで作成したデザインデータは、最終的にエンジニアが実装することで形になります。
しかし、デザインデータが整理されていなかったり、コーディングを考慮していない場合、エンジニアの作業が大幅に遅れるだけでなく、完成物にズレが生じることもあります。
本記事では、私の実際の業務経験を通じて、Figmaでデザインデータを作成する際に、コーダーがスムーズに作業を進められるよう工夫するポイントを紹介します。デザイナーとコーダーが効率よく連携し、より良いプロダクトを生み出すために私自身も意識して行きます。
FigmaデータをHTMLの構成に近づける為の知識
HTML要素の種類によるレイアウトの違い
HTMLは、その要素の種類によって、ブラウザで見た時に、見えない透明のボックスのようなものが存在し、横いっぱいに広がるblock要素と、その要素の幅だけで収まるinline要素の大きく2種類に分かれます。
そして、HTMLは基本的に積み木のように要素が上から順に縦に積まれていき、横方向に隙間がある場合、幅が収まる限り横に左詰めで並んでいく仕様です。
HTMLは上記の2種類の要素で作られる為、Figmaのレイヤーも同構造にすることで、FigmaデータをHTML構成に近付けることができます。
block要素
横いっぱいに広がる要素。横には並ばずに縦に積み上がっていく。
inline要素
その要素の幅だけで収まるタグ。隙間があるので幅が許せば、横に並んでいく。
オートレイアウトを使って、要素をHTMLと同構成にする。
Figmaのコンポーネントを適切に整理し、フレームやオートレイアウト機能を活用することで、HTML構造やflexboxに近いレイアウトを簡単に表現できます。このようなデザインデータは、エンジニアがデザインを作成する場合でも、コーディングする場合でも使いやすく、理解しやすいのが特徴です。
Figmaのオートレイアウト機能とは
オートレイアウト機能とは、その名の通り、「自動」で「レイアウト」してくれる機能です。
フレームの中の要素を、指定したマージンやパディングを維持したまま規則的に並べたり、その複数の要素の並び順を簡単に入れ替えできたりする機能です。オートレイアウトを上手に使うことにより、修正や変更、レスポンシブデザインのしやすいデータにすることが可能となります。
FigmaでHTMLコーディングしやすいデザインを作る為の設定
レイアウトグリッドの設定
レイアウトグリッド機能は、デザインを構造化し、HTMLやCSSのグリッドシステムに対応したデザインを作成するための便利な機能です。この機能を使うことで、デザインを一貫性のあるものにし、エンジニアがコーディングしやすい構造を提供できます。
レイアウトグリッドは、多くのデバイスの画面解像度が8の倍数で設定されている点、8の倍数で設計すると端数が発生しにくい点、デザインに規則性がある事で品質が向上する点から8の倍数で作られることが多いです。
（※制作物の仕様によって変わることがあります）
テキストスタイルの設定
テキストスタイル機能は、デザインにおけるフォント設定を一元管理し、プロジェクト全体での一貫性を保つための便利な機能です。テキストスタイルを活用すると、変更や修正が容易になり、デザインからコーディングまでの効率が大幅に向上します。
カラースタイルの設定
カラースタイル機能は、色の設定を再利用可能なスタイルとして保存し、デザイン内のテキスト、シェイプ、背景、線などに適用できる機能です。一度設定したカラースタイルを更新すると、適用されているすべての場所が自動的に更新されます。
ローカルバリアブルの設定
Figmaのバリアブル機能は、以下のような値を変数として設定し、再利用可能にする機能です。バリアブルを使用すると、一箇所で値を変更するだけで、関連するすべてのデザインに即座に反映されます。
- 色（Colors）
- 数値（Numbers）：幅、高さ、余白、フォントサイズなど。
- テキスト（Strings）：ボタンラベルやUIテキスト。
- ブール値（Booleans）：オン/オフの切り替え。
また、バリアブル機能は色・数値・テキスト・ブール値を一元管理できるだけでなく、テーマ管理（ライト・ダーク）が容易な点、デバイスサイズ別にモードを設定することにより、特定のデバイスやブレークポイントごとに値を切り替えられる仕組みを構築できます。
モードの設定例
デバイス別モード
モバイル（Mobile）: Padding: 16px, FontSize: 14px
タブレット（Tablet）: Padding: 24px, FontSize: 16px
デスクトップ（Desktop）: Padding: 32px, FontSize: 18px
テーマ別モード
ライトモード: BackgroundColor: #FFFFFF, TextColor: #000000
ダークモード: BackgroundColor: #000000, TextColor: #FFFFFF
コーディングに必要な情報をFigma上で取得する方法
Figmaにはインスペクト機能があり、要素に関する詳細な情報を簡単に取得できます。
インスペクト機能は、デザイナーが作成したデザインデータから、コーディングに必要な情報を簡単に取得できる機能です。この機能は、デザイナーとエンジニアの連携をスムーズにし、正確な実装を支援します。
インスペクト機能の使い方
-
開発モード選択
-
右側のインスペクトタブでCSSのコードを参照
最後に
Figmaを活用したデザインデータの整備は、エンジニアとのスムーズな連携とプロジェクト全体の生産性向上に直結します。本記事で紹介した方法やポイントを取り入れることで、実装しやすいデータを作成し、デザインから開発への橋渡しをより効率的に行えるはずです。
最後までお読みいただき、ありがとうございました。この記事が、皆さんのデザインと開発の現場に少しでも役立つことを願っています。