こんにちは！25卒の八木田です。
デザイン事業部への配属後、Figmaを使ったWebサイトデザイン研修とデザインしたWebサイトのマークアップ研修を受けています。
そこで、マークアップ時の負担を減らすデザインデータ作成の重要性を実感しました。
初心者が学んだ、エンジニアフレンドリー・AIフレンドリーなデザインのためにFigmaデータ作成でまず意識すべきポイントをまとめていきます。

意識すべき3つのポイント

研修での実践を通じて、Figmaデータ作成時に特に重要だと感じたポイントはこちらです。

  • 命名規則
  • バリアブル
  • コンポーネント・オートレイアウト

命名規則

今回の研修では、私は特に以下の項目の命名規則を意識しました。

  • レイヤー（デザインの構造を整理する機能）
  • テキストスタイル（フォントや文字サイズを登録し、繰り返し使えるようにする機能）
  • バリアブル（デザインに使う色や数値などの変数を管理する機能）

レイヤー

レイヤー名は、構造を示す単語をケバブケース（単語をハイフンで区切る命名形式）で命名しました。
「Frame 15」や「Rectangle 2」など野良のレイヤーが無いよう意識しました。

一人ではなくチームでプロジェクトを進めていくので、誰が見てもわかるレイヤー名にすることは重要です。
レイヤー名を定めることで、マークアップ時にクラス名を考える手間も省くことができます。
また、MCPサーバーでコード出力する際にもレイヤー名は出力精度に関わる重要なものとなります。

テキストスタイル

テキストスタイルの命名は正直迷う部分もありましたが、HTMLのタグを意識して命名しました。
「/」で階層を区切りPC版とスマホ（SP）版でテキストスタイルを分けて登録していました。
また、日本語テキストと英語テキストでフォントを分けていたので、区別のために英語テキスト用のスタイルには末尾に「-en」を付けていました。

テキストスタイルの登録は、フォントサイズのばらつきやデザインするときの迷いを減らして効率良く作業するために重要です。

バリアブル

バリアブルでは、カラーとスペースを登録しました。

カラーは、以下の命名規則で登録しました。

  • アイレットのコーポレートカラーは「iret/base/カラー名」
  • アイレットのアクセントカラーは「iret/accent/カラー名」
  • 作成したWebサイトのメインカラーなどは「original/カラー名」

スペースは、8 point Grid System（デザインにおける余白やサイズを8の倍数で統一する考え方）に従い、8の倍数ごとに「space-01」〜「space-15」、「space-20」の値を設定しました。
また、スマホ版のグリッドの余白に使用する28pxと数字が小さく使用頻度が高そうな4px・12pxを登録し、「h（halfの頭文字）」を名前の末尾に付けています。

バリアブル化については、以下で詳しく記載しています。

バリアブル

Figmaデータ作成時に意識すべきポイント2つ目は、バリアブルです。
バリアブルとは、デザインに使うカラー・数値・文字列・ブール値を名前付きの変数（Variable）として管理する方法です。

今回のデザインでは、上記の命名規則にもある通りカラーとスペース（数値）をバリアブルに登録しました。

バリアブル化したカラー

バリアブル化したスペース

バリアブル化のメリット

  1. 迷いを減らし、効率良く作業できる
    デザインで使用するカラーと8 point Grid Systemのためのスペースの数値を最初のうちにバリアブルに登録することで、迷いを減らし効率良く作業することができます。
  2. 配色ルールをシンプルにできる
    使用する全てのカラーをバリアブルに登録することで「同じように見えるが実は違う色」が混ざることを防げたり、色数が増えすぎることを防げたりします。
  3. マークアップ時の作業効率向上、CSSの可読性向上
    カラーやスペースなど登録したバリアブルを変数として指定することができ、CSSを短くすることができます。
  4. カラーの修正が容易にできる
    バリアブルに登録したカラーやCSSの変数のカラーコードを変えるだけで、カラーの一括変更が可能になります。
  5. MCPサーバーを介したCSS出力の精度向上
    MCPサーバーを用いてコード出力を行う際、バリアブルを元に変数を記述してくれます。

コンポーネント・オートレイアウト

Figmaデータ作成時に意識すべきポイント最後は、コンポーネント・オートレイアウトです。

コンポーネントは、デザインを簡単に再利用するために作成します。
例えば、Webサイトの複数ページで使用するヘッダーをコンポーネント化し、生成したインスタンスを各ページに配置します。
そうすることで、各ページのヘッダーのデザインを修正したくなった時にメインコンポーネント1つを修正するだけで一括で変更が可能になります。

オートレイアウトとは、指定したフレームの要素を一方向に規則的に並べたり、パディングを指定したり、要素の大きさによって動的にフレームを拡大・縮小したりできます。
オートレイアウトによって、HTMLのタグ構造に近い形でデザインデータを作ることができます。
また、Figma上でレスポンシブデザインの作成が可能になります。

おわりに

以上が、私がデザイン事業部の研修を通して感じた「エンジニアフレンドリーなFigmaデータ作成のために意識すべきポイント」です。
成果物のデザイン時に意識すべきことはたくさんありますが、デザインデータ作成時にも意識することでマークアップの負担を減らせることがたくさんあると学びました。

最後までお読みいただき、ありがとうございました！