Figmaの基本操作と使い方まとめ

 

細かいことは使いながら後から覚えよう！

Figmaってどんなツール？

Figma（フィグマ）は、Webブラウザで使える無料のデザインツールです。

• ソフトのインストール不要

• Googleドキュメントのようにリアルタイム共同編集できる

• UIデザイン・バナー制作・資料づくり・プロトタイプもOK！

• 動作が軽くて使いやすい！プラグインも豊富

デザイン初心者でも直感的に使いやすく、学習コストが低いのが特長！

Step1：アカウント作成（無料）

1. 公式サイト にアクセスして「開始」をクリック

2. Googleアカウントかメールアドレスのいずれか登録・ログインで、ホーム画面が開きます。

このままブラウザで使用するのもOKですが、アプリケーションをダウンロードして使用することもできます。どちらでも使用感は変わりませんが、私はアプリケーションで使用しています！（Macだとの画面下部のツールバーからすぐ立ち上げられるのが便利！）

Figmaのデスクトップアプリケーションのダウンロードはこちら

Step2：ホーム画面から新規デザインファイルを作成する

ホーム画面を開くと「ドラフト」画面が開いているので、上部ヘッダーの「デザイン」ボタンをクリックしましょう。キャンバス（作業画面）が開きます

キャンバスの画面構成

キャンバスには上部のヘッダー以外に主に次の3エリアがあります。先ほどのホームに戻りたい時は上部ヘッダー左の家のアイコン（ホームアイコン）をクリックしましょう。

ツールバーでフレーム、テキストや図形を追加左のナビゲーションパネルでレイヤーを整理し、右のプロパティパネルでテキストや図形の編集を行うといったイメージです。

step3：フレームの作成

下部のツールバーから「フレーム」をクリックします。そのまま画面上でドラックして好きなサイズでフレームを作成するか、右のプロパティパネルから任意のサイズを選択して作成することができます。(Figmaのサイズ表記は基本的にpxです)

１.ツールバーからフレームをクリック

2.画面上でドラックして作成

3.または右のプロパティパネルから任意のサイズを選んで作成（WebサイトデザインのPC画面を作る場合は「デスクトップ 1440×1024」などがおすすめ）

step４：テキストの作成

下部のツールバーからTマークのアイコンをクリックします。画面上をクリックしテキストを打ち込んだら右側のプロパティパネルでフォント、サイズ、色などの変更を行うことができます。

1.ツールバーからTマークのアイコンをクリックして画面上でテキストを打ち込む

2.右側のプロパティパネルでフォント、サイズ、色などの変更

step5：図形の作成

下部のツールバーから四角マークのアイコンをクリックします。長方形、線、矢印などを選択して画面上でドラッグすることで図形を作成することができます。

1.ツールバーから四角のアイコンをクリックして任意の図形を選択

2.画面上でドラックして図形を作成、右のプロパティパネルで色の変更などの編集ができます。

step6：画像の配置

1.図形を選択してプロパティパネルの「塗り」の＋マークをクリックします。色変更のパネルが開くので「画像」アイコンをクリックし、任意の画像をアップロードします

2.プロパティパネルで「塗り」の画像の透明度を100%に変更して画像の反映が完了です。

step7：フレームにテキストと画像を配置しよう

上記の方法でフレームを作成し、テキスト、画像をその上に配置することで簡易的なデザインを作成することができます！左のレイヤー画面を見てみると、フレームの配下にテキストと、レクタングル（画像を反映した図形）があることがわかります。

step8：フレームを書き出す

最後に、フレームの書き出します。書き出したいフレームを選択し（青い線で囲まれる）右のプロパティパネルの下部のエクスポートの+アイコンをクリック、画像形式（PNG,JPG.SVG,PDF）を選択しエクスポートボタンをクリックします。任意の保存先を選んでデザインの保存が完了します。

まとめ：Figmaはまず「触って慣れる」が最速の上達法！

Figmaは直感的に操作できるツールなので、まずは「完璧に理解しよう」とするよりも、実際に触ってみることが何より大切です。

図形を描いてみる、テキストを置いてみる、他の人のデザインを観察してマネしてみる。そんな小さなステップの繰り返しが、確実なスキルアップにつながります。