開発モードでの測定値の追加とデザインへのアノテーション付け

デザインが変更されても、アノテーションと測定値は常に最新の状態に保たれるため、より速やかに分かりやすいハンドオフを作成できます。

アノテーションを使って、デザイナーは次のようにコミュニケーションを行い、重要な詳細情報を直接デザインに付け加えることができます。

• 開発者が見落とさないように重要なプロパティをハイライト表示する
• 開発者が間隔やサイズなどの仕様を視覚化しやすくする
• テキストノートで追加したコンテキストを共有する

開発者は開発モードで作業しながらデザイナーのアノテーションをリアルタイムに表示できるのため、ハンドオフ時に重大なアノテーションが見落とされることはありません。

デザインへの測定値の追加

測定値を追加すると、間隔とサイズを視覚化しやすくなります。

デザインへの測定値の追加は次のように行います。

1. ツールバーの右上にある開発モードのトグルをクリックするか、キーボードショートカットShift Dを使用します。
2. ツールバーの[測定]をクリックするか、キーボードショートカットShift Mを使用します。
3. レイヤーにカーソルを合わせると、測定を開始する場所の選択肢が表示されます
4. クリックして、開始点から測定の終点のレイヤーまでドラッグします。
5. デザインに重ならないように測定値をクリックしてドラッグします。

デザインへのアノテーションの追加

デザイナーは、アノテーションを通じて、開発者がデザインをコードに変換するために必要なコンテキストの提供、デザインプロパティの定義、その他の関連情報の伝達を行います。自由なテキストおよび配置の方向やサイズ設定などの定義されたプロパティを組み合わせて、アノテーションとして付けることができます。後でデザインが更新された場合でも、アノテーションのプロパティは常に最新かつ正確な状態を維持するため、変換時に失われるものはありません。

デザインへのアノテーションの追加は次のように行います。

1. ツールバーの右上にある開発モードのトグルをクリックするか、キーボードショートカットShift Dを使用します。
2. ツールバーの[アノテーションを付ける]をクリックするか、キーボードショートカットShift Tを使用します。
3. アノテーションを付けるレイヤーを選択します。
4. テキストフィールドにメモを記入するか、[+ プロパティ]をクリックしてリストからプロパティを選択します。アノテーションには、書式なしテキストとプロパティの両方を含めることができます。

アノテーションの非表示

デフォルトでは、Dev ModeのFigmaデザインのアノテーションはすべて表示されます。アノテーションを非表示にするには以下の手順に従います。

1. ツールバーのメインメニューをクリックします。
2. ドロップダウンの [表示] にカーソルを合わせます。
3. [アノテーション]を選択解除します。