この章では、Figmaの以下の内容について学習します。
1.Figmaの基本概念と画面操作
- Figmaの画面の見方（ホーム画面、キャンバス、レイヤーパネル、設定パネル、ツールバー）
- Figmaの基本操作（拡大縮小、移動、ショートカットキー）
- フレームの作り方、フレームを伸ばす時の注意点
2.図形描画と画像の編集
- 図形ツールの基本操作
- 【必須スキル】マスク機能を使った画像の切り抜き
3.テキストの編集方法
- テキストの入力と設定（フォント、サイズ、太さ、行間・文字間隔の調整、文字加工）
- テキストの移動方法
4.共有方法・書き出し・バックアップ
- 共有方法（URL共有と権限設定）
- データの書き出しとファイル形式の選び方
- バックアップデータ「.figファイル」の保存の仕方
- バックアップから復元する方法
1.Figmaの画面操作
Figmaのホーム画面の見方
Figmaでワイヤーフレームやデザインカンプを制作する際は、アプリ版もしくはブラウザ版を開いた後ホーム画面の「Design」と書かれたボタンをクリックします。
Figmaのデザイン編集画面の見方
「Design」と書かれたボタンをクリックすると、以下のようなデザインを制作することができる画面が開きます。
キャンバス：デザインを制作する範囲。作業の中心となるスペースであり、フレームやオブジェクトの配置や編集ができる。
レイヤーパネル：レイヤーが表示されるパネル。オブジェクトの重なりの順番を調整することが可能。レイヤーの表示や非表示、ロックをすることも可能。
設定パネル：オブジェクトの配置、色、大きさ、フォントの種類などの設定変更ができる場所。選択しているレイヤーごとに表示内容が変わる。
ツールバー：デザインを制作する際に使用するツールを切り替えることができる場所。
ツールバーの中で主に使用するツール
移動ツール：選択している物を動かしたい時に使用するツール
手のひらツール：キャンバス上を移動したい時に使用するツール
フレーム：フレームを作りたい時に使用するツール
図形ツール：長方形、線、円などの図形を描きたい時に使用するツール
テキストツール：文字を入力したい場合に使用するツール
コメント：キャンバス上にコメントを残したい時に使用するツール。主に共同作業の場合に使用する。
アクション：プラグインと呼ばれる追加機能を使用したい場合に使用するツール。プラグインを使用したい場合は、「プラグインとウィジェット」を選択して使いたいプラグイン名を検索する。
Figmaの画面操作とショートカットキーについて
拡大縮小、移動、ショートカットキー
Figmaのショートカットキー一覧
基本操作
・移動ツールに切り替え：V
・手のひらツール（画面の移動）：Space (長押し)
・フレーム作成：F
・テキスト入力：T
・長方形ツール：R
・正円・楕円ツール：O
・線ツール：L
・スポイトツール（色の抽出）：I (アイ)
・画面の拡大・縮小：Cmd + スクロール
・操作を元に戻す：Cmd + Z
・一つ先の状態に戻す：Cmd ＋Shiftキー + Z
編集・操作・レイヤー管理
・選択しているレイヤーのコピー：Cmd + C
・レイヤーの貼り付け：Cmd + V
・選択しているレイヤーの複製（その場で複製）：Cmd + D
・選択しているレイヤーを複製しながら移動：Opt + ドラッグ
・比率を固定して拡大縮小・描画：Shift + ドラッグ
・グループ化する：Cmd + G
・グループ化の解除：Cmd + Shift + G
・前面に移動：Cmd + ]
・背面に移動：Cmd + [
・最前面に移動：Cmd + Opt + ]
・最背面に移動：Cmd + Opt + [
表示・確認・書き出し
・UIの表示/非表示（プレゼンモード）：Cmd + \ (バックスラッシュ)
・定規（ルーラー）の表示/非表示：Shift + R
・レイアウトグリッドの表示/非表示：Ctrl + G
・アウトライン表示（線画モード）：Cmd + Y または Shift + O
・画像の書き出し（Export）：Cmd + Shift + E
・色の選択（カラーピッカー）：Ctrl + C
応用
・オートレイアウトの追加：Shift + A
・オートレイアウトの解除：Opt + Shift + A
・コンポーネントの作成：Cmd + Opt + K
・マスクの作成：Ctrl + Cmd + M
・画像の配置：Cmd + Shift + K
ちなみに、ショートカットキーは全て使いこなせる必要はありません。
使えると時短になるおすすめのショートカットキーは以下のキーですので、まずは以下のキーを積極的に活用するようにしましょう！
・拡大と縮小：Cmd + スクロール
・選択しているレイヤーのコピー：Cmd + C
・コピーしたレイヤーのペースト：Cmd + V
・選択しているレイヤーの複製：Cmd + D
・グループ化：Cmd + G
・一つ前の状態に戻す：Cmd + Z
・一つ先の状態に戻す：Cmd ＋Shiftキー + Z
・1pxずつ移動：移動ツールに切り替え、クリックした後に↑、→、↓、← のいずれか
・10pxずつ移動：移動ツールに切り替え、クリックした後にShiftキー＋↑、→、↓、←のいずれか
・距離を測る：移動ツールを選択した状態で、Alt / Optionキーを押す
※Windowsの端末ではCmdの代わりにCtrlキーを押してください。
フレームの作り方、フレームを伸ばす時の注意点
フレームとは、図形を載せたりテキストを配置したりできる場所です。
バナー、商品画像、ワイヤーフレーム、デザインカンプなどを制作する際に、まず初めにフレームを制作します。
2.図形描画と画像の編集
※塗りのカラーピッカーを開き、「グラデーション」をクリックするとグラデーションの設定が可能です。
3.テキストの編集方法
4.共有方法・書き出し・バックアップ
URLで共有する方法と書き出しをする方法
【納品方法】URL共有と書き出しの使い分け
Figmaで作ったデザインを納品する際、URL共有と画像書き出しのどちらで納品すべきか迷うケースもあります。
どちらで納品するかについては、制作しているものがどのようなデザインなのかで判断するようにします。
Webサイトのデザインカンプ（HP・LP・ECサイト）の場合
Webサイトやアプリの全体設計図（デザインカンプ）を納品する場合は、基本的に「URL共有」を行い納品を行います。
なぜURLで納品するかというと、エンジニアやコーダーは、Figmaの画面上で「文字のサイズ」、「余白の数値」、「色のコード」といった値を確認しながらコーディングを行うためです。
画像ファイルだけ渡されても値を確認することができずコーディングをスムーズに行うことができないため、Webサイトのデザインカンプを制作して納品する場合はFigmaのURLを共有して納品するようにしましょう。
※ワイヤーフレームについてはURLで共有する場合と画像で共有する場合があります。どちらで共有すれば良いのかについては案件ごとに確認するようにしましょう！
納品手順
1.画面右上の青い 「共有」 ボタンをクリック
2.アクセス権を持つユーザーを「ユーザー全員」、「閲覧」に変更し、「リンクをコピー」をクリック
3.クライアントとやりとりをしているツールでコピーしたURLを送付
バナー・SNS画像・商品画像の場合
広告バナー、YouTubeサムネイル、商品画像などを納品する場合は、URLを共有する方法ではなく「エクスポート（書き出し）」を行い、書き出した画像ファイルを納品します。
なぜエクスポートを行って納品するかというと、クライアントはその画像をそのまま入稿したり、SNSにアップロードしたりするためです。
FigmaのURLを共有されても、そこから画像をエクスポートする手間が発生してしまいます。
納品手順
1.書き出したいフレームを選択する
2.右側パネルの一番下にある「エクスポート」の項目のファイル形式を選択し、形式の下の「〜をエクスポート」と書かれたボタンをクリック
3.ファイル名を設定し、保存を行う
4.保存したファイルをクライアントとやりとりをしているツールで納品する
※書き出しをする際、ファイル形式の選択で迷った場合は以下の基準で選んでください。
PNG：デザインに透明な部分が含まれる場合
JPG：デザインに透明な部分が含まれない場合、ファイルの容量を抑えたい場合
SVG：アイコンの場合