「Figmaを始めたいけど、何から手をつければいいんだろう…」
そんなお悩みを持つ初心者の方も多いはず。
この記事ではFigmaの立ち上げ～最初のデザインファイルを作成するまでの方法を、ステップバイステップで解説します。
難しい知識やスキルは不要です！
Figmaの基本操作に触れながら、簡単な画面デザインを作ってみてください。
ステップ1｜Figmaのアカウント作成
まずはFigmaの公式サイトにアクセスして、無料アカウントを作成してみましょう。
手順
- https://www.figma.com/ にアクセス
- 「無料で始める」をクリック
- Googleアカウントやメールアドレスで登録
- 「お名前を教えてください」：他のユーザーに表示してもOKな名前の設定を行います。
- Figmaの使用理由について近いものを選択します
- 職業について近いものを選択します
- 勤務先や働き方について該当するものを選択します
- 組織の従業員数を選択します（1人でもOK）
- 他に招待したい人を選択します（スキップOK）
- これまでのFigma製品の使用経験を選択します。
- 使用プランを選択します（無料スタータープランでOK）
- 行いたい作業内容を選択
これでFigmaを使う準備は完了です。
ステップ2｜新しいデザインファイルを作成してみよう
Figmaにログインすると、ダッシュボード（ホーム画面）が表示されます。
新規ファイルの作成方法
- 左側の「ドラフト」の右の＋をクリック
- 作成したいファイルの種類をクリック（デザインやスライドなど）
これで空のキャンバス（作業スペース）が作成できます。
ステップ3｜フレーム（アートボード）を追加してみよう
Figmaでは、画面単位のデザインを「フレーム（Frame）」として設置します。これは他ツールで例えるならアートボードのようなものです。
フレームの作成手順
- ツールバーの「Frame」ツールを選択（またはショートカット
F） - 右側に表示されるプリセットからサイズを選択（例：iPhone 13）
- キャンバスにフレームが配置されます
フレームごとにデバイス名などを表示できるので、複数の画面を扱うときにも便利です。
ステップ4｜シェイプ（図形）を配置する
次に、デザインの基本となるシェイプ（四角や丸など）を追加してみましょう。
四角形を追加してみる
- ツールバーの「長方形」ツールを選択（または
R） - フレーム内でドラッグして□を作成する
- 右側の「Design」タブからサイズや角丸、色などを変更する。（フレーム内で調整したい箇所をドラッグする事でも変更可）
他にも「直線」「円」「三角形」なども追加できます。
ステップ5｜テキストを入力する
次に、見出しやボタンに使うテキストを追加してみましょう。
テキストを入力する手順
- ツールバーの「Text（テキスト）」ツールを選択（または
T） - フレーム内をクリックして文字入力
- 右側の「Design」タブでフォントやサイズ、色を調整する
※フォントはGoogle Fontsベースです。日本語もある程度カバーされています。
ステップ6｜要素の位置を整える
配置した図形やテキストを整列したりグループ化すると、見た目がスッキリします。
整列・間隔調整の基本操作
- 複数選択して右側の「Design」タブで配置を選択、または等間隔に並べる
- 「Shift＋クリック」で複数オブジェクトを選択可能
さらに「Auto Layout」機能を使うと、レスポンシブなデザイン構造も作れます（慣れてきたらぜひ挑戦！）
ステップ7｜保存・ファイル名の設定について
Figmaは自動保存されます。ですが、ファイル名を変更しておくことで管理が楽になります。
ファイル名の変更方法
- 上部の「無題」部分をクリックして、任意の名前に変更
例：「first_design.fig」など
ステップ8｜プレビュー＆共有も試してみよう
完成したデザインは、簡単にプレビューが出来たり他の人と共有することも可能です。
プレビュー
- 上部の「▶」ボタンをクリックすると、実際の表示イメージが再現されます
● 共有
- 「共有」ボタンをクリック → 編集権限や閲覧権限を設定してURLをコピー
- 共同作業者を追加すれば、リアルタイムで共同編集も可能！
パスワードを設定することも出来るので重要な情報を守れて安心ですね！
まとめ｜Figmaの最初の1ステップを踏み出そう！
Figmaは、初心者でも直感的に使う事の出来るデザインツールです。
今回ご紹介したステップに沿って進めることで、初めてでもデザイン作成を無理なく体験できます。
今回の記事のおさらい
- Figmaに登録しログイン
- 新しいデザインファイルを作成
- フレームを設置
- シェイプやテキストを配置
- 整列して見栄えを整える
- 保存・命名・プレビュー・共有
この一連の流れを実際に手を動かして繰り返すうちに、自然とFigmaに慣れていくはずです。
まずは「1つの画面を完成させる」ことからスタートしてみてくださいね！
