デザインファイルとは?
デザインファイルは、デザインを作成、共有、プロトタイプを追加するために必要なツールを提供します。個々のファイルを作成して特定の問題に対する解決策を探求したり、単一のファイルを使用してデザインプロセス全体を管理したりできます。
注意: デザインファイルは常に最新の状態であり、複数の人が同時に同じファイルでコラボレーションすることができます。あなたの作業は常にバックアップされているので、ファイルの複数のバージョンを手動で保存したりダウンロードしたりする必要はありません。
Figma Designエディタを見る
Figma Designエディタは、ツールバー、左と右のサイドバー、キャンバスの4つの主要なエリアで構成されています。
ツールバー
ツールバーには、キャンバスを移動し、フレーム、シェイプ、テキストなどのレイヤーを作成し、コラボレーターにコメントを残すためのツールが用意されています。
注: このコースでは使用しませんが、Figma AIツールにアクセスできます。ただし、これらは有料プランでの利用になります。
Figma Drawは2025年5月に導入され、Figma Designエディタ内のビジュアルデザインツールのセットです。このコースではFigma Draw機能は使用しませんが、ツールバーにFigma Drawの新しいエントリーポイントが見られるかもしれません。
左サイドバー(ナビゲーションパネル)
左サイドバー、またはナビゲーションパネルは、ファイル内のレイヤー、ページ、コンポーネントへのアクセスを提供し、メインメニューとファイルメニューにもアクセスできます。 メインメニューを使用して、設定や他の設定にアクセスし、ファイルメニューを使用して、ファイルの名前変更、別プロジェクトへの移動、バージョン履歴の表示などのファイル固有のアクションを実行します。
ファイルにわかりやすい名前を付けておくことで、将来簡単に見つけられるようにするのは良い考えです。ファイルの名前を変更するには、ファイルメニューから名前を変更を選択するか、左サイドバーでファイル名をダブルクリックして新しい名前を入力します。
左サイドバーには2つのタブがあります: ファイルとアセット。ファイルタブは、ファイル内のページとレイヤーにアクセスできます。ページセクションを使用して、ページ間を移動したり、新しいページを追加したりします。レイヤーセクションは、キャンバス上のすべてのレイヤーを表示し、すばやく名前を変更したり、順序を並べ替えたり、レイヤー階層を表示したりできます。
アセットタブは、コンポーネントへのアクセスを提供します。コンポーネントは再利用可能なデザイン要素であり、Figma Designの強力な機能です。次回のレッスンで、コンポーネントについてもっと学び、自分たちのコンポーネントをいくつか作成します。
右サイドバー(プロパティパネル)
右サイドバー、またはプロパティパネルは、デザインに関する情報にアクセスできる場所です。
右のサイドバーには、デザインとプロトタイプの2つのタブがあります。[デザイン]タブでは、デザイン内のオブジェクトのプロパティの表示、追加、削除、変更が可能です。何も選択していない場合、キャンバスの背景色を変更したり、現在のページ上のすべてのコンテンツをエクスポートしたりできます。
あなたのローカル スタイルと バリアブル、および右のサイドバーから エクスポート 設定にもアクセスできます。これらの機能をこのコースで取り上げることはありませんが、詳細は私たちのヘルプセンターで確認できます。
レイヤーを選択すると、右のサイドバーの設定を使用してレイヤーのプロパティを表示および変更できます。選択するレイヤーの種類によって、表示されるプロパティ設定が決まります。
デザインタブの隣に プロトタイプタブがあります。ここでは、デザインをインタラクティブにする準備ができたときにプロトタイプ接続を追加します。プロトタイピングについては、コースの後半でさらに学びます。
キャンバス
キャンバスはデザインを作成、洗練、および整理する場所です。
キャンバスを移動するには、スペースキーを押しながらカーソルをドラッグします。または、トラックパッドで2本の指をスライドして任意の方向に移動させます。また、Hを押して ハンドツールを有効にし、何かを選択せずにキャンバスを移動することもできます。
ズームインまたはズームアウトするには、トラックパッドで2本の指を一緒にピンチし、または伸ばします。また、⌘ Command (Mac)またはCtrl (Windows)を押しながらマウスで上下にスクロールすることもできます。
ファイルにいくつかのページを追加してください
キャンバスは、さまざまなアイデアを作成し、探索するためにたくさんのスペースを提供するので、スペースが足りなくなることを心配する必要はありません。作業を整理して見やすく保つために、ページを追加しておくと便利です。
ページを使用して、デザインプロセスの各段階を追跡し、異なるレイアウトを探ったり、コンポーネントを保存したり、アイデアのスクラッチパッドとして利用したり、古いデザインをアーカイブしたりします。
ファイルにいくつかのページを追加するには:
- ページの横にあるプラスをクリックし、ページを2つ追加します。
- 最初のページの名前をダブルクリックして、試行に名前を変更します。このページを使用してポートフォリオの要素を構築しながらデザインを自由に試行錯誤します。
- 二つ目のページにデザインと名付けます。ここに最終的なデザインをまとめます。
- 3番目のページの名前をコンポーネントとします。これを使って、コースの進行中に主要なコンポーネントを整理します。