右サイドバーで、デザイン、プロトタイプの作成、レイヤープロパティの確認を行う

Figmaデザインでは、キャンバスの両側にサイドバーが表示されます。ツールバーと合わせて、これらのサイドバーがFigma UIを構成しています。

Figma UIにより、デザインの各要素へのアクセスや、各要素の作成、調整を行えます。

• 左サイドバーでは、レイヤー、アセット、ファイル内のページへのアクセスが可能です。名称は[レイヤー]パネルです。詳しい操作方法はレイヤーパネルを参照してください。
• 右サイドバーでは、デザインプロパティとデザインのプロトタイプ設定の閲覧または変更ができます。

この記事では、右サイドバーについてご紹介します。

右サイドバーで利用できる機能は、ファイルへの権限とシートタイプによって次のとおり異なります。

編集権限で右サイドバーを使用する

デザイン

[デザイン]タブでは、デザイン内のオブジェクトのプロパティの閲覧、追加、削除、変更が可能です。

キャンバス上で何も選択されていない場合は、[デザイン]タブで次の内容を実行できます。

• ファイルにローカルなスタイルとバリアブルへのアクセス
• キャンバスの背景色の更新
• ページ全体のエクスポート

レイヤーを選択すると、レイヤー編集用の多種多様な設定にアクセスできます。利用できる設定は選択したレイヤーによって異なります。

• 整列と配置
• フレームサイズと方向
• 位置 (XとY)
• 寸法と回転 (幅と高さ)
• 角の半径
• 制約 
• レイアウトグリッド
• コンポーネントプロパティ
• インスタンス
• オートレイアウト
• レイヤー (ブレンドモード)
• テキスト
• 塗り
• 線
• エフェクト
• エクスポート設定

プロトタイプ

[プロトタイプ]タブを使用して、プロトタイプの作成を開始します。

まず、任意のオブジェクトを選択します。次に、[プロトタイプ]タブで次の内容を実行します。

1. フローの開始点を追加
   フローは、プロトタイプを構成する接続されたフレームのネットワークをユーザーが進んでいく際の経路です。開始点を追加し、工程の最初のフレームを選択します。
2. インタラクションを追加
   [インタラクションの詳細]モーダルを開き、トリガー、アクション、その他のインタラクション用アニメーションを定義します。
3. スクロール動作を定義
   スクロールした際のプロトタイプの挙動を選択します。
4. プロトタイプ設定を表示
   デバイスと、プロトタイプの背景を調整できます。

Figmaでのプロトタイプ作成の詳細→

開発モードに入る

開発モードは開発者のみに向けて構築されたFigma内のスペースです。開発モードでは、デザインを把握してコードに変換するために必要なデザイン仕様と関連情報が表示されます。

開発モードでは、以下を実行できます。

• デザインコンポーネントからのプロパティ、値、コードを表示およびコピーする
• フレームの各バージョンを比較し、ファイルを最後に閲覧した後に加えられた変更点を確認
• 重要なレイヤー情報を表示する簡単なインタラクションで、デザインをインスペクトおよび移動する
• セクションのステータスで、開発準備用のデザインを迅速に検索する
• Jira、Storybook、GitHubなど開発者に特化した統合機能を使用してワークフローを合理化する
• 関連するリンクと開発者リソースをコンポーネントに追加する

開発モードにアクセスするには、ツールバー上で切り替えます。開発モードに入ると、右サイドバーを含むインターフェースに、開発者向けに特化した機能が表示されます。

開発モードの使用方法を確認する

閲覧のみの権限で右サイドバーを使用する

閲覧者と限定閲覧者は、デザインの共同制作、デザインプロパティの閲覧、基本コードのコピー、アセットのエクスポートが可能です。

閲覧者の権限は、デザインを編集する必要のないユーザーや、デザインにアクセスする必要はあるものの、開発モードの全機能は必要のない開発者に適しています。

コメント

右サイドバーで[コメント]を選択すると、新規コメントの追加や既存のコメントの閲覧を行えます。コメントを使用すれば、フィードバックの追加と返信、コラボレーション、反復のすべてを、オリジナルのデザインファイル内でより迅速に実行できます。

[コメント]タブでは、ファイル内の既存のコメントをすべて表示できます。あるいは次の手順により、ファイル内の特定のコメントまたは一連のコメントを検索することもできます。

• 検索フィールドにキーワードを入力して特定のコメントを探します。
• フィルターを使用して、コメントを投稿順に表示したり、未読のコメントのみを表示したりできます。一定条件に合致する一連のコメントのみを表示するフィルター設定もここで行います。

[設定]をクリックすると、アイコンの非表示や、ファイル内のコメント通知の管理を行えます。

Figmaデザインファイルへのコメントの追加方法についてはこちら →、コメントの閲覧および管理方法についてはこちら →

プロパティ

右サイドバーの[プロパティ]タブで、キャンパス上の特定のレイヤーのインスペクションを行えます。

まず、キャンバス上のレイヤーを選択します。その際は、直にキャンバス上の要素を選択しても、左サイドバーの[レイヤー]パネルから選択しても構いません。レイヤーは、シェイプ、テキスト、グループ、フレームなど、どの種類でも選択可能です。

[プロパティ]の下に、選択したレイヤーの名前と、レイアウトや色などの詳細情報が表示されます。

キャンバス上のレイヤーを右クリックすると、以下を実行できます。

• レイヤーのコピー
• コード (CSS、iOS、Android)、SVG、PNGとしてのコピー/ペースト、リンクのコピー、そのプロパティのコピー
• 選択したレイヤー内での別のレイヤーの選択

オブジェクト間の距離を測定したい場合は、キーボードショットカットを使って間隔やパディングの情報をすばやく得ることができます。測定ガイドラインを追加するには→

エクスポート

閲覧のみの権限では、さまざまなファイル形式とスケールでFigmaからデザインをエクスポートできます。コンテンツを他のユーザーと共有したり、ツール間でコンテンツを移動したり、Figmaの外部にデザインのコピーを保存したりできます。

Figmaからのコンテンツのエクスポート方法はこちら→