WEBデザイン
Figma｜第3章 基本操作を覚えよう
INDEX
目次
前の章に戻る 次の章に進む

【3-1】オブジェクトを作成しよう

■ まずはツールバー（画面下部）から、図形ツールやテキストツールを選択

(6211)

  • ツールバーにFigmaの基本的な作業ツールが集約されています。
    まずは簡単に扱える「図形ツール」や「テキストツール」を使ってみよう。
    ※「移動ツール」は、デフォルトの状態です。
✅ 図形ツールやテキストツール等で作成したものを「オブジェクト」と呼びます。

■ キャンバスに図形を描いてみよう

  • ツールバーから図形ツールを選択して、図形を描いてみよう。

Figma 3−1

Figma 3−1
この動画はデモンストレーション動画になります。 音声は入っておりません。

【3-2】オブジェクトの大きさや向きを変えてみよう

■ オブジェクト選択時に表示されるポイントの解説

  • 図形を選択すると、角の部分（円の場合は四方向）に小さな正方形”ポインタ”と、それを結ぶ水色のラインが確認出来ます。
(6221)

☑️ ポインタ
　 ここをドラッグしながら動かすと自由自在に拡大縮小させる事が出来ます。
☑️ ライン
　 ここをドラッグしながら動かすと、ラインのある方向のみ拡大縮小させる事が出来ます。

Figma 3-2-1

Figma 3-2-1
この動画はデモンストレーション動画になります。 音声は入っておりません。

■ 縦横比率を保持して拡大縮小

  • ポインタをドラッグしながら動かすと自由自在に拡大縮小させる事が出来ますが、そのままでは縦横比を保つ事は出来ません。

    以下の２つの方法で縦横比を保ちながら拡大縮小させる事が出来ます。

📌 Shiftボタンを押しながら拡大縮小すると、縦横比を保つ事が出来ます。
(6231)

☑️ 拡大縮小ツール
　 移動ツールと同じ枠にあります。このツールを使っても縦横比を保つ事が出来ます。

※ショートカットは、キーボードの K

■ 数値でサイズを設定

  • 右パネルの「レイアウト」欄より、数値でサイズを設定する事も出来ます。
(6234)

📌 W = 横幅 / H = 縦幅
　 数値を入力して設定できます。
📌 右端のアイコン(鎖のような形)を選択すると、変形しても「縦横比率を保持」したサイズに設定できます。
　 ※クリックして、設定できます。
(6238)

↑縦横比率が保持されていない
(6237)

↑縦横比率が保持されている

■ オブジェクトの向きを変える（回転 / 反転）

Figma 3-2-2

Figma 3-2-2
この動画はデモンストレーション動画になります。 音声は入っておりません。
  • 作成した図形の向きを変えてみよう。以下のいずれかの方法で回転できます。
(6245)

📌 ポインタにマウスを合わせると、カーソルが両矢印に変わります。この状態でマウスドラッグして動かすと、回転出来ます。
📌 Shiftボタンを押しながら回転すると、15度ごとに回転させる事が出来ます。
📌 右側パネルの「回転」欄より、数値を入力して角度を調整する事も出来ます。
  • 回転欄の右隣の3つのアイコンで、手早く向きを変えられます。
(6252)

■ 透明度の調整

  • 右側のパネルの「外見」欄にある不透明度の項目で、透明度を設定できます。
(6255)

📌 透明にしていない場合は、100%。全く見えない状態の場合は、0%です。

■ 角丸の調整

  • 右側のパネルの「外見」欄の右側フォームより、角丸を設定出来ます。(角の半径)
  • 図形内の4隅にある、〇 (青の枠線) を操作しても、角丸の調整が出来ます。
(6251)

【3-3】オブジェクトの色を変えてみよう

■ カラーパレットの解説

作成した図形やテキストの色を変えてみよう。右パネルの「塗り」を選択すると、カラーパレットが開きます。このカラーパレットで自由に色を選ぶ事が出来ます。

Figma 3-3-1

Figma 3-3-1
この動画はデモンストレーション動画になります。 音声は入っておりません。

■ スポイトツールの解説

他の色を抽出するツールです。
スポイトツールを使って色を選ぶ事で、「統一した色選び」をする事が容易になります。

(6272)

Figma 3-3-2

Figma 3-3-2
この動画はデモンストレーション動画になります。 音声は入っておりません。

■ グラデーションの解説

Figmaでは容易にグラデーションを付ける事が出来ます。図形だけでなくテキストでもOK。
1 . 塗りパネルにある、グラデーション・アイコン（４つのアイコンの内、左から２番目）を選択します。
2 . グラデーションの始点色と終点色を選ぶ事で、グラデーションの設定が出来ます。※透明度の設定も可能です。

(6277)

【3-4】テキストを編集してみよう

Figma 3-4-1

Figma 3-4-1
この動画はデモンストレーション動画になります。 音声は入っておりません。
(6280)

■ フォントサイズの変更

Figma 3-4-2

Figma 3-4-2
この動画はデモンストレーション動画になります。 音声は入っておりません。
  • テキストを選択すると、右パネルにテキストパネルが表示されます。
    • フォントサイズの値を変更する事で、フォントのサイズを変更出来ます。
    • プルダウンに用意されているサイズの他、直接数字を入力したり、キーボードの上下ボタンでも変更出来ます。
(6285)

✅ ウェブにおいて 標準となるフォントサイズは ”16”  になります。
　 ※この数字の単位は”ピクセル”になります。
ショートカットを使うと簡単に変更できます。※覚えれば便利です。
⭕️ フォントサイズを小さく
  • 【windows】Ctrl + Shift + <
  • 【mac】Cmd + Shift + <
⭕️ フォントサイズを大きく
  • 【windows】Ctrl + Shift + >
  • 【mac】Cmd + Shift + >

■ フォント（書体）の変更

タイポグラフィーパネルのフォント選択欄より、PCにインストールされているフォントを自由に選択する事が出来ます。

(6291)

※ウェブブラウザ版の場合は、Figmaのウェブサイトからフォントインストーラを選択する必要があります。

✅ 使えるフォントを無料で増やしてみたい場合は、Googleフォントから探せます。日本語もたくさんあります。
　 Googleフォント以外にも、ネット上にフォントは探せば色々あります。
　 実務で使う場合は「商用利用可能か？」等の権利を確認してから使うようにしましょう。

■ 文字間隔（トラッキング）や、行間の調整

Figmaでテキストをそのまま入力した場合、行間や文字間隔に違和感がある場合も良くあります。その時は、テキストを調整してみましょう。

Figma 3-4-3

Figma 3-4-3
この動画はデモンストレーション動画になります。 音声は入っておりません。
【文字間隔の調整】
テキストパネルより、調整できます。
(6301)

ショートカットもあります。覚えれば便利です。
⭕️ 文字間隔を狭める
  • 【windows】Alt + <
  • 【mac】Option + <
⭕️ 文字間隔を広げる
  • 【windows】Alt + >
  • 【mac】Option + >
【行間隔の調整】
テキストパネルより、調整できます。
(6303)

ショートカットもあります。覚えれば便利です。
⭕️ 行間隔を狭める
  • 【windows】Alt + Shift + <
  • 【mac】Option + Shift + <
⭕️ 行間隔を広げる
  • 【windows】Alt + Shift + >
  • 【mac】Option + Shift + >

■ 文字幅・高さの自動調整や固定幅

テキストの改行地点を調整出来ます。
※右パネルの「レイアウト」欄にあります。
(6307)

幅の自動調整
改行ポイントの設定なく、自由にテキストを記載できます。
※改行する場合は、Returnキー。

(6308)

高さの自動調整
改行ポイントを設定します。テキストの記載する幅を決められます。決めた幅に到達すると自動改行されます。
高さはテキストの記載内容によって、自動で調整されます。

(6309)

固定サイズ
こちらも改行ポイントを設定します。ある範囲だけにテキストを記載したい場合に使用します。
四角形のボックス内にテキストを記載するイメージです。
※テキストがはみ出る事もあります。

(6310)

■ 配置や装飾

基本的にテキストは「左揃え」の配置ですが、自在に変更する事が出来ます。
テキストパネル以下画像アイコンより、変更出来ます。
(6312)

テキストに下線や打消し線を引いたり、箇条書き（リスト）など、様々な装飾が出来ます。
テキストパネル右下のアイコン、「タイプの設定」より変更出来ます。
(6313)

【3-5】オブジェクトを複製してみよう

■ 複製する3つの方法

制作時、図形やテキスト等のオブジェクトを複製させる機会は数多くあります。覚えておくと便利です。
(6322)

以下３通りのショートカットがあります。

⭕️ windowsの場合
  • 複製したいオブジェクトを選択、 Ctrl + C でコピー > Ctrl + V でペースト。
  • 複製したいオブジェクトを選択、 Ctrl + D 。
  • Altキー を押しながら、複製したいオブジェクトを動かす。
⭕️ macの場合
  • 複製したいオブジェクトを選択、Cmd + C でコピー > Cmd + V でペースト。
  • 複製したいオブジェクトを選択、Cmd + D。
  • Optionキー を押しながら、複製したいオブジェクトを動かす。

【3-6】レイヤーを覚えよう

■ レイヤーとは？

オブジェクトを配置すると、画面左側に配置したオブジェクトが表示されます。
レイヤーとは、「配置したオブジェクトの確認や管理ができる一覧」となります。
(6330)

✅ レイヤーはAdobeのPhotoshopやIllustratorや、その他多くの描画ソフト等にも共通して存在する、デザインツールにおいて基本的なものとなります。

■ レイヤーの特徴

複数のレイヤーが存在する場合、基本的には上のものが優先的に表示されます。
※例えばオブジェクト同士が重なった場合、レイヤーが上のものが優先的に表示されます。
(6334)

レイヤーの順序を変えると、表示の優先順が変わります。
(6337)

オブジェクトを選択する場合にも使えます。レイヤーを選択するだけでも、オブジェクトを選択した事と同様の操作となります。

※複数選択の場合は、Shift キーを押しながら選択。

(6341)

レイヤーに名前を付ける事も出来ます。（デフォルトでは ”Rectangle1”、”Ellipse3”…等の名前が自動で付き、テキストは入力したテキストがそのままレイヤー名になります。）
(6343)

デザインを作り込むとそれだけ多くのレイヤーが増殖する事になり、どのレイヤーか？が判別しづらくなる場合もありますが、名前を付ける事でわかりやすくする事も出来ます。

■ 表示・非表示とロック

各レイヤーの右側に２つのアイコンが確認出来ます。
(6347)

鍵アイコン：ロック or ロック解除

オブジェクトを幾らか配置し作業していると、オブジェクト選択時に予期せぬオブジェクトを選択してしまう事も多々あります。
この場合の為に、選択したくないオブジェクトをロックする事で、作業しやすくする事ができます。
(6350)

この状態で、テキストレイヤーは、操作がロックされています。
※ ロック解除したい場合は、再度この鍵アイコンを選択すればOK。
目アイコン：表示 or 非表示

オブジェクトを非表示させたい場合に使います。

ロックと同じく、選択するとアイコンの形も変わります。

(6354)

この状態で、テキストレイヤーは、非表示となっています。
※非表示したレイヤーを再度表示させる場合は、同じく再度この目アイコンを選択すればOK。

【3-7】フレームツールを覚えよう

■ フレームとは？

FigmaでUIデザインをする際、フレームは重要な役割を担います。
デザイン制作する際のベースとなるものです。
※初期の段階では「絵を描く時の画用紙」のような認識で良いです。
(6358)

基本的にはこのフレーム内に、図形や画像、テキストなどを配置してデザイン作業を進めていきます。
※フレームレイヤーは「 # マーク」のアイコンが付きます。

■ フレームを配置してみよう

ツールパネルの「フレーム」を選択。基本的には図形ツールと同じような操作で配置できます。サイズも図形ツールと同じく自由に変更できます。

Figma 3-7

Figma 3-7
この動画はデモンストレーション動画になります。 音声は入っておりません。
フレーム内にオブジェクトを配置すると、フレームレイヤーの中にオブジェクトが自動で格納されます。

■ フレームの特徴

(6366)

フレームレイヤーの中に入っている限り、フレームの範囲外には表示されません。
※フレームを選択した状態で、右側パネル、レイアウト欄の「コンテンツを隠す」をチェックを外せば、フレームの範囲外でも表示されます。
(6369)

「塗り」を選択する事で、これも図形ツールと同じく色を加える事ができます。
(6371)

この他にもフレームの利点は様々あります。

  • デザインしたものをプレビューする時、フレーム単位でプレビュー表示される。
  • プロトタイプ（第6章で説明）では、フレームが基準となる。
...など。  
詳しくは実際の作業を説明する際に説明していきます。

■ デバイスフレーム

Figmaのフレームは、タブレットやスマホなど、あらかじめ良く使用するようなサイズが準備されています。

フレームを選択時、右パネルに「フレーム」パネルが表示されます。ここからある程度決められたサイズのフレームを配置する事ができます。デバイスフレームを使用する事で、必要なサイズのフレームを直ぐに配置する事ができます。

WEBやアプリをデザイン作業する場合や、プレゼンする場合の資料作りに便利です。
(6377)

【3-8】レイヤーをグループ化してみよう

■ グループ化とは？

前述 ”レイヤーに名前を付ける” でも説明しましたが多くのオブジェクトを作成した場合、レイヤーが膨大に増えていく事になり、どのレイヤーがどこにあるか？が解らなくなる事も良くあります。

必須では無いですが、グループ化をする事でレイヤーを整理整頓し見やすくする事ができます。
(6380)

※グループに名前を付ける事も出来ます。
※ロックや非表示等も、一括できます。
※グループにしたレイヤーは開閉する事が出来ます。
☑️ グループ化の作成方法は以下

　　1 . グループにしたいオブジェクトを選択し、右クリックから「選択範囲のグループ化」を選択。
　　2 . グループにしたいオブジェクトを選択し、以下のショートカット。
　 　 【windows】Ctrl + G
　 　 【mac】Cmd + G

■ フレームとの違い

フレーム
機能付きの枠組みプレビューやコンテンツの表示範囲指定など、機能を持つレイアウトの土台。
グループ
複数のレイヤーをまとめるためのフォルダのようなもの。

【3-9】画像をFigmaにおいてみよう

■ 画像を配置する方法

Figma 3-9-1

Figma 3-9-1
この動画はデモンストレーション動画になります。 音声は入っておりません。
自分のパソコン内の画像をFigmaに配置する場合は、以下の方法があります。
(6390)

➡️ 図形ツールの一番下「画像/動画を配置」を選択すると、自分のパソコン内のファイルが表示されるので、その中にある画像を選択。→ディレクトリ移動もOK。
📌 以下ショートカットでも、上記と同じ「画像/動画を配置」ができます。
  • 【windowsの場合】Ctrl + Shift + K
  • 【macの場合】Cmd + Shift + K
画像を選択したら、配置したい場所でクリックすればOK。

■ 予め図形で表示範囲を決めて配置

画像を置く場所、サイズを初めに決めている場合は、こちらの方法が便利です。

Figma 3-9-2

Figma 3-9-2
この動画はデモンストレーション動画になります。 音声は入っておりません。

1 . 図形ツールを選択し、画像を置きたい範囲を決めます。
2 . 範囲を決めたら、前述と同じ方法で画像を配置。

■ （拡大 / サイズに合わせる / トリミング / タイル ）の効果や色調補正について

画像を配置すると、右パネル「塗り」にも画像の表示が確認出来ます。
この”画像”を選択すると、画像の調整をする事ができます。
(6402)

デフォルトでは「塗り」となっていますが、この箇所を選択すると、以下のような選択肢が確認できます。
塗り
普通に画像を配置した状態です。
自動調整
前述の「図形で表示範囲を決めて配置」で決めた表示範囲に合わせて、画像のサイズを調整します。
トリミング
画像の一部を表示が出来ます。
※切り取る訳では無いので、自由に調整可能です。
● 以下にトリミング方法を解説記載します。
タイル
画像を分身させてタイル状に表示させます。
  • トリミング方法
    1 . 画像を選択し、右パネルの「塗り」→「画像」を選択。
    2 . 画像パネルより「トリミング」を選択。
    3 . 画像の８方向のカーソルでトリミング範囲を設定します。
    4 . トリミング範囲をしたら「Enterキー」で完成。

Figma 3-9-3

Figma 3-9-3
この動画はデモンストレーション動画になります。 音声は入っておりません。

【3-10】キャンバスを自由に動かしてみよう

■ ズームイン / ズームアウト

Figmaの編集画面の倍率を変更出来ます。

Figma 3-10

Figma 3-10
この動画はデモンストレーション動画になります。 音声は入っておりません。
※画面右上に”％”で表記された数字が確認出来ますが、ここから選択する事で変更出来ます。
※キーボードの”+”,”-”ボタン、もしくはマウスホイールを上下でも可能です。

出力時は100%の倍率になります。
作業時は効率の為、倍率を100%より低く設定する事が多いと思われますが、100%のサイズを意識して制作すると良いです。

■ 手のひらツール

Figmaの編集画面を自由に動かせます。
以下のいずれかの方法でできます。
1 . ツールパネル「手のひらツール」を選択後、マウスの左側ボタンをドラッグしながら動かす。
2 . Spaceキーを押しながら、同じくマウスの左側ボタンをドラッグしながら動かす。

【3-11】パスの操作を覚えよう

覚えていれば役立つときが来るでしょう。
上手く使いこなせればオリジナルのアイコンやロゴなどを作成することも可能です。

Figma 3-11

Figma 3-11
この動画はデモンストレーション動画になります。音声は入っておりません。

■ アンカーポイントの配置

パスで描く事により、図形ツールには無い形を自由に描く事が出来ます。
1 . 手始めに、アンカーポイントを配置してみよう。
(6421)

2 . アンカーポイントで囲みを作ってみよう。
(6423)

3 . ペイントバケツツール（菱形のアイコン）で、囲んだポイント内に色を流し込めます。
(6425)

4 .  最後に「ｘ」ボタン（閉じる）をクリックすればＯＫです。
(6430)

5 . パスの”線”は、右パネルの「線（Stroke）」の項目を非表示にするか、太さを0にすれば消えます。
(6429)

■ 曲線ツールのコントロール

曲線ツールを上手くコントロールすることで、形を整えていきます。
1 . 図形を “ダブルクリック” すると、ツールバーが以下のようになります。
　  この状態で、パスを自在にコントロールできるようになります。
(6434)

2 . 曲線ツールアイコンを選択し、先程設定したアンカーポイントを選択してみよう。
(6436)

3 . ハンドルをコントロールしてみよう。
(6438)

(6439)

4 . 上手く使いこなせれば、ちょっとしたイラストも描く事が出来ます。
　  ※本体と口はパスで、目は楕円(図形)で作成してます。
(6441)

  • 曲線ツールのコントロールには、初めての方には多少難しい所もありますが、上手く調整する事が出来るようになると色々な形を作る事が出来ます。

【3-12】作成したものを画像データで書き出してみよう

Figmaで生成できるデータ形式について
Figmaでは、４つの画像データを生成する事ができます。
png ピング
一番良く使われる画像形式です。（ラスター画像）
jpg ジェイペグ
写真画像のような複雑な画像に有効です。
シンプルな画像の場合はノイズが目立つ場合もあります。（ラスター画像）
pdf ピーディーエフ
資料などに良く使われる画像形式です。
※基本ベクターですが、ラスターが含まれる場合もあります。
svg エスブイジー
ロゴやアイコン等に良く使われる画像形式です。（ベクター画像）
「ラスター画像」と「ベクター画像」の違いを簡潔に説明します。
✅ ラスター画像
　 表示できる色数が多く、写真など色々な表現の画像に対応する事が出来ます。
　 ※デメリットとして、サイズ変更すると（特に拡大）、崩れたり粗くなるなど画質は落ちます。
✅ ベクター画像
　 拡大縮小しても崩れません。
　 簡単なイラストやアイコン等、シンプルな画像に適しています。
　 ※デメリットとして、ある程度複雑な画像にするとデータ容量は多くなり、ウェブに使用する画像としては不利なものとなります。

■ エクスポートして書き出してみよう

右パネルの一番下「エクスポート」より、上記の画像を生成できます。
実際に以下のリンクの「第7章 デザインをしてみよう」から「Home-PC」のメインビジュアルをダウンロードしてみましょう！
こちらにあるホームページは７章で実際に制作してもらうものです。
余裕があればメインビジュアル以外の部分も一度目を通しておくと良いでしょう！

Figma サンプルデータ

Figma サンプルデータ
(6451)

1 . 生成する画像の倍率や画像形式を選択。
　 ※デフォルトの場合は、倍率 : 1x = 1倍 / 画像形式 : PNG
2 . 「プレビュー」で生成する画像の表示状態をチェック出来ます。
3 . 「（レイヤー名）をエクスポート」をクリックすれば、自分のPCに画像を生成できます。

Figma 3-12

Figma 3-12
この動画はデモンストレーション動画になります。 音声は入っておりません。
前の章に戻る 次の章に進む
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH