Figmaの基本操作の流れ
Theme テーマ
Lesson2では、Figmaを扱う上での基本的な操作や機能を学んでいきます。まずは基本操作の移動や拡大縮小、フレームについて見ていきましょう。
デザインファイルを作成する
ファイルブラウザで「デザインファイルの新規作成」のボタン図1をクリックし、Figmaのデザインファイルを作成します。
XXページ、Lesson1-03参照。
@div:figure
デザインファイルの新規作成 @divend
「デザインの枠」としてのフレーム
Figmaでデザインを作成する際には、「デザインの枠」としてのフレームを用意するところからはじめます。
ツールバーにある「＃（シャープ）」アイコンのフレームツールを選びます。すると、右側の「デザインパネル」に「スマホ」「タブレット」などのデバイスごとの項目が表示されます図2。
@div:figure
フレームツールを選んだ際の右サイドバー @divend
たとえばAndroidの小サイズとなる幅360のデザインを作成したいときは、「スマホ」の「Android(小)」図3を選ぶと、幅360・高さ640のフレームが用意されます。
@div:figure
「Android(小)」を選んだ様子 @divend
@div:figure
「Android(小)」を選んだ様子 @divend
このように、作りたいデザインのサイズに合ったフレームを用意して、その中にデザインを作っていくことになります。
Webサイトデザインをする際には、「デスクトップ」のフレームから選ぶとよいでしょう
Figmaでの拡大・縮小と移動
Figmaでは、１つのファイルに複数のフレームを用意し、それぞれを複数の画面としてデザインを作成していくことが多いため、頻繁に拡大・縮小図4、移動図5を行うことになります。まずはこの基本的な操作を覚えておきましょう。
拡大・縮小
| 操作デバイス | 操作方法 |
|---|---|
| キーボード+マウス | キーボードの ⌘ [Ctrl] キーを押しながらマウスホイールを回す |
| トラックパッド | キーボードの ⌘ [Ctrl] キーを押しながら２本指で上下にスクロール |
また、キャンバス画面右上の85%などが表示されている箇所は表示倍率を示していて、100%の場合が実寸サイズとなります。
パーセント表示されている箇所をクリックするとズームメニューが開き、「100%ズーム」をクリックすることで実寸表示となります。
ショートカットキーは ⌘ [Ctrl] + 0 キーです。
移動
| 操作デバイス | 操作方法 |
|---|---|
| キーボード+マウス | キーボードのspaceキーを押しながらドラッグ |
| トラックパッド | ２本指で上下左右にスクロール |
パーツ自体を動かす場合は移動ツールを利用します。
XXページ、Lesson1-04参照。
ズームイン、ズームアウトのほかに、自動ズーム機能というものがありますが、これはページ内の全体を表示させるもので、フレームが複数あるような大きいファイルの場合は、表示サイズは小さめの数値になるでしょう。
ズームインは ⌘ [Ctrl] + shift + ; キー、ズームアウトは ⌘ [Ctrl] + - キーがショートカットキーです。
ショートカットキーは shift + 1 キーです。
要素をまとめる機能としてのフレーム
フレームの機能には、前述の「作りたいデザインのサイズを定義する」機能だけでなく、「複数の要素をまとめる」機能もあります。
たとえば、Webサイトのプロフィールページで見られる、顔写真、名前、プロフィール文のセットをまとめるときなどに、フレームを使うとよいでしょう。
まとめたい複数の要素を選択中に、⌘ [Ctrl] + option [Alt] + G キーでフレーム化されます図6。
@div:figure
複数の要素にフレームが適用された様子 @divend
まず、名前とプロフィールの２つの要素をフレーム適用し、作成したフレームと写真の２つでフレームを適用します。
フレームが適用されている場合、フレーム内の要素をまるごと移動できます。また、フレーム化することでレイヤーが整理されるので、積極的にフレーム化するとよいでしょう
フレームとグループの違い
Figmaでの要素をまとめる機能には、フレームのほかに「グループ」があります。
グループは、⌘ [Ctrl] + G キーでグループ化されます。
「要素をまとめる機能」が複数ある点は、Figmaの分かりづらい点といえます。また、この２つ以外に「セクション」という機能もあるので、このあと解説します。
どちらも要素をまとめた際には一緒に移動などができますが、拡大縮小した際に内側の要素の挙動が違う点です。
- グループの内側に配置された画像や長方形も拡大縮小する
- フレームの内側の要素は拡大縮小されず「制約」によって制御される
文字は拡大縮小しません
この２つの違いを表すと、図7のようになります。
@div:figure
拡大縮小時のフレームとグループの違い @divend
制約
フレームを作成した際に、その内側の要素は「制約」によって制御されます。
制約とは、フレームの内側にある要素が、フレームが広がったときにどのような挙動になるのかを決めている設定です。
フレーム内の要素を選択したときに、要素の上と左に青い点線が出ていますが、これが制約がどのように適用されているかをあらわしている表示です図8。
@div:figure
制約の適用状況をあらわしている表示 @divend
制約は、たとえばWebデザインのフッター部分の位置を調整するときに使える機能です。
Webサイトやスマホアプリの下部に設置されるユニットのこと。
デザイン内のコンテンツが増えた際にフレームの高さを調整することがありますが、このときにフッターの位置をずらすのではなく、フレームのサイズを変えてもフッターの位置を最下部にくっついたままにしたい、ということを実現できるのが制約です図9。
@div:figure
フッターの位置を最下部にくっついたままにする @divend
実際にフレームサイズを変更した際に、制約でフッター位置が追従されるように変更してみましょう。
フッターと見立てた長方形をフレームの下部に作成します。
続いて、フッター部分の長方形を選択し、デザインパネルの「制約」の項目で「上」とある箇所を「下」としてください図10。
@div:figure
「制約」の項目を「下」に @divend
この状態で、フレームを縦方向に広げてみましょう。フレームを下に広げても、フッターが下部にくっついたままの表現ができます。