Figmaを知ろう！入門講座 基本操作と概要
Figmaは、Webデザインやアプリデザイン、プロトタイプ制作に特化したクラウドベースのデザインツールです。ここでは、Figmaの特徴、他のデザインツールとの違い、基本操作について詳しく解説します。これからFigmaを始める方に向けた内容です！
目次
Figmaとは何ができるツールなのか？
Figmaの特徴と得意なこと
Figmaは、クラウドベースのデザインツールですので、Webブラウザだけでも動作するため、インストールは基本不要です。そのためWindowsやMacだけでなく、LinuxやChromebookでも使用可能です。フォントなど自由に使いたい時は、デスクトップ版もあるので、ダウンロード＞インストールして使うことも可能です。
リアルタイムコラボレーション
複数人が同時に同じデザインにアクセスし、リアルタイムで閲覧・編集できます。Googleドキュメントのように、変更内容が即座に反映され、保存しわすれることがありません。
プロトタイプの作成
作成したデザインをクリック操作などでインタラクティブに動かし、下記のようなプロトタイプを簡単に作れます。
プロトタイプ機能とは？デザインの段階で、実際のアプリやWebサイトを操作するようにシミュレーション機能を指します。クライアントやチームにデザインの意図を伝えやすく、クリックなどができるので視覚的にも実際のサイトのような感じがします。またコーディング前にユーザビリティテストを実施し、問題点・課題を洗い出せます。
バージョン管理
自動的に履歴が保存されるため、変更内容をいつでも遡れます。
PhotoshopやIllustratorとの違い
Photoshopは、もともと、 主に画像編集や写真加工に特化しているアプリです。Webやアプリのデザインカンプには不向きな点があります。それでも仕上がりの美しさや、細かさからWeb制作会社の多くはPhotoshopを使ってデザインカンプを作成しています。
Illustratorは、ベクターデザイン（イラストや印刷物）が得意です。アートボードが使いやすいため、複数ページの作成にも向いているので、ワイヤーフレームや、複数のデザインカンプの作成には使われています。ただ、UI/UXデザインを考えているわけではないので、XDやFigmaのようなプロトタイプ作成機能はありません。
Figmaは UI/UXデザインの作成のためのツールなので、直感的で簡単に操作できるようになっています。ただし、Photoshopのようなあらゆる画像処理機能や、Illustratorのようなアピアランスを使ったオブジェクト作成機能はなく、簡単な画像処理、簡単なペンツールなどの簡易版を使うことになります。キービジュアルやバナー、細かい写真の加工はPhotoshop。ロゴやイラストなどはIllustrator作成したものを配置するといった流れになります。
Figma基本操作 新規作成から始めよう
新規ファイルの作成
Figmaの公式サイト（https://figma.com）でアカウントを作成し、ログインします。新規登録もしくは、Googleのアカウントなどでログインを行います。
左上の「デザインファイルを新規作成」とある下記のボタンをクリックすると、作成画面が開きます。
レイヤーの基本
Figmaのレイヤーパネルは、デザイン要素を管理しやすくするための中心的な機能です。どの要素がどの位置にあるのかを直感的に確認・操作できるため、効率的なデザイン作業に使います。
レイヤーパネル
Figmaのレイヤーパネルは、画面の左側に配置されています。この場所で、現在のデザイン内にあるすべてのオブジェクト（図形）やフレーム・グループ・コンポーネントがリスト形式で表示されます。
主な構成要素
- フレーム（Frame）＃のアイコン
レイヤーパネルで最も上位に位置する要素。- フレームは「アートボード」のような役割を持ち、各デザインを整理するための基本単位です。
- フレーム内に他のレイヤー（テキスト、図形、画像など）を含むことができます。
- グループ（Group）点線の四角
- 複数のレイヤーをまとめて扱う際に使用します。
- フレームと異なり、位置やサイズが他の要素に依存しません。
- コンポーネント（Component）紫色で表示
- 再利用可能な要素。レイヤーパネルでは紫色のアイコンで表示されます。
- レイヤー（Layer）
- 図形、テキスト、画像などの個別の要素。
- レイヤーの順序は、デザイン上の**Z軸（前面・背面）**を示します。
レイヤーの順序を変更
ドラッグ＆ドロップでレイヤーを上下に移動させることで、前後関係を調整できます。
グループ化と解除
- グループ化: 複数のレイヤーを選択して右クリック→「グループ化」または
Ctrl+G（Macの場合はCmd+G）。 - グループ解除: グループを選択して右クリック→「グループ解除」または
Shift+Ctrl+G（Macの場合はShift+Cmd+G）。
名前を付けて整理
レイヤー名をわかりやすくすることで、管理が容易になります。 レイヤー名をダブルクリックし、新しい名前を入力（またはレイヤー上で右クリックし、名前の変更）。
レイヤーの表示/非表示
レイヤー名の右側にある目のアイコンをクリックすることで、表示/非表示を切り替えられます。
ロック機能
レイヤー名の右側にある鍵のアイコンをクリックすると、そのレイヤーをロックできます。
ロックしたレイヤーは編集や移動ができなくなり、誤操作を防げます。
フレームとグループの使い分け
フレームの特徴と活用法
- 親子構造: フレームは他のレイヤーを内包します。
例: スマホの画面デザイン全体を1つのフレームとして管理し、その中にボタンやテキストを配置。 - レスポンシブデザインに便利: フレームを使用すると、自動レイアウト機能を活用して、要素を親フレームに応じてリサイズ可能にできます。
グループとフレームは、どっちを使えばいいの？
| 機能 | グループ | フレーム |
|---|---|---|
| 動きの制御 | 単純に要素をまとめるだけ | レイアウトや位置を親子関係で管理 |
| サイズ変更時の動き | まとめた要素が独立して動く | 内包された要素が自動でリサイズ |
| 用途 | 一時的な整理 | 長期的なデザイン管理に最適 |
レイヤーパネルの便利な小技
検索機能で効率アップ
- パネル上部の検索アイコンをクリックすると検索バーがでます。レイヤー名を入力して、特定のレイヤーを素早く見つけられます。
例: 「Button」と入力すると、「Button」という名前が付いたレイヤーだけが表示されます。
マルチセレクト
- 複数のレイヤーを選択して一括操作が可能。
Shiftキーを押しながらクリックで個別に選択。Ctrl+A（MacではCmd+A）で全選択。
プロパティパネル
Figmaのプロパティパネルは、選択したオブジェクト（図形や写真）やフレームの設定や属性を調整するための重要なツールです。このパネルは、Figmaの右側に表示され、クリックすることで選択されたオブジェクトの種類に応じて内容が変わります。
Figmaのプロパティパネルは、デザインとプロトタイプに分かれています。
デザインプロパティ
サイズと位置
- X軸, Y軸 オブジェクトの座標（左上を基準）。
- W, H: 幅と高さ。
- Constraints（制約）: レスポンシブデザイン用に、親要素に対する位置やサイズを設定。
レイヤーのスタイリング
- 塗りつぶし（Fill）
- 色、グラデーション、または画像を適用可能。
- 複数のフィルを追加して重ねられる。
- 線（Stroke）
- 枠線の色、太さ、スタイルを設定。
- 線の位置（内側、中央、外側）を調整可能。
- エフェクト（Effects）
- 影やぼかし、背景のぼかしを適用。
- 各エフェクトは細かく設定でき、複数適用可能。
角丸とボーダー
- 角丸（Corner Radius）
- 四隅の角丸を設定。
- 個別の角ごとに異なる値を指定可能。
- Independent Corners:
- 特定の角だけに異なる半径を適用。
レイヤーのブレンドと不透明度
- 不透明度（Opacity）: レイヤーの透明度を調整。
- ブレンドモード（Blend Mode）: レイヤーの重なり方を調整。
テキストプロパティ（テキストオブジェクトを選択した場合）
- フォント、サイズ、色、文字間隔、行間などの設定。
- Auto Width / Auto Height: テキストボックスの挙動（幅や高さの自動調整）を切り替え。
プロトタイプタブ
プロトタイプタブは、インタラクティブなモックアップを作成するために使用します。
- インタラクション(Interaction) クリックやホバー時の動作を設定。
- アニメーション(Animation) 遷移アニメーション（スライドイン、フェードなど）を設定。
- デバイス(Device): プロトタイプのプレビュー時のデバイスフレームを選択可能。
他に、Inspectタブ、カスタムプロパティ（コンポーネントや変数を使用する場合）があります。
Figmaの基本ツールの使い方
Figmaの下部（バージョンアップ前は上部）に位置するツールバーは、デザイン作業における基本的な操作や要素作成をサポートする主要なツールが並んでいます。このツールバーを使いこなすことで、効率的にデザイン作業を進めることが可能です。
移動ツール（Move Tool）
- オブジェクトやフレームを選択し、移動またはサイズを調整する基本ツール。
- ショートカット:
V - オブジェクトのドラッグ移動。
- サイズ調整（角や辺をドラッグ）。
- 複数のオブジェクトを選択可能（Shiftキーを押しながらクリック）。
移動ツール横の セレクトボタンをクリックすると、画面を移動させる手のひらツール、拡大縮小ツールを選択できます。
フレームツール（Frame Tool）
- デザインのキャンバスやアートボードを作成するためのツール。
- ショートカット:
F - フレームの作成。
- プリセットサイズ（例: iPhone、タブレット、デスクトップ）を選択可能。
- フレーム内に他のオブジェクトを配置し、構造を整理。
- レスポンシブデザインで異なる画面サイズを比較。
- ページ構成やコンテンツの配置を整理
フレーム横のセレクトボタンをクリックすると、セクションとスライスがあります。
Figmaのセクションとは？セクションは、キャンバス上でデザイン要素をグループ化し、それらを整理しやすくするためのツールです。セクションは、フレームとは異なり、デザインのコンテンツをプレビュー表示しませんが、デザインプロセスを視覚的に分けたり、管理しやすくするのに適しています。プレビュー表示したくない箇所はセクションに入れておくと良いでしょう。
長方形ツール（Rectangle Tool）
- 長方形やさまざまなオブジェクトを作成するツール。
- ショートカット:
R - ドラッグで任意のサイズの長方形を作成。
- 角丸の設定（プロパティパネルで調整可能）。
- 塗りつぶしや枠線をカスタマイズ可能。
長方形ツールの横のセレクトボタンをクリックすると、他に、直線、矢印、楕円、多角形、星、画像を描くことができます。
ペンツール（Pen Tool）
- カスタムシェイプやパスを描画するためのツール。
- ショートカット:
P - クリックで直線を作成。
- ドラッグで曲線を描画。
- アンカーポイントを編集して形状を調整。
- カスタムアイコンや複雑な形状を作成。
- パスに沿ったデザイン要素を作成。
ペンツールの横のセレクトボタンをクリックすると、鉛筆ツール（フリーハンド）に切り替えられます。
テキストツール（Text Tool）
- テキストを入力・編集するためのツール。
- ショートカット:
T - クリックして単一行のテキストを入力。
- ドラッグしてテキストボックスを作成し、段落を入力。
- フォント、サイズ、文字間隔、行間をプロパティパネルで調整。
- 見出しやボディテキストを配置。
- フォントスタイルを統一してデザインに一貫性を持たせる。
コメントツール（Comment Tool）
- デザイン上にコメントを残すためのツール。
- ショートカット:
C - 任意の場所をクリックしてコメントを追加。
- コメントのスレッドでチームとやり取り。
- 修正点やアイデアを直接デザイン上に記録。
- チームでのフィードバックを効率化。
アクションメニュー（Action Menu）
- キャンバス全体や選択したオブジェクトに対して操作を行うメニュー。
- Align（整列）: オブジェクトの配置を揃える。
- Distribute（分布）: 複数のオブジェクトの間隔を均等に。
- Group（グループ化）/ Ungroup（グループ解除）: 選択したオブジェクトをまとめる。
- Mask（マスク）: 他のオブジェクトをクリッピング。
- Boolean Operations（ブーリアン操作）: 複数の形状を組み合わせたり引き算する。
- レイアウトを効率的に整理。
- 複数の形状を使った複雑なアイコンやグラフィックの作成。
新規作成からiPhoneのフレーム枠を作成する場合
新規作成後、ツールバーからフレームを選択します。右のプロパティパネルに、フレームの種類が表示されますので、スマホから、iPhoneのスマホを選択（クリック）すると表示されます。引き続き、デスクトップからパソコン画面を選択します。
長方形ツールを使う
ツールバーから長方形ツールをクリックし、図形を書いてみましょう。クリックすると100px * 100px の正方形が描けます。ドラックすると任意の図形が描けますので、サイズ修正は、バウンディングボックスをドラッグして拡大縮小を行うか、プロパティパネルから数値を変更します。
描いた図形に塗りと線を入れてみましょう
図形は、最初からカラーコード「#D9D9D9」の薄いグレーが配色されています。プロパティパネルを使って塗りや線を追加していきましょう。figmaでは、線の位置は内側になっています(下図は動画になっていますので、停止している場合はコントローラーより再生をお願いします）
Figmaを使って簡単バナー作成
上のようなバナーを作成してみよう〜動画作成中
