2026-05-16 追記: 初出から数年経過した記事です。アカウント作成・チーム作成・ファイル作成という骨子は今も同じですが、UI の細部や用語は当時のまま残しています。現在の Figma には Dev Mode、Variables、Auto layout の強化など、当時には無かった機能が追加されています。最新の画面と読み比べる前提でお読みください。
今回はFigmaの概要と、最初のデザインファイルが開くまでの準備を整理します。アカウント作成・チーム作成・ファイル作成の3つを順番に進めるだけで、UI デザインのキャンバスにたどり着けます。
Figma の概要を理解する
Figma はブラウザ上で動く UI デザインツールです。インストール不要で、URL を開けばすぐに編集画面に入れます。
他にもプロトタイピング用のツールはありますが、Figma の輪郭をつかむうえで押さえておきたい特徴は次の2つです。
- クラウド上で作業する
- 複数人で同時編集できる
クラウドで作業する
Figma はファイルがクラウドに置かれ、編集も基本的にブラウザの中で完結します。
アカウントさえ作っておけば、ブラウザが動く PC からログインするだけで、編集中のデータを閲覧・編集できます。手元の環境にツールをインストールする必要はありません。
複数人で同時編集できる
Figma の最も特徴的な点は、複数人が同じファイルを同時に編集できることです。
個人で使う分には恩恵は薄いですが、仕事でプロトタイプを進める場合、ファイルを zip で渡す・最新版を取り違える、といった面倒がほぼなくなります。
※リモートワークの会議では特に効きます。画面共有しながらその場で直す、ができるためです。
アカウントを作成する
実際に使い始めるには、まず Figma のアカウントを作ります。
公式サイトを開いて、サインアップに進みます。
アクセスすると上の画面が表示されるので、赤枠の Sign up ボタンをクリックします。
クリックすると、アカウント新規作成モーダルが表示されます。
Google アカウントで新規作成するのが手間が少なく、おすすめです。メールアドレスでも問題ありません。
チームを作成する
アカウントを作成してログインできたら、最初にチームを作成します。
チームは PC のフォルダに近い概念です。先にチームというフォルダを作り、その中にデザインファイルを置く、という階層になります。
以下の赤枠箇所をクリックします。
クリックすると、チーム名入力画面が表示されます。
任意のチーム名を入力して、Create team ボタンをクリック。
次にチームに追加したいユーザーを入力する画面に進みます。
今回は一人で無料枠で作るので、画面下にある Skip for now をクリックして進めます。
最後に Figma のプランを選択します。
無料プランで進めるので、赤枠の Choose Starter を選択。これでチーム作成は完了です。
デザインファイルを作成する
チームができたので、実際に編集する場所、デザインファイルを作成します。
無料版では、デザインファイルは3つまでしか作成できない点に注意してください（執筆当時の制限。最新の上限は公式の料金ページを確認してください）。
デザインファイルの作成自体は簡単です。
左側に作成したチーム名が表示されているので、選択すると下の画面が表示されます。
赤枠をクリックすると、新規のデザインファイルが作成されます。
作成すると以下の画面が開き、これで準備は完了です。
ここまでで、Figma の概要を押さえ、空のキャンバスにたどり着くところまで進みました。
実際にこのキャンバス内で何をどう操作するかは、続編の基礎編で扱っています。
関連記事: Figmaの使い方〜基礎編１〜
