【Figma】開発モードで出来ることまとめ

Figmaでデザインしたデータをエンジニアへ受け渡す時に便利なモードです。この機能は標準装備されており、ワンクリックでモードを切り替えることができます。

プロパティを一目で確認

デザイナーが定義したコンポーネントやバリアントのプロパティを「ドキュメンント全体を表示」から一覧で確認することができます。

余白やサイズをキャンバスに残す

altやoptionを押して感覚を測ることが一般的ですが、このサイズをキャンバス上で維持することができます。また、プロパティもツールを使うことでキャンバスに配置することが可能です。

モードやプロパティを変更

「プレイグラウンドで開く」からエンジニアサイドでもコンポーネントのパターンやモードの切り替えを行うことができます。直接デザインデータを上書きするわけではないので、誤操作でのデザイン崩れなども発生しません。

GitHubとの連携

開発リソースセクションからGitHubのURLを入力することが可能です。

実装コードを確認

実装する際に必要なCSSのコードを確認することができます。

カラーコードを確認

カラーチップ（色見本）や、バリアブル、カラーコードの確認が行えます（ローカルバリアブルで利用するエイリアスの参照先は表示されません）。

画像やアイコンをダウンロード

ファイル形式や解像度を指定してデザイン素材をダウンロードすることができます。

変更内容を比較

コードタブのスタイルセクションから前回のファイルとの差分を確認することができます。オーバーレイを利用してデザインファイルとしての差分の確認も可能です。

コードの自動構築

プラグインの「Anima-Figma to Code」を利用することで、Reactの構築を自動で行うことが可能です。

VSコードとの連携

「Figma for VS Code」を利用することでVSコードとの連携が可能になり、デザインファイルとエディタの行き来が不要になります。VSコードからデザインファイルを参照できるだけでなく、画像のダウンロードも可能です。