Open9
エンジニアむけの Figma Dev Mode の機能説明
ピン留めされたアイテム
ヒラタヒラタ基本
- 右上のスイッチか、
⇧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
- 2つのアートボードを選択
- 右パネルから比較を実行
- Diffを表示できる
変更履歴からDiff
- 任意のアートボードを1つ選択
- 右パネルから比較を実行
- 以前のデザインからどこが変わったか、誰が更新したか表示される
ヒラタComponent Playground
ボタンなどのComponentについて、バリエーションを切り替えて確認できる
- Componentを選択した状態で、右パネルからPlaygroundを実行
- ComponentにどんなVariant(バリエーション)があるのか切り替えて確認できる
ヒラタVS Code 連携
拡張機能を入れることで、VS Code上でFigmaのデザインを表示したり、各プロパティを取得して記述できる
またFigmaのLayer名に応じてクラス名やプロパティをサジェストすることも可能
ヒラタCode Connect
Beta
自社のコードを前提にコード生成できる。
React、Storybook、SwiftUIに対応。