Figmaの準備とセットアップ

Figmaのセットアップ

Figma を具体的に使っていきましょう。Figmaは、Webアプリケーションです。ローカル環境にプログラムをインストールする必要はありません。基本的にWeb 上でアカウントを作ることで利用可能になりますが、アカウントの種類については注意が必要です。個人で利用したり、不特定多数の人とデザインを共有したりするのであれば無料アカウントで利用できます。グループで共同編集するような場合には、無料アカウントでは一部の機能が制限されるため、有料アカウントを選ばなくてはならないケースがあるかもしれません。

無料アカウントから有料ライセンスへの切り替えはいつでもできるので、本記事では無料ア カウントを前提に説明していきます。 ではまず、Figma の公式ページ（https://www.figma.com/ja/）を開きましょう。トップページを開き、「サインアップ」ボタンを押します。

Figmaの公式サイト（https://www.figma.com/ja/）にアクセスして、右上の「サインアップ」ボタンを押す

Googleアカウントを使って利用することも、任意のメールアドレスとパスワードで登録することもできます。

「Googleで続行」もしくは任意のメールアドレスを登録する。「アカウントを作成」をクリックして次に進む

次の画面でユーザー名と用途を登録します。担当業務を選ぶ「どのような仕事ですか？」の項目は単なるアンケートと思ってください。この項目をクリックすると、「マーケター」「デザイナー」「開発者」などを選ぶメニューが表示されるので、いずれかをクリックします。この選択で使える機能が変わるわけではありません。

ユーザー名（自分の名前）を入力し、担当業務（どのような仕事ですか?）を選ぶ

仕事の選択を終えて次へ進むと、コラボレーターを招待する画面になります。特に招待をする必要がなければ、「後で」を押して次へ進みます。 その後はしばらく質問が続きますが、アンケートなのでご自身の状況に合わせて回答してください。

任意のメールアドレスでアカウントを作成した場合は、そのアドレス宛てに認証用のメールが送られてきます。メールの指示に従って、メールアドレスを認証します。

質問に回答していくと、無料プラン（スターター）か有料（プロフェッショナルl）かを選択する画面になります。特に必要なければ、最初はスタータープランで十分です。

最初は無料プラン（スターター）でかまわないので、「無料で利用開始」をクリックする

最初に開く画面を指定する画面が表示されますが、これは指定する必要はありません。「テンプレートを使用しない」をクリックしてスキップします。

「まずどちらの作業を行いますか？」と尋ねられたら、「テンプレートを使用しない」で次に進む

これで登録作業は完了です。

この画面で画面右上にある「＋デザインファイル」をクリックして、新規のデザインページを開いてみましょう。次の記事ではこの新規ページをもとに、Figmaの基本操作について解説します。

出典：「ゼロからはじめるWebデザイナー」　黒 卓陽 著

書籍紹介

Webデザイナーになりたい人、Figmaについてもっと詳しく知りたい人にはこちらの書籍がおすすめです！

ゼロからはじめるWebデザイナー

著者／編集 : 黒 卓陽
出版社 : 日経BP
発行形態 : 単行本
ページ数 : 504p
定価 : 2,860円 (税込)

著者

黒 卓陽

WEBデザイナー。
地図制作会社、ゲーム会社のデザイナーを経て、会社を辞めて独学でWEBデザインを勉強し、Webデザイナーとして転職。
Wordpressを使って、コーポレートサイトからオウンドメディア、社内システムなどを制作。

▼Twitter
https://twitter.com/KuroTakuyo

関連イベント動画

【ゼロからはじめるWebデザイン】 #07 Figmaの導入と基本操作

今やWebデザイナー必携ツールとなっている、WebアプリFigma。
導入も簡単で、操作方法も直感的にできますが、実際にWebデザインの仕事をするときは、どのようなことを行うのでしょうか。
実用的な内容に絞って、初めての方でもわかりやすく、Figmaについて解説していきます。