デザインファイルの詳細
このガイドではFigma Designのデザインファイルを使用した作業の基本を説明します。
Figma Designを初めて使用する場合は、初心者向けFigma Designコースの受講をお勧めします。このコースでは、デザインファイルのナビゲートからレイヤーの操作、フレームへのオートレイアウトの適用、コンポーネントの作成、デザインへのプロトタイプ作成コネクションの追加まで、すべてを網羅します。コース終了時には、カスタマイズ可能なポートフォリオサイトを完全にゼロから作成できるようになります。初心者向けFigma Designコースの詳細はこちらをご覧ください。
Figmaの製品の違いについて詳しく知りたい場合は、「Figmaとは」をご覧ください。
デザインファイルとは?
デザインファイルでは、デザインの作成、共有、テストに必要なツールが提供されます。デザインファイルは、デザイナー、プロダクトマネージャー、ライター、および開発者に人気があります。とはいえ、視覚的なデザインの作成やコミュニケーションを求める方なら誰でもご使用いただけます。
デザインファイルを作成することで、問題の検討、またはデザインプロセス全体の管理ができます。アイデアをひとりで大まかにスケッチする、またはそれを他のユーザーと共有することで、共同で作成したりフィードバックを受けたりすることができます。
Figmaファイルはライブファイルで、常に最新の状態にあり、複数のユーザーが同じファイルで同時に作業できます。1つのライブファイルがあれば、ドキュメントの保存、ダウンロード、やり取りなしで、すべてのユーザーが同じページで作業できます。
すべてのファイルに独自のバージョン履歴があり、これによってデザインの発展の跡をたどることができます。以前の発散を参照する、または新しいバージョンを作成してマイルストーンをキャプチャーすることができます。
ファイルブラウザのデザインファイル
ファイルカードのアイコンで、Figma Designファイルであることがわかります。
操作方法を探す
Figmaが初めてなら、初めてファイルを開いたときに少し戸惑うのは当然でしょう。私たちがご案内しますので、あなたが道に迷うことはありません。無事にチームとのコラボレーションを始めることができるようになります。
デザインファイルには5種類の領域があります。
(A) ナビゲーションバー: さまざまなキャンバスワークフロー、ツール、閲覧、ファイル通知へのエントリーポイントを含みます。
(B) 左サイドバー: ナビゲーションバーのタブ選択に基づいて、キャンバスのアクションを含むパネル。
(C) キャンバス: デザインを作成および操作できるファイルのメインワークスペース。
(D) 右サイドバー: デザインプロパティとプロトタイププロパティのパネルがあります。また、共有やエクスポートといったアクションもあります。
(E) ツールバー: 各種作成ツール、クイックアクションメニュー、ファイルモード間の切り替えスイッチャーがあります。
ツールバー
ツールバーは、キャンバスを操作したり、キャンバスにオブジェクトを追加したりするためのハブです。オブジェクトの選択、キャンバス内を移動、フレーム、図形、テキスト、その他のレイヤーの作成に必要なすべてのツールがここにあります。これらは、デザインの構成要素になります。
深く掘り下げる準備ができたら、ツールバーの各ツールをお試しください。
ナビゲーションバー
デザインファイルにおけるナビゲーションバーは、最も左に位置する垂直バーで、キャンバスの重要なワークフローに必要なタブがあります。例えば、レイヤーやページのナビゲーション、コンポーネントの挿入、プラグインやシェーダーの使用、バリアブルの管理、ファイル通知の確認などです。
左サイドバー
左側のサイドバーはナビゲーションバーの拡張機能であり、ナビゲーションバーで選択したタブに応じて変更されます。例えば、ファイルタブを選択すると、レイヤーやページにアクセスでき、ファイルに対してアクションを実行できます。アセットタブでは、ローカルのコンポーネントを表示したり、キットやライブラリからコンポーネントを検索したりできます(編集アクセス権が必要)。
右サイドバー
右サイドバーで、デザインの詳細情報にアクセスできます。何も選択していない場合には、色やテキストスタイルなどの、ローカルリソースを閲覧できます。
レイヤーを選択すると、現在の選択したレイヤーのプロパティを参照することができます。ユーザーの権限によって、サイドバーで何を見ることができるか、どのアクションが行えるかが決まります。
右側のサイドバーには、デザインを共有したり、リアルタイムで共同作業を行うためのツールもあります。例えば、ファイルを共有したり、他に誰がいるかを確認したり、オーディオで話したりすることができます。
必要に応じて、個人のズームと閲覧のオプションを調整することもできます。ここで行った変更は、自分の閲覧にのみ適用されます。
閲覧限定アクセス権
- コメント: コメントの表示と検索
- プロパティ: 選択対象のプロパティを表示
編集アクセス権
- デザイン: レイヤーのデザインプロパティの表示と編集
- プロトタイプ: プロトタイプのインタラクション、フロー、設定の表示と編集
深く掘り下げる準備ができたら、右サイドバーを見てみてください。
Dev Modeでデザインのインスペクション
ハンドオフプロセスの一環としてファイルを閲覧していますか? Dev Modeは、開発者に特化した、デザインファイルをインスペクトおよびナビゲートするためのインターフェースです。
Dev Modeを使用すると、ready for devのデザインを見つけたり、デザインをコードに変換するために必要な情報にアクセスしたりできます。Dev Modeのガイド
キャンバス
キャンバスはユーザーの作業エリアで、ここでレイヤーを配置してデザインを作成します。アイデアを検討し発散するための広大な空間です。
パンによる移動
ファイル内を移動して、キャンバス上にあるものを確認します。
マウス: Spaceキーを押したまま、クリックアンドドラッグでキャンバス内を移動します。
トラックパッド: 2本指で、任意の方向にスライドしてキャンバスを移動します。Figmaでは、コンピューターのデフォルトのスクロール方向設定が使用されます。
ズームインとズームアウト
ズームインして詳しく調べるか、ズームアウトして全体像を見ます。画面の右上隅で、現在のズームレベルを確認します。
マウス: ⌘ Command/Ctrlを押しながら、下にスクロールするとズームインし、上にスクロールするとズームアウトします。
トラックパッド: 2本指でピンチするとズームアウトし、2本指でストレッチするとズームインします。
ストレスのない参照
ファイルに参加またはファイルを参照するのが初めてだとすると、キャンバス上でのやり取りは少し怖いことかもしれません。誤って何かを移動、変更、削除してしまうのではないかと心配になるのはよくあることです。
大きな力に大きな責任が伴う必要はありません。ツールバーの手のひらツールを選択するか、キーボードのHを押します。そうすれば、ファイルをクリック、ドラッグ、ズームすることができ、意図しない変更を加える心配がありません。
まとめ
これまでの内容を簡単にまとめておきましょう。ツールバーで、レイヤーの作成と組み合せに必要なツールと機能が提供されます。そのレイヤーをキャンバスに配置することで、デザインを作成できます。
左サイドバーでファイルを参照したり、整理したりすることができます。右サイドバーでレイヤーのプロパティを閲覧することができます。
キーコンセプトのいくつかについて、少し掘り下げてみましょう。ページとレイヤーについてです。
ページ
ページはデザインファイルを整理するのに役立ちます。各ページにそれぞれキャンバスがあり、アイデアを作成し、検討するスペースをさらに提供します。次の用途があります。
- マイルストーンとステータスによるデザインの管理
- コンポーネントの整理
- アイデアのメモ帳の保持
- 以前のデザインの保管
ファイルのページを閲覧するには、左サイドバーの現在のページ名をクリックします。また、をタップして新しいページを作成できます。サイドバーでのページの表示
ページは、特定のデザインのコレクションを共有するのに最適です。たとえば、レビューのため、またはデザインがReady for devであるときに、別のページを作成してください。
ページを共有するには、ページ名を右クリックし[ページのリンクをコピー]をクリックします。誰がそのリンクを開いても、正しいページにたどり着きます。
レイヤー
デザインは、通常、シェイプ、テキストおよびその他の要素の組み合わせでできています。
キャンバスにオブジェクトを追加すると、Figmaでは、各オブジェクトはそれぞれ別のレイヤーとして扱われます。別のレイヤーとすることで、各レイヤーのプロパティを個別に変更または編集することができます。
このデザインのように、ソーシャルメディアへの投稿であれば、名前、プロフィール写真、画像およびキャプションが含まれます。
Figmaを使用するのに、幾何学の達人になる必要はありません。しかし、キャンバスでは3次元で作業するのだということを知っておくことは役に立ちます。
X(水平)とY(垂直)の軸があって、これによりキャンバスにレイヤーの座標が与えられます。さらに3つめの次元があります、Z-indexです、これによりレイヤーの深さまたは表示の順序が与えられます。
レイヤーパネルでのレイヤー表示
レイヤーは、他のレイヤーの前、後、隣、または中に置くことができます。レイヤーがどのように編成されているかを見るには、左サイドバーの[レイヤー]をクリックします。
レイヤーの種類
各レイヤーには名前と、レイヤーの種類を表すアイコンが付いています。お気づきかもしれませんが、そのアイコンの一部がツールバーに表示されています。ツールバーでツールを選択して、またはキーボードショートカットを使用して、その種類のレイヤーを作成できます。
| レイヤーアイコン | レイヤー名 | ショートカット |
| フレーム | F | |
| グループ | ⌘ Command G | |
| コンポーネント | ⌥ Option ⌘ Command KまたはCtrl + Alt + K | |
| インスタンス | なし | |
| テキスト | T | |
| シェイプ | R | |
| 画像 | ⇧ Shift ⌘ Command kまたはShift Ctrl k | |
| オートレイアウト | Shift A | |
| セクション | Shift S | |
| GIFまたは動画 | ⇧ Shift ⌘ Command kまたはShift Ctrl k |
レイヤーの順序と階層
レイヤーパネルにレイヤーを表示する順序も重要です。レイヤーの順序によって、キャンバスでレイヤーがどのように重なり合うのかが決まります。
このメニューには、背景として機能する長方形があります。レイヤーパネル内で他のレイヤーの下にありながらも、キャンバス内でそれらのレイヤーの上にも表示されます。レイヤーパネル内で他のレイヤーの上にあれば、テキストレイヤーやアイコンレイヤーはまったく見ることができなくなります。
コンテナとしてのレイヤー
すでに述べたように、他のレイヤーの内側にレイヤーを置くことができます。レイヤーに他のレイヤーが含まれていると、レイヤーパネル内のそのレイヤーの横に矢印が表示されるのでわかります。矢印をクリックするとそのコンテナ内のすべてのレイヤーを表示できます。
レイヤーの関係
コンテナとその中にあるレイヤーとの関係を表現するために、親および子という用語を使用しています。
- 親レイヤーにはフレーム、コンポーネントおよびグループなどのレイヤーが含まれています。
- 子レイヤーは、親レイヤーの内側にあるレイヤーで、シェイプ、テキスト、自身の子レイヤーを含むコンテナなどの個別のレイヤーが子レイヤーとして機能します。
親、子、兄弟の関係の詳細を参照してください。
コンテナを使用した作業
コンテナとして機能するレイヤーには、グループ、フレーム、セクションなど、いくつかの種類があります。これらは似ているように見えますが、それぞれに独自の利点があります。
グループ
グループは、複数のレイヤーを組み合わせて1つの要素にするのに最適の方法です。レイヤーパネルがシンプルになり、キャンバス内では単一のオブジェクトとのやり取りが可能となります。たとえば、シェイプを1つにまとめたいときに、そのコレクションを作ることができます。
グループはレイヤーのコレクションであって、個別の要素ではありません。そのため、独自の寸法またはプロパティはありません。実際、グループに変更を加えると、グループ内の各レイヤーが変更されます。
フレーム
フレームは、Figmaの中でレイヤーを組み合わせるもう1つの方法です。アプリデザインの1つのページのように、フレームは特定のデバイスまたはスクリーンサイズの枠組みとして機能します。レイヤーのコンテナとしても機能し、ナビゲーションバーのレイヤーのように、個別の要素を構成します。他のフレームの中にフレームを置くこともできます。
グループとは異なり、フレームは塗り、丸い角、シャドウなど、独自の寸法とプロパティを持つことができます。オートレイアウト、制約、レイアウトグリッドのような機能もあり、その中にあるレイヤーを制御し、またはレイヤーに影響を与えることができます。
フレームプリセット
Figmaには、共通アセット、デバイス、スクリーンサイズ用のフレームプリセットがあります。デザインしているのがモバイルアプリであるかInstagramへの投稿であるかは問いません。フレームプリセットの詳細
セクション
セクションツールでは、キャンバスの特定の区域をセクションとして指定し、ラベルを付けることができます。セクションを使用して、関連するコンセプトとアイデアの分類や、デザインのグループ化が可能です。
セクションは、プロセス全体を通じて、フォーカスを設定したり、文脈を与えたり、コラボレーターを導いたりする際に役立ちます。レビューなどのアクティビティーやハンドオフ用のデザインの共有に最適です。
グループとフレームを使用するケースの詳細は、ベストプラクティスガイドでご確認ください。
レイヤーのプロパティの詳細
キャンバスのレイヤーまたはオブジェクトにカーソルを合わせると、その要素全体の周囲にボックスが現れます。レイヤーをクリックして選択すると、そのプロパティの詳細情報が表示されます。
左サイドバーでレイヤーの名前と構成を確認できます。また、右サイドバーで、レイヤーのプロパティを見ることができます。
レイヤーのプロパティには、その寸法およびキャンバス上の位置など、レイヤーの基本情報が含まれます。さらに、色、テキストプロパティなどのスタイルや、シャドウなどのエフェクトも表示されます。
どのプロパティが表示されるかは、選択されたレイヤーの種類によります。スタイルを使用するレイヤーの場合には、スタイル名とアイコンだけが右サイドバーに表示されます。
プロパティを編集できないのはなぜ?
クリックしてもプロパティを調整ができない場合は、アクセス権が閲覧のみになっています。プロパティパネルを使用してレイヤーのプロパティを表示することはできますが、変更することはできません。
ハンドオフプロセスの一環としてファイルを閲覧するのなら、Dev Modeを使用することをおすすめします。Dev Modeは開発者に特化した、デザインファイルをインスペクトおよびナビゲートするためのインターフェースです。Dev Modeのガイド
デザインファイルでの権限
どのようなアクションを実行できるか、ファイルに変更を加えることができるかどうかは、ユーザーの権限によって決まります。ここでは、Figmaの権限モデルについて深く掘り下げるつもりはありませんが、1つだけ理解しておくべき概念があります。編集可権限と閲覧のみ権限の違いです。
-
編集可権限を持つユーザーは、ファイルに変更を加えることができます。これには、レイヤーの移動、プロパティの更新、ファイル自体の管理など、あらゆることが含まれます。 -
閲覧のみ権限を持つユーザーは、ページやプロトタイプを探索することはできますが、変更を加えることはできません。閲覧者は引き続きフィードバックを通してファイルに貢献することができます。
閲覧のみ権限がある場合のアクションを見る
- デザインファイルのオープンと表示
- デザインファイル内のレイヤー間の距離の測定
- 左サイドバーまたはキャンバスでのレイヤーの選択
- インスペクトパネルを使ったレイヤープロパティの表示
- 音声通話への参加(キャプション付き)
- コメントの追加、返信、解決
- ファイルのバージョン履歴の表示、および特定のバージョンへのリンクの複製または共有
- プロトタイプとプレゼンテーションの閲覧と操作
- 既存のプロトタイプフローとコネクションの表示
- フレーム、コンポーネント、レイヤーのコピーとエクスポート
権限の確認方法
ファイルを編集できるかどうかを知る最も簡単な方法は、ツールバーを確認することです。作成ツールとアクションのすべてを含む完全なツールバーが見えているなら、ファイルへの編集アクセス権があります。
[編集を依頼]と表示されており、小数のツールだけが表示される場合には、ファイルの閲覧しかできません。
編集アクセス権が必要ですか?ツールバーからファイルへのアクセスをリクエストするボタンをクリックします。このオプションが表示されない場合、チームまたは組織管理者によってアクセスが制限されています。プロフェッショナルプランに参加している場合は、チーム管理者に連絡してください。ビジネスプランやエンタープライズプランをご利用の場合は、有料シートのアップグレードをリクエストしてください。
作成を始める準備はできましたか?
次のクイックスタータープロジェクトは、学習の始まりに弾みを付けるのに最適です。