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