はじめに
この機能を使用できるユーザー
ビジネスプランとエンタープライズプランで利用できます
フル、Dev、閲覧の各シートを持つユーザーは、Ready for Devビューにアクセスできます。
フルまたはDevシートを持つユーザーは、ステータスを変更できます。
フルまたはDevシートを持つユーザーは、フォーカスビューにアクセスできます。
Dev ModeでReady for devビューを使用して、開発準備が完了しているセクション、フレーム、コンポーネントを調べるときは、特定のデザインの綿密な確認が必要になることがよくあります。Ready for devであるデザインの詳細情報を得るには、Dev Modeのフォーカスビューを使用します。フォーカスビューには、次の機能が用意されています。
- Dev Modeツールバーで通常使用できるすべてのツール。
- Dev Modeのフルエクスペリエンスでアクセスできるのと同じ[インスペクト]および[プラグイン]タブ。
- 表示中のデザイン固有の説明の付いたバージョン履歴。異なるバージョンと比較して、時間の経過に伴う変化を確認できます。
- Ready for devである各デザインのレイヤーを展開して調べる簡単な方法。
- 特定のデザインに対して作業完了マークを付ける機能。
フォーカスビューには次の手順でアクセスします。
- Figma Designファイルを開きます。
- 左サイドバーの[Ready for dev]をクリックします。Ready for devビューが開き、Dev statusのすべてのデザインのリストが表示されます。
- フォーカスするデザインをクリックします。
次の方法もあります。
- Figma Designファイルを開きます。
- キャンバス上で、フォーカスするデザインに対し、Dev statusをクリックして、[フォーカスビューで表示]を選択します。
- オプションで[フォーカスビューへのリンクをコピー]を選択して、他のユーザーと共有できるフォーカス設定済みのデザインへのリンクを入手することもできます。
フォーカスビューが開き、以下の内容が表示されます。
- インスペクトするデザインがフォーカスビューの中央に表示されます。Dev Modeツールで、デザインでの測定、アノテーション付け、コメントなどを行えます。
- コードの生成、デザインのプロパティの閲覧、さまざまなエクスポートやダウンロード、Dev Modeのプラグインの実行などを行う[インスペクト]および[プラグイン]タブ。
- [完了としてマーク]ボタン。このボタンを使用して、デザインの開発作業が完了していることを確認します。
移動
フォーカスビューでは、Dev Modeの他のエリアに移動するための方法がいくつかあります。
Ready for devビューに移動するには、フォーカスビューの左上隅で、[Ready for dev]をクリックします。
キャンバスでデザインを確認するには、フォーカスビューの右上隅で、をクリックして、[ページに表示]を選択します。
フォーカスビューを開く前に使用していたFigmaインターフェースのエリアに戻るには、フォーカスビューの右上隅でをクリックします。キャンバスからフォーカスビューを開いた場合は、キャンバスを使用していた時点の位置に戻ります。Ready for devビューまたはリンクを使用して開いた場合は、Ready for devビューに戻ります。
レイヤーを見る
フォーカスビューには、あるデザインの個々のレイヤーを簡単に見ることができる方法があります。デザインの1つ以上のパーツを選択すると、フォーカスビューのレイヤーパネルが表示されます。
[インスペクト]パネルと[プラグイン]パネル
[インスペクト]パネルと[プラグイン]パネルは、通常のDev Modeエクスペリエンスと同じです。範囲だけが、表示しているデザインに制限されます。パネルの使用方法については、Dev Modeガイドを参照してください →
バージョン履歴
ファイルに使用できるバージョン履歴と同様に、フォーカスビューには、デザイン上のイテレーションを追跡するアノテーション付きのバージョン履歴があります。
通常ファイル全体のバージョン履歴にはファイルの全バージョンが表示されますが、多くの場合はアクティビティーが多すぎて、見たいのはレビューあるいは実装中の一部のフレームまたはセクション内の変更だけということがよくあります。フォーカスビューでのバージョン履歴は、ファイル全体の履歴と同じバージョンと作業を表示しますが、フォーカスビューで開いている特定のデザインに影響するバージョンのみに範囲が設定されます。
デザイナーと開発者はデザインのイテレーションを行いながら、ステータスを更新して変更を説明するメモを追加します。ステータスが更新されるたびに、バージョン履歴のエントリーが追加されます。各繰り返し間の変更を特定するために、異なるバージョンを比較することもできます。
旧バージョンのインスペクト、特定バージョンへのリンクのコピー、ファイル内の最新のバージョンとの比較などができます。Dev Modeでの比較の詳細 →
完了にする
デザインの開発作業が完了していることを示すには、フォーカスビューの上にある[完了としてマーク]ボタンを使用します。
デザインが完了とマークされると、新しいエントリーがバージョン履歴に追加されます。デザインは後のイテレーション用にReady for devビューで引き続き使用できます。