Figma Designでは、フレームに文字と図形を配置して画面を作ります。最初は1枚の画面を作り、同じ部品を増やし、画像を書き出すところまで進めると、どの機能を何のために使うか確認できます。
以下はFigma公式の案内に基づく操作ガイドです。右側の設定項目は、選択したレイヤーと編集権限によって変わります。
始める前に、編集対象と画面の役割を確認する
Figma Designのファイルを開き、編集できる権限があるか確認します。素材から始める場合は、先に.figファイルを読み込む手順を確認してください。
| 場所 | 確認する内容 |
|---|---|
| 左側のナビゲーション | ページ・レイヤーの階層、アセットなど |
| キャンバス | 作業している画面・部品 |
| 右側の設定 | 選択中の対象の寸法、文字、塗り等 |
| ツールバー | フレーム・図形・文字・移動等の作成ツール |
ツールの名称は公式のツールバーガイドで確認できます。UI更新で配置が変わるため、アイコンの位置だけで判断しないようにします。
画面を作る基本操作12項目
1. フレームを作る
Frameツールを選び、プリセットまたは任意のサイズでフレームを作ります。フレームは画面や部品の入れ物で、文字や図形を内側に置きます。公式のフレーム説明を参照してください。
練習用に幅390pxの画面を作るなら、右側の幅を確認し、用途が分かる名前を付けます。390pxは練習の設定例であり、すべてのスマホに共通の幅ではありません。
2. レイヤーを選び、階層を確認する
左側のレイヤー一覧から対象を選び、右側にその設定が出るか確認します。フレーム内の要素は階層で確認できます。画面上で重なって選びにくいときも、レイヤー一覧から選択できます。
重なりの順序とレイヤーごとの設定は公式のレイヤー入門に整理されています。
3. 図形を置く
Rectangleなどの図形ツールで、カードの背景やボタンの形を作ります。位置と幅・高さを確認し、画面を囲むフレームの内側に置かれているか確認します。
4. テキストを作る
Textツールで見出しと本文を置きます。フォント、サイズ、行間を設定した後、実際に使う長さの文章を入力し、改行と文字の収まりを確認します。フォント警告は不足フォントの記事で対処します。
5. 塗り・線・効果を設定する
背景色はFill、輪郭はStroke、影等はEffectsで設定します。文字の色も対象のテキストレイヤーで確認します。背景の上で文字が読めるか、影が隣の要素に重ならないかを確認してください。
6. 位置と余白を揃える
複数の対象を選んで整列し、寸法と間隔を照合します。画面の端からの余白と、部品同士の間隔を別々に確認します。同じ用途のカードを複製した後は、幅と左右の位置も確認します。
7. オートレイアウトで文字量の変化に対応する
ボタンのラベルやカード内の文章に対して、親の余白と部品間の間隔を設定します。対象を選び、Shift + A またはAdd auto layoutで設定を始められます。横・縦・グリッドの配置、親子のサイズ設定は公式のオートレイアウトガイドで確認します。
長いラベルへ変更し、幅を狭くして確認してください。オートレイアウトを付けるだけで、すべての画面幅に適切な配置になるとは限りません。
8. コンポーネントとインスタンスで部品を使う
繰り返すボタンなどをコンポーネントにし、アセットからインスタンスを配置します。元の部品を直す変更と、配置先だけの文字を変える変更を分けます。手順はアセットとコンポーネントで確認できます。
9. スタイルと変数を使い分ける
見出しのフォント・サイズ・行間の組み合わせはスタイル、色や余白の値はVariablesで共通化します。各機能の違いは再利用機能の比較を参照してください。
10. プロトタイプで画面の遷移を確認する
複数の画面がある場合は、Prototypeでクリック等のトリガーと移動先を設定し、プレビューで動きを確認します。これは操作の検討用であり、Webサイトやアプリの実装完了を意味しません。公式のプロトタイプ案内を参照してください。
11. 共有権限とコメントを確認する
閲覧だけを依頼するのか、編集も依頼するのかを決めて共有します。コメントで修正位置を指定する場合は、対象と変更内容を具体的に書きます。公開してよい素材か、共有先がアクセスできるかも確認します。
12. 必要な範囲を書き出す
フレーム等の対象を選び、形式と倍率を設定します。PNGやJPGの2xはピクセル数を増やす設定です。元のフレームの幅と、出力画像の寸法を照合してください。書き出し倍率・DPIの説明で、ベクター形式との違いも確認できます。
基本操作の後に学ぶ応用機能
| 機能 | 使う場面 | 確認すること |
|---|---|---|
| バリアント | 同じボタンのサイズ・状態を切り替える | Variablesと区別し、コンポーネントセットの属性を付ける |
| コンポーネントプロパティ | 文言、表示・非表示、入れ替え等を選びやすくする | 個別上書きと、利用者へ公開する設定を分ける |
| インスタンスの上書き | カードごとに文言や画像を変える | 元から更新される項目と個別の値を確認する |
| ライブラリ | 共通部品を別ファイルから使う | 契約、権限、公開、利用先での更新確認 |
| Smart Animate | 対応するレイヤーの変化を補間する | レイヤー名・階層と、補間できるプロパティ |
| モバイルでのプレビュー | 実際の画面でサイズ感を確認する | アカウント、対象ファイル、表示方法の条件 |
| プラグイン | 素材挿入や繰り返す処理を補助する | 用途、要求するアクセス、現在の提供条件 |
同じファイル内の部品の再利用と、別ファイルへのライブラリ公開では条件が異なります。アセット・ライブラリ記事で確認してください。プラグインはAPI・プラグインカテゴリーから用途別に探せます。
最初の画面で確認すること
- 文字と図形が目的のフレーム内に入っている。
- レイヤー名を見て、見出し・本文・ボタンを選び分けられる。
- 長い文言でも改行や余白を確認できる。
- 元の部品と配置したインスタンスを区別できる。
- 書き出した画像の範囲・形式・寸法が目的と一致する。
操作に迷ったときは、使い方まとめから目的に合う記事へ進めます。
よくある質問：Figmaの基本操作で迷ったときのチェックリスト
Figmaを初めて使うときは、どこから始めればよいですか？
最初は、1枚の画面を作り、同じ部品を増やし、画像を書き出すところまで進めると、どの機能を何のために使うか確認できます。記事では、基本操作12項目を順に案内しています。
フレームは、何のために使いますか？
フレームは、画面や部品の入れ物で、文字や図形を内側に置きます。練習用に幅390pxの画面を作る例を紹介していますが、390pxは練習の設定例で、すべてのスマホに共通の幅ではありません。
オートレイアウトを付ければ、どの画面幅でも崩れませんか？
崩れないとは限りません。オートレイアウトを付けるだけで、すべての画面幅に適切な配置になるとは限りません。長いラベルへ変更し、幅を狭くして確認してください。
スタイルと変数は、どう使い分けますか？
見出しのフォント・サイズ・行間の組み合わせはスタイル、色や余白の値はVariablesで共通化すると説明しています。
プロトタイプを作れば、Webサイトやアプリが完成しますか？
しません。プロトタイプは操作の検討用であり、Webサイトやアプリの実装完了を意味しません。
書き出しで、2xにすると何が変わりますか？
PNGやJPGの2xは、ピクセル数を増やす設定です。元のフレームの幅と、出力画像の寸法を照合してください。