Figma初心者が最初に迷う「あの機能はどこから使う？」解決の早見表

Figmaを使い始めたばかりの頃は、まず設定箇所・設定方法がわからないという状態に結構陥ります。
「〇〇をしたいのに、設定がどこにあるのかわからない…」「似た機能が多くて…」など、よくいただく疑問を解消するためのTIPSをまとめました。

• あの機能ってFigmaのどこにある？何を使えばいい？
• テキスト・画像のモヤっと
• 角丸を個別に変えたい
• 塗りをグラデーションやパターンに変えたい
• パスの調整・結合（ブーリアン演算）
• Figma特有のフレーム、オートレイアウト、コンポーネント
• その他
• まとめ

あの機能ってFigmaのどこにある？何を使えばいい？

Figmaを使い始めたばかりの頃は「ボタンがどこにあるの？」「これはどこで設定できるの？」など、今まで使っていたグラフィックツールとのUIの違いがプチストレス。どこから設定できるんだ？って探さなきゃいけないのはイライラするするポイントですよね。

今回はご質問いただくことが多い、以下の項目についての簡単なアンサーを紹介していきます。

1. テキストの行間・文字間隔の調整
2. テキストを縦書きにしたい
3. 画像を切り抜きたい（マスク操作）
4. 角丸を個別に変えたい
5. グラデーションを作りたい
6. 背景パターンを使いたい
7. パスの調整・結合をしたい
8. グループ化とフレーム化の違い
9. オートレイアウトはどこから使うの？
10. コンポーネント作成／解除の場所
11. エクスポートした画像が重すぎ! WebPで書き出したい
12. 共有されたファイルをコピーしたい

ワンポイント

探している機能の名前がわかるときは、クイックアクションから機能名で検索をかけると便利です。
ショートカットキーも表示されますよ。

クイックアクションは以下のショートカットキーで立ち上げられます。
Windows: Ctrl + /
Mac: ⌘ + /

テキスト・画像のモヤっと

テキストの行間・文字間隔の調整をしたい

テキスト選択時に右側のプロパティパネル > タイポグラフィにある「Line height（行間）」と「Letter spacing（文字間隔）」で調整できます。

一か所だけ設定する場合は、pxでも%でも、設定しやすい単位で入力すればOK。

文字サイズが変わっても同じ間隔を維持したい場合は、％指定を使うと便利です。
コーディング時も％指定で入力されていると楽。

テキストを縦書きにしたい

日本語サイトのデザインの場合「縦書きにしたい」ことも結構ありますよね。
しかし、残念ながらFigmaには標準で縦書き機能がありません。

そのため、縦書きが必要な場合は以下のいずれかで対応します。

1. 一文字ずつ改行して縦に配置する
2. テキストボックス幅を狭めて文字を縦に並べる
3. プラグイン「Vertical Text」を使用する

縦書きテキストを表現する方法は、こちらの説明がわかりやすいです。

画像を切り抜きたい（マスク操作）

切り抜きたい形と画像を用意。
マスクに使用するオブジェクトを下に配置し、その上に画像（切り抜き対象のオブジェクト）を置きます。 両方を選択した状態で、以下いずれかの操作をしてください。

• 右クリックから「マスクとして使用」を選択
• 右パネルの上部にある三日月のようなアイコン（マスクとして使用）をクリック
• ショートカットキーを使用：WindowsはCtrl + Alt + M、Macは⌘ + Option + M

実は私、最初のころよく上下を逆にしていました。
表示させたい形状→下（土台を作る）
切り抜きたい画像→上（土台にはめる）
というイメージだと間違えにくいので「どっち？あぁ、反対だった…」となる方はぜひ。

Mask group全体を選択すると、普通の拡大縮小や移動。
マスクとして使っている形状（下にあるオブジェクト）のみを選択するとマスク範囲の調整ができます。

マスクされているオブジェクト（画像）だけを選択すると表示範囲を変えられます。

角丸を個別に変えたい

右側パネルの外見 > 角の半径の右隣にあるアイコン「個別の角」を使います。

各角に個別の値を入力できます。
一部分だけを丸めたいとき…タブのデザインや、カードデザインの調整などに使用します。

塗りをグラデーションやパターンに変えたい

1. グラデーションを作りたい

グラデーションで塗りたいオブジェクトを選択し、右パネルの塗り（Fill）のカラー欄をクリックします。
上部に塗りの種類のアイコンが並んでいるので、グラデーションを選択してください。

上部のプルダウンでグラデーションのパターンを変更できます。
下部のカラーストップからは、グラデーション色を増やしたり、色の切り替え位置の変更が可能。

グラデーション方向や色の配分はキャンバス側からも変更できます。

2. 背景パターンを使いたい

Figmaでパターンを敷き詰める際には、使用するパターンに応じて2種類の方法があります。

• ラスター画像の素材を使う場合
• ベクター、SVG素材を使う場合

1. ラスター画像の素材を使う場合

パターン背景に使いたい素材がJPGやPNGの場合は、塗りを画像にして配置します。

パターンを配置したいオブジェクトを選択して、塗りのモードを「画像」にします。

自作もしくは素材の画像をアップロードします。
（※以下では Bg-patterns様の素材を使用しています)

デフォルトの「塗り」ではオブジェクトのサイズに合わせて1枚配置されます。
上部のプルダウンで「タイル」に切り替えると、繰り返し配置に変ります。CSSでいうところのbackground-repeat: repeat;状態です。

2. ベクター、SVG素材を使う場合

パターン背景に使いたい素材が、Figmaで作ったパスなどであったり、SVG背景素材であれば、塗り > パターンで設定できます。

まず、元となるオブジェクトを作ります。正方形を4つ並べて市松にしました。
4つすべて選択した状態で右クリックメニューか、ショートカットキー（Ctrl もしくは ⌘ + G）でグループ化します。

パターンを敷き詰めたいオブジェクトを作り、選択します。

そして右パネルの塗りから、カラー欄をクリック。
設定パネルの上部で塗りの種類を「パターン」にして、ソースを選択でグループしたオブジェクトをクリックすれば完了。拡大縮小欄でサイズも調整できます。
ソース元になっているグループを更新すると、パターンを使っているオブジェクトにも反映されます。

SVG形式の背景素材を使う場合は、キャンバス上に素材をドラッグアンドドロップ。
そして、同じくソースを選択でクリックするだけで敷き詰められます。

パスの調整・結合（ブーリアン演算）

Figmaではペンツールなどを使ってベクターパスの作成、編集もできます。
アイコンやロゴ制作時によく使われます。

パスの調整をしたい

既存のオブジェクトを編集する場合は、その要素をダブルクリックしてください。
下アニメーションのように塗り部分に斜線が入った状態になると、アンカーポイントごとの操作ができます。

パスを結合したい

複数の図形を選択すると、右パネルの上部に「ブール演算」というプルダウンが表示されます。
結合、減算、交差、除外、結合、結合と五つのメニューが表示されるので、そちらを使ってください。

上部の結合（Alt + Shift + G / Option + Shift + G ）はブール演算後も、左のレイヤー内で個別要素として残るため、後から再編集が可能です。Adobe Illustratorでいう「複合シェイプ」化に該当します。
最下部にある結合（Alt + Shift + F / Option + Shift + F ）を使うと一つのパスに変換されます。Adobe Illustratorでいう「合体」です。

Figma特有のフレーム、オートレイアウト、コンポーネント

グループ化とフレーム化の違いがわからない

Fimgaで複数の要素をまとめようとしたときに、グループ化とフレーム化の選択肢が出てきます。
ショートカットキーも似ているし、迷いますよね。

グループ化

Windows: Ctrl + G
Mac: ⌘ + G

Figmaでのグループ化は、名前の通りレイヤーをグルーピングする機能です。
「デザイン制作中にバラバラになったら不便だから、便宜上まとめておこう」というイメージ。

グループ化したもの全体で塗り色を変えたり、影をつけたりすることもできます。
AdobeのIllustratorやPhotoshop、sketchなど、一般的なグラフィックツールでいうグループ化と同じイメージでOKです。

フレーム化

Windows: Ctrl +Alt + G
Mac: ⌘ + Option + G

フレーム化もグループと同じくレイヤーをまとめる機能。
ただし、グループの枠が「便宜上」なのに対して、フレーム化の枠は「子要素の整列基準になる」ことが大きな違いです。コーディング的な目線でいうと、コンテナ的役割を持つ親要素（sectionやdivなど）で囲うという指示です。

先ほどグループで「塗り」の色を変えた場合は、グループ内のオブジェクトの色が変わりましたよね。フレーム化した場合は、フレーム自体の色が変わります。

コードで表現すると以下のようなイメージです。

<div class="frame1" style="background-color: CD3F3F;"><!-- frame化で追加される親要素 -->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

また、フレームはオートレイアウトを適用する枠としても使えます。
Figmaでのオートレイアウトは、フレームが持つ機能の一つです。

オートレイアウトはどこから使うの？

Figmaではオートレイアウトを適用することで、内部の要素配置の制御、余白や整列の設定が可能になります。Figmaのウリの機能でもあり、Webデザインにありがたい機能です。

オートレイアウトは、適用したい要素を選択した状態で右クリック、もしくは右パネル > レイアウト欄のアイコンから適用できます。
よく使う機能ですので、ショートカットキーの Shift + A を覚えておくと便利です。

　↓

オートレイアウトが適用されると、右パネルに「オートレイアウト」のグループが追加されます。 こちらで子要素の並べ方や、揃え位置、要素間の余白（gap）などを設定することで、実際のWebページに近い可変レイアウトを作ることができます。

SKILL HUBブログ

【Figma入門④】Figma“オートレイアウト機能”の使い方・活用方法をやさしく解説

コンポーネント作成／解除の場所

オートレイアウトと並ぶFigmaの便利機能、コンポーネント。
よく使うボタンやカードなどのパーツを一括で調整出来て便利…と聞いたものの「使い方がわからない」や「素材を使ったら、変更したいところが変えられなかった」なんてこともあると思います。

コンポーネントの作成

作成したパーツをコンポーネント化するには、右クリックメニューもしくは右パネルの上部から「コンポーネントを作成」を選びます。
ショートカットキーならWindows Ctrl + Alt + K 、Mac ⌘ + Option + K です。

インスタンスの切り離し

コンポーネントを使って各所にパーツを配置していると「ここのボダンだけ、文字を2段にしたいんだ」など、そのままでは変更できない箇所が出てきます。 そんな時は「インスタンスの切り離し」を使用することで、コンポーネントから分離できます。

コンポーネントから分離したいアイテムを選択して右クリックから選択、もしくは以下のショートカットキーを使用してください。

Windows Ctrl + Alt + B
Mac ⌘ + Option + B

コンポーネントやインスタンスの詳しい使い方は、以下の記事をご覧ください。

SKILL HUBブログ

【Figma入門③】コンポーネント機能の基本的な使い方、インスタンスやバリアントとは

その他

エクスポートした画像が重すぎ! WebPで書き出したい

Figma標準のエクスポート機能ではPNG・JPG・SVG・PDF形式が選べます。
しかし、画質やファイルサイズを確認しながら圧縮率などの細かい調整は出来ません。なので、エクスポートでWebページに使う画像を書き出したけど、ファイルサイズが大きいこともあります。

また、WebP書き出しは非対応で、FigmaからダイレクトにWebp書き出しをしたい場合はプラグインが必要になります。下記のサイトで紹介されている 「Olive Press」などのプラグインを使用すると、Web書き出し以外に圧縮率調節なども出来るようになるので便利です。

外部リンク

Figmaで画像を圧縮したりwebp形式で保存する方法

ファイルのコピー（学習用、コーディング用に複製する）

Figmaファイルを複製したいこともありますよね。
複製可能なファイルであれば、左上のファイル名横のメニューから「複製」ができます。

他人から共有されたファイルの場合「ドラフトに複製を作成」と表示されることもあります。（※与えられた権限による）
こちらを使うと、自分のDraftsフォルダ内にコピーが保存されます。
コーディングのために触りたいから念のため…とか、他者のデザインを参考に練習したいときに便利です。

まとめ

Figmaは機能が多く、最初は混乱することも多いですが、ひとつずつ「どこにあるか」「どう使うか」を理解していけば、驚くほど自由にデザインできます。

やりたいことがあるのにできない！って憂鬱になりますが、これをやりたいと目的があって調べたり調べたりすると習得は早いです。「つまずき＝成長のサイン」でもありますので、焦らず一歩ずつ進んでいきましょう！