デザインとコーディングの連携をスムーズに！エンジニアが開発で使えるFigma無料版おすすめ機能

この記事は「ウィルゲート Advent Calendar 2024」の 19 日目の記事です。 adventar.org

こんにちは、ウィルゲート開発グループのはるみん（水口）です。
今回はエンジニアの視点から、Figma無料版で使える機能をプロトタイプ制作とコーディングに分けてご紹介します。
私自身、Figmaについてはまだ勉強中の初心者ですが、これからFigmaを使い始める方や導入を検討されている方の参考になれば幸いです。

プロトタイプ制作で使える機能
プロトタイプ制作時に便利なプラグイン
- Google Sheets Sync
コーディングで使える機能
デザインと開発の連携
さいごに

プロトタイプ制作で使える機能

日頃の業務で本格的なデザインを制作することは少ないですが、画面仕様の確認や簡単な画面イメージ・ワイヤーフレームを作成することがあります。
その際に便利なFigma無料版の機能をいくつかご紹介します。
詳細な使い方はFigma Learn - ヘルプセンターをご参照ください。

バリアブル管理

色やサイズといった属性値を一元管理できます。これにより、属性の乱立や不揃いを防ぐことができます。

コンポーネント管理

UI要素を共通コンポーネントとして登録することが可能です。
コンポーネントに登録すると、デザイン変更時にすべてのコンポーネント利用箇所を一括で更新できるため、効率的な作業が可能です。

オートレイアウト

Figmaのオートレイアウト機能を使うと、要素の配置が自動的に整えられ、幅や高さ、間隔を簡単に揃えることができます。
また、実際の画面コーディングに近いレイアウト設定が可能です。

プロトタイプ機能

画面のスクロールや固定要素、内部スクロールなどのレイアウト動作をFigma上で確認できます。
また、フレーム同士をつなぐことで画面遷移を検証できるため、UXの確認にも役立ちます。

プロトタイプ制作時に便利なプラグイン

Google Sheets Sync

https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync

Googleスプレッドシートと連携し、Figma内のテキスト要素にデータを反映できるプラグインです。
スプレッドシート更新後も同期可能なので、コンテンツ作成を別チームが行っている場合や、実データを使用したプロトタイプ検証を行いたい場合などに便利です。

Google Sheets Syncの内容については、以下の記事が参考になりました。
FigmaプラグインのGoogle Sheets Syncを使って編集が楽チンな資料デザインをした話 #Figma - Qiita

コーディングで使える機能

Figma無料版では「開発モード」は利用できませんが、画面コーディングをサポートする便利な機能がいくつかあります。
私自身がコーディングの際、よく使う機能について紹介します。

要素間の間隔計測

キー操作で要素間の距離を簡単に確認できる機能です。

CSS書き出し

Figma上で作成したデザインをCSS形式でコピーできます。

コピーしたCSS（例）

/* 見出しリスト要素 */

box-sizing: border-box;

position: relative;
width: 604px;
height: 108px;
left: 22px;
top: 322px;

background: #FFFFFF;
border: 1px solid #E3E3E3;