Zenn
Open9

エンジニアむけの Figma Dev Mode の機能説明

Figma
デザイン
ヒラタヒラタ

基本

  • 右上のスイッチか、 ⇧D でDev ModeのON/OFFをトグルする
  • Dev Modeの状態でコピーしたURLは、開いたときにもDev Modeで表示される
ヒラタヒラタ

RichなInspect

  • 右側Inspect Panelがより視覚的に表示される
  • スタイルの実装に必要なコードが生成される。CSSやSwiftなど多くの形式に対応
Normal Dev Mode

サイズの可視化

  • 本来なら ⌥ を押していないと表示されないサイズ系の数値が、オブジェクトをホバーや選択しただけで表示される
  • また、デザイナーがAuto Layout機能を使っている場合は、整列のルールも可視化される
ヒラタヒラタ

Measure & Annotation & Resource

Measure

  • デザイナーが画面上に強調表示されたサイズ情報を書き込める
  • この表示はホバーしなくてもDev Modeで常に表示される

Annotation

  • デザイナーがオブジェクトにMarkdownでメモを記載できる
  • コメント機能に近いが返信等はできない。仕様を記載するための機能
  • Dev Mode対応アカウントじゃないと見れない

Resource

  • Figmaのオブジェクトに仕様・素材などへのURLを貼れる
  • ResourceはDev Mode アカウントも設定できる。 エンジニア側でGitHubやJIRAへのリンクを置いてもらうのも良さそう。
ヒラタヒラタ

開発準備完了

  • デザイナーが完成しているアートボードやセクションに「開発準備完了」フラグをつけることができる
  • フラグがついている画面は左のパネルに最終更新日が表示される
ヒラタヒラタ

Diffの確認

任意の2つの画面をDiff

  1. 2つのアートボードを選択
  2. 右パネルから比較を実行
  3. Diffを表示できる

変更履歴からDiff

  1. 任意のアートボードを1つ選択
  2. 右パネルから比較を実行
  3. 以前のデザインからどこが変わったか、誰が更新したか表示される
ヒラタヒラタ

Component Playground

ボタンなどのComponentについて、バリエーションを切り替えて確認できる

  1. Componentを選択した状態で、右パネルからPlaygroundを実行
  2. ComponentにどんなVariant(バリエーション)があるのか切り替えて確認できる