【Figmaの基本操作】初心者／デザインツール

Figmaとは

※AIを参考にしています

Web上で使えるデザインツール。デザイナーだけでなく、エンジニアや企画担当者もリアルタイムで確認・編集できるのが特徴。一言でいうと、チームで使えるクラウド型のデザイン＆共有ツール。

主にできること

• UI/UXデザイン
  （アプリやWebサイトの画面統計）
• ワイヤーフレームやプロトタイプ作成
  （動きや流れを確認できる）
• 共同編集（複数人で同時に作業できる）
• クラウド保存
  （インストール不要、ブラウザ上で利用可能）

※写真加工やグラフィック作成も可能だが、写真加工はPhotoshop、ベクターグラフィックはIllustratorが得意

価格

少人数で試す場合や個人の場合はスタータープラン(無料)でも充分使えます

保存について

常に最新のバージョンが自動で保存されるので保存操作は不要

フォントについて

Figmaで使用できるフォント

・ローカルフォント（お使いのPCに入っているフォント）
・Google Fonts

Figmaは英語のフォントが多いがNoto Sans JP」や「YuGothic」など日本語のフォントもある

ドラフト（下書き）

ファイル数、ページ数は無制限に追加可能だが、編集できるのは自分のみ。

新しいファイル作成

Figmaを開く→左メニューからドラフトの新しいファイル(＋)click→下記の項目から選択

1. デザイン
2. FigJam
3. スライド
4. Buzz（ベータ版）
5. サイト（ベータ版）
6. Make
7. インポート

基本操作

画面サイズ調整

・Mac…⌘を押した状態で、マウスホイールを動かす
・Win…Ctrlを押した状態で、マウスホイールを動かす

余白の数値を確認

Altキーを押しながらカーソルを余白合わせる

フレーム・グループ・セクション

フレームとは

• UIデザインでよく使う
• レイアウト管理可能な機能的な入れ物のようなもの

※制約を使用することでオブジェクトを固定できる（左・右・中央・拡大縮小）

フレーム化したい要素を選択して右クリック→選択範囲のフレーム化クリック→見出しに任意の名前を入力

グループとは

単純に複数の要素をまとめる機能。複数の要素（ボタンやアイコンなど）を一緒に動かす時などに使う

グループ化したい要素を選択して右クリック→選択範囲のグループ化→見出しに任意の名前を入力

セクションとは

• フレームや要素の整理・管理
• 例えればラベル付きの箱
• キャンバス上で小分けをするために使うイメージ

セクション化したい要素を選択して右クリック→新しいセクションで囲むをクリック→見出しに任意の名前を入力

オートレイアウト

• Figmaの特徴的な機能で自動でレイアウトされる機能
• フレームに設定できる機能
• ショートカットキーはShift＋A

垂直に並べる

長方形(縦長)のフレームをつくる→フレームの中に正方形を３つ配置→フレームを選択した状態で右サイドバーのオートレイアウトを使用click（レイアウトの右上）→右サイドバーのオートレイアウトから細かい調整

垂直から水平に変更

右サイドバーのオートレイアウトから設定…サイズ変更のWをコンテンツを内包にする→サイズ変更の上にあるフローから水平(→)選択

フレームの内側の余白変更

右サイドバーのオートレイアウトのパディングの水平パディング/垂直パディングの数値を設定
※直接ドラッグでも可
※個別で変更したい場合はパディング(個別)から調整

間隔を変更

右サイドバーのオートレイアウトの間隔から数値を設定
※直接ドラッグでも可

配置を等間隔に

右サイドバーのオートレイアウトの間隔から自動選択

※この状態でフレームを拡大縮小するとオブジェクトもそれに合わせて自動で調整される

配置変更

右サイドバーのオートレイアウトの配置から設定

フレームに合わせて拡大縮小

オブジェクト選択→右サイドバーのオートレイアウトのサイズからコンテナに合わせて拡大選択→フレームをドラッグして拡大縮小

文字を四角で囲む

文字入力→右クリック→オートレイアウトを追加→フレームの塗り変更→バディングの数値設定

テキストのみ貼り付け

Shift+Ctrl+V

貼り付け後に２行になってしまった場合

レイアウトパネルのコンテンツを内包

コンポーネント

• 繰り返し使うオブジェクトを登録して再利用
• デザインの修正を一括で反映

コンポーネント化する方法

コンポーネント化したいオブジェクトを選択→右パネル右上のコンポーネントを作成選択

画像の差し替え

コンポーネント化した画像を差し替える方法

変更する画像をコピー→コンポーネント化したイメージの画像を右クリック→貼り付けて置換

メインコンポーネントとは

メインコンポーネントとは

複製の元となるオブジェクト
メインコンポーネントに変更を加えるとコピーした全てのインスタンスに同じ変更が適用される
※複製されたものはインスタンス
※個別に変更を加えたインスタンスの部分には適用されない
※インスタンスは変更しても適用されない

インスタンスの作成方法

インスタンス作成方法①

メインコンポーネントを複製する
（ショートカットキー…Option/Altキー）

インスタンス作成方法②

左パネルのアセットからドラッグ

よく使う機能

画像を図形の形に切り抜く①

方法は2つ。まずはよく使う方法を紹介します。

図形をつくる→ツールバーから画像を選択して開く→図形の中をクリック

※上記のマスクと異なり図形の背景として画像が配置されている（塗りが画像になる）

画像を図形の形に切り抜く②

2つ目の方法です。

画像の下に図形を移動→画像と図形どちらも選択→右クリック→マスクとして使用クリック
※図形が上にきてる場合は右クリック→最背面に移動選択

ぼかし

右サイドバーのエフェクトからレイヤーブラー選択→細かい調整

スタイル作成

同じ素材を使いまわすための設定が豊富

テキスト登録

右サイドバーのスタイルから+(スタイル作成)click→テキスト選択

色 登録

よく使うカラーは登録しておくと便利

右サイドバーのスタイルから+(スタイル作成)click→色選択

登録した色を使う

〈塗りの場合〉
塗りのスタイルとバリアブルを適用から選択

エフェクト登録

右サイドバーのスタイルから+(スタイル作成)click→エフェクト選択

レイアウト登録

右サイドバーのスタイルから+(スタイル作成)click→レイアウト選択

プロトタイプ

画面遷移やボタンなどの挙動を実際のデザインで再現できる機能

縦書き方法

Figmaには縦書き専用のテキストツールがない

右パネルのレイアウトから幅を固定選択・Wを文字のサイズと同じにする→行間を調整

伸ばし棒も縦書きにする

上記の方法では伸ばし棒や句読点、かっこなどが横書きのままなので、下記の方法で縦書きにします。

テキストレイヤーを選択した状態でタイプの設定crick→詳細設定crick→字形のVertical alternates選択

位置を調整（別方法）

左or右揃え→上or下揃え→X数値-余白数値・Y数値-余白数値

おすすめ人気プラグイン

プラグインとは、Figmaの様々な機能を拡張してくれる追加ツール。デザイン作業を自動化・効率化。プラグインを探すときはFigmaコミュニティ(Figma専用コミュニティ)を利用すると便利

Japanese Font Picker

日本語のフォント

Unsplash

海外のフリー写真の素材サイト

Iconify

たくさんのアイコンを検索＆挿入

To Path

曲線など、様々なパスの形に添ってテキストを打つことができる
※文字がバラバラで配置される
※数値変更でテキストの微調整可能

操作方法

【曲線・中央揃えにしたい場合】

ペンツールで曲線を描く→テキスト入力→To Path開く→エラー(赤)の状態のまま曲線とテキストの両方選択→エラー解除(黒)でLinkクリック→曲線に合わせて文字が配置される→中央揃え→角度を変えたい場合は右側パネルの回転の数値変更（角にカーソルを合わせてマウスを動かして角度も変えれる）→線のレイヤーを削除

⇩

曲線文字のサイズ変更

テキスト選択→K→ドラッグで拡大

比率を保って拡大・縮小

テキストのレイヤー全て選択→ショートカットキーK→角にカーソルを合わせて調整

一文字だけ角度調整

一文字選択→回転click→上下キーで調整

Content Reel

名前や住所などのダミーデータ生成

Autoflow

ワイヤーフレーム同士を自動で線でつなぐ

画面構成

• メインメニュー…左上のFigmaマーク
• ツールバー…下のバー
• 左サイドバー
• 右サイドバー
• キャンバス

---