デザインファイルとは?

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

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

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

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

使い方を学びましょう

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

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

まとめ

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

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

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

ページ

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

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

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

レイヤー

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

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

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

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

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

コンテナを使用した作業

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

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

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

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

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

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

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

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

権限により、どのようなアクションを実行できるか、およびファイルに変更を加えることができるかどうかが決まります。ここでは、Figmaの権限について詳しく説明はしませんが、理解すべき概念が1つあります。編集者と閲覧者の違いです。

• 編集者はファイルを編集または変更できます。レイヤーの移動、プロパティの更新、ファイルそれ自体の管理のすべてが可能です。
• 閲覧者はページとプロトタイプを参照することができますが、変更することはできません。それでも、閲覧者はフィードバックをすることでファイルに貢献できます。

権限の確認方法

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

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

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

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

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