デザインファイルとは?

デザインファイルでは、デザインの作成、共有、テストに必要なツールが提供されます。デザインファイルは、デザイナー、プロダクトマネージャー、ライター、および開発者に人気があります。とはいえ、視覚的なデザインの作成やコミュニケーションを求める方なら誰でもご使用いただけます。

デザインファイルを作成することで、問題の検討、またはデザインプロセス全体の管理ができます。アイデアをひとりで大まかにスケッチする、またはそれを他のユーザーと共有することで、共同で作成したりフィードバックを受けたりすることができます。

Figmaファイルはライブファイルで、常に最新の状態にあり、複数のユーザーが同じファイルで同時に作業できます。1つのライブファイルがあれば、ドキュメントの保存、ダウンロード、やり取りなしで、すべてのユーザーが同じページで作業できます。

すべてのファイルに独自のバージョン履歴があり、これによってデザインの発展の跡をたどることができます。以前の発散を参照する、または新しいバージョンを作成してマイルストーンをキャプチャーすることができます。

使い方を学びましょう

Figmaが初めてなら、初めてファイルを開いたときに少し戸惑うのは当然でしょう。私たちがご案内しますので、あなたが道に迷うことはありません。無事にチームとのコラボレーションを始めることができるようになります。

デザインファイルには、ツールバー、 左サイドバー、右サイドバー、キャンバスの4つの異なる領域があります。レイアウトをシンプルにしていますので、それぞれの場所に何があるか知ることができます。

まとめ

これまでの内容を簡単にまとめておきましょう。ツールバーで、レイヤーの作成と組み合せに必要なツールと機能が提供されます。そのレイヤーをキャンバスに配置することで、デザインを作成できます。

左サイドバーでレイヤーを参照したり、整理したりすることができます。右サイドバーでレイヤーのプロパティを閲覧することができます。

キーコンセプトのいくつかについて、少し掘り下げてみましょう。ページとレイヤーについてです。

ページ

ページはデザインファイルを整理するのに役立ちます。各ページにそれぞれキャンバスがあり、アイデアを作成し、検討するスペースをさらに提供します。次の用途があります。

• マイルストーンとステータスによるデザインの管理
• コンポーネントの整理
• アイデアのメモ帳の保持
• 以前のデザインの保管

ファイルのページを閲覧するには、左サイドバーの現在のページ名をクリックします。また、をタップして新しいページを作成できます。サイドバーでのページの表示→

レイヤー

デザインは、通常、シェイプ、テキストおよびその他の要素の組み合わせでできています。

キャンバスにオブジェクトを追加すると、Figmaでは、各オブジェクトはそれぞれ別のレイヤーとして扱われます。別のレイヤーとすることで、各レイヤーのプロパティを個別に変更または編集することができます。

このデザインのように、ソーシャルメディアへの投稿であれば、名前、プロフィール写真、画像およびキャプションが含まれます。

レイヤーパネルでのレイヤー表示

レイヤーは、他のレイヤーの前、後、隣、または中に置くことができます。レイヤーがどのように編成されているかを見るには、左サイドバーの[レイヤー]をクリックします。

コンテナを使用した作業

コンテナとして機能するレイヤーには、グループ、フレーム、セクションなど、いくつかの種類があります。これらは似ているように見えますが、それぞれに独自の利点があります。

グループとフレームを使用するケースの詳細は、ベストプラクティスガイドでご確認ください。

レイヤーのプロパティの詳細

キャンバスのレイヤーまたはオブジェクトにカーソルを合わせると、その要素全体の周囲にボックスが現れます。レイヤーをクリックして選択すると、そのプロパティの詳細情報が表示されます。

左サイドバーでレイヤーの名前と構成を確認できます。また、右サイドバーで、レイヤーのプロパティを見ることができます。

レイヤーのプロパティには、その寸法およびキャンバス上の位置など、レイヤーの基本情報が含まれます。さらに、色、テキストプロパティなどのスタイルや、シャドウなどのエフェクトも表示されます。

どのプロパティが表示されるかは、選択されたレイヤーの種類によります。スタイルを使用するレイヤーの場合には、スタイル名とアイコンだけが右サイドバーに表示されます。

デザインファイルでの権限

どのようなアクションを実行できるか、ファイルに変更を加えることができるかどうかは、ユーザーの権限によって決まります。ここでは、Figmaの権限モデルについて深く掘り下げるつもりはありませんが、1つだけ理解しておくべき概念があります。 編集可権限と閲覧のみ権限の違いです。

• 編集可権限を持つユーザーは、ファイルに変更を加えることができます。これには、レイヤーの移動、プロパティの更新、ファイル自体の管理など、あらゆることが含まれます。
• 閲覧のみ権限を持つユーザーは、ページやプロトタイプを探索することはできますが、変更を加えることはできません。閲覧者は引き続きフィードバックを通してファイルに貢献することができます。

権限の確認方法

ファイルを編集できるかどうかを知る最も簡単な方法は、ツールバーを確認することです。作成ツールとアクションのすべてを含む完全なツールバーが見えているなら、ファイルへの編集アクセス権があります。

ファイル名の横に閲覧のみと表示される場合、または のように少数のツールだけが表示される場合には、ファイルの閲覧しかできません。

作成を始める準備はできましたか?

次のクイックスタータープロジェクトは、学習の始まりに弾みを付けるのに最適です。

• 最初のボタンのデザイン
• Figmaデザインでイラストの作成
• Create a basic wireframe and prototype
• Figmaデザインでのピクセルアートの作成
• カスタムプロフィールカードの作成