Figmaのセットアップとダウンロード方法

FigmaはWebサイトやモバイルアプリ用のデザインツールで、ブラウザとデスクトップアプリの両方で利用できます。 プランとしては、

• 無料で利用できる「Starter Plan（スタータープラン）」
• サブスクリプション型の「Professional Plan」や「Organization Plan」

が用意されています。

『HTML&CSS コーディング・プラクティスブック』シリーズなどに同梱しているFigma形式のデザインカンプの表示・編集・数値の取得などは、 スタータープランのFigmaでも利用できます。

• アカウントの作成
• ブラウザでの利用
• デスクトップアプリでの利用

Figmaのアカウントを作成する

1. Figmaを利用するためにはアカウントの作成が必要です。Figmaのサイトにアクセスし、「Sign up」をクリックします。

   

2. Figmaのアカウントは、Googleアカウントまたはメールアドレスを登録して作成します。

   

3. 利用者の名前と仕事の種類を指定します。

   

4. 仕事の種類を選択すると新しい質問が表示されますが、*印のないものは必須ではありません。 そのまま進む場合は「Create account」をクリックします。

   

5. アカウントが作成され、Team（チーム）の設定が求められます。後から設定できますので「Do this later」をクリックします。

   なお、メールアドレスでアカウントを作成した場合は確認メールが届きますので、メール内の「Verify email」をクリックして承認します。承認するとこの画面が開きます。

   

6. プランの選択画面になります。無料のスタータープランを利用する場合は「Start for free」を選択します。

   

7. 最後に、次のような画面が開きます。Figmaのファイルブラウザ（管理画面）を開く場合は「I'll explore by myself」をクリックします。

   

8. ファイルブラウザが開きます。書籍に付属したローカルのFigmaファイル（.fig）は、ファイルブラウザにドラッグ＆ドロップし、インポートして利用します。

   

ブラウザで利用する場合

Figmaをブラウザで利用する場合、「Log in」をクリックしてログインするだけで利用できます。 ブラウザの必要要件については browser requirements pageにまとめられています。

デスクトップアプリで利用する場合

FigmaのデスクトップアプリはmacOS版とWindows版が用意されています。下記ページの「Desktop app」からダウンロードできます。