図解でわかるFigmaのはじめ方ー登録から基本操作まで解説ー 2022/07/29

Adobe XDやSketch と並んで人気のUIデザインツール「Figma」。直感的に操作でき、ノンデザイナーからプロまで誰でも使いやすいと人気を集めています。2022年7月には日本語にも完全対応し、今後さらに普及していくツールだといえるでしょう。

そこでこの記事では、

Figmaの登録方法
基本的な使い方
Figmaと他サービスとの違い

を解説します。

Figmaの使い方についてくわしく知りたい方は、ぜひご覧ください。

Figmaとは

Figmaとは、ワイヤーフレームやプロトタイプが作成できるUIデザインツールです。ブラウザ上で利用できるため、ブラウザが使用できれば場所を問わずどこでも使えます。

Figmaの特徴は、リアルタイムで共同編集ができることです。1つのファイルを複数のメンバーで共有でき、デザイナーやディレクター、コーダーなど制作に関わる人とデータを共有しながら編集可能です。

チャット機能も搭載されており、制作物に直接コメントを付けられます。Figma内でコミュニケーションが完結するので、フィードバックを見るために違うファイルを確認する、という手間がなくなります。

Figmaの料金プランは3種類。無料で利用できる「スターター」プラン、月＄15／編集者の「プロフェッショナル」プラン、月＄45／編集者の「ビジネス」プランがあります。

	スターター	プロフェッショナル	ビジネス
料金／月	無料	＄15	＄45
料金／年	無料	＄12	ー
主な機能	・3つのFigmaファイルと3つのFigJamファイル・個人ファイル数無制限・プラグイン、ウィジット、テンプレート	・Figmaファイル数無制限・バージョン履歴数無制限・権限の共有・チームライブラリ	・プロフェッショナルのすべての機能・組織全体のライブラリ・ブランチ機能とマージ機能・ファイルの一元管理

参考：Figma「価格設定」

「スターター」プランでは、有料プランと同様のデザイン機能を利用できます。「プロフェッショナル」「ビジネス」プランでは「スターター」プランと比べて、プロジェクトの管理・共有機能がより豊富です。企業でFigmaを利用する場合は「プロフェッショナル」「ビジネス」プランの利用をおすすめします。

他サービスとの違い

Figmaの類似のサービスには、Adobe XDやSketchがあります。

	Figma	Adobe XD	Sketch
アプリの種類	Webアプリネイティブアプリ	ネイティブアプリ	ネイティブアプリ
OS	Mac／Windows	Mac／Windows	Mac
無料プラン	〇	× （無料トライアルあり）	× （無料トライアルあり）
料金／月	・無料・＄15 ・＄45	・1,298円	ー
料金／年	・無料・＄12	ー	・＄99
日本語対応	〇	〇	△
共同編集	〇	〇	△

Adobe XDやSketchはネイティブアプリですが、Figmaはブラウザ上で手軽に利用できます。またFigmaでは無料プランを利用し続けることもできるので、営業やクライアントなどノンデザイナーの人がデザインを確認する際にも役立つでしょう。

Figmaの登録方法

ブラウザ上で利用できたり、リアルタイムで共同編集できたりと、さまざまなメリットがあるFigma。ここではFigmaに登録する方法を、以下の4ステップで解説します。

公式サイトにアクセスし、[Figmaを無料で体験する]を選択する
アカウントを作成する
メールアドレスを認証する
オプションを設定する

各ステップを詳しく見ていきましょう。

1. 公式サイトにアクセスし、[Figmaを無料で体験する]を選択する

まずは、ブラウザでFigma公式サイトにアクセスします。

画面中央の[Figmaを無料で体験する]を選択。

2. アカウントを作成する

次に、メールアドレスとパスワードを入力して、[アカウントを作成]を選択します。

「自分の情報」画面で、名前と仕事内容を入力しましょう。

仕事内容を入力すると「Figmaの使用目的」欄が表示されるため、該当するものを項目から選びます。

Figmaのメーリングリストへの参加に同意するかを選択して、[アカウントを作成]へ進みましょう。

3. メールアドレスを認証する

次は、メールアドレスの認証です。

登録したメールアドレスに確認メールが届いたら、[メールを確認する]を選択します。メールアドレスが認証されると、アカウント作成が完了です。

4. オプションを設定する

アカウント作成が完了すると、オプション設定に遷移します。

任意でチーム名を指定します。チーム名は後から変更することも可能です。

Figmaアカウントを作成すると、オンラインホワイトボード「FigJam」も利用できます。まずどちらで作業を行うか選択しましょう。

ここでは「Figma」を選択しました。好きなテンプレートを選んだら、Figmaの利用開始です。

さっそくFigmaを使ってみましょう！

Figmaの基本的な使い方｜デザイン作成から共有まで

ここでは、Figmaの基本的な使い方を解説します。

基本画面

Figmaの基本画面は、以下の4つの要素で構成されています。

① ツール：図形、テキスト、ペン、コメントなどが選択可能
② レイヤー：オブジェクトの構造を管理
③ デザイン画面：主な作業スペース、フレームを追加してデザインを作成
④ プロパティ：オブジェクトの詳細を設定

フレームを作成

はじめに、アートボードとなる「フレーム」を作成します。

メニューボタンから[ファイル]→[デザインファイルの新規作成]を選択します。

ツールバーから[フレーム]を選択し、サイズを選びます。フレーム画面の表示は[F]をクリックすることでも可能です。

今回は「iPhone 13 Pro Max」を選択。フレームが新規追加されました。

要素を追加

次はフレームに要素を加えていきます。

まずツールバーから[長方形]を選択します。ショートカットキー[R]でも同様の操作が可能です。

挿入した図形は、[プロパティ]から詳細を変更できます。塗りで色を変更したり、エフェクトで影をつけたりと、用途に合わせて自由に作成しましょう。

プラグインをインストール

Figmaではプラグインを活用して機能を拡張できます。ツールバーから[プラグイン]に進み、検索窓で追加したいプラグインを入力します。

[実行]ボタンを押せば、プラグインの追加が完了です。

プロトタイプを作成

フレームが完成したら、次はプロトタイプを作成しましょう。プロトタイプではより本番環境に近い状態で、見た目や動きを確認できます。

今回は、ボタンをクリックしたら別ページに遷移する動作を確認します。フレームが作成できたら、画面右上[プロトタイプ]をクリックしましょう。

すると、ボタンに丸印が付きます。

丸印を選択し、遷移先につなげましょう。[インタラクション詳細]から動作時の動きを決めます。

設定が完了したら、画面右上の[プレビュー]をクリック。

上記のような画面で、動きや見た目をシュミレーションできます。

共有する

完成した制作物は[共有]から簡単に送信可能です。メールアドレスを入力、またはリンクをコピーすることで共有できます。

共有時の権限設定は「編集可」「閲覧のみ」の2種類です。ユーザーごとに権限を変更できます。

Figmaでは、権限を付与すれば複数人で同じファイルを操作できます。共同編集時にコミュニケーションを取りたいときはチャットツールがおすすめです。

ツールバーの[コメントの追加]を選択すると、制作物に直接コメントできます。返信もできるので、制作物に関するやり取りをFigmaに一本化することが可能です。

書き出す

書き出し形式は、以下の4つです。

プロパティのエクスポートから、形式を選択し出力できます。

基本的な操作は以上です。Figmaの機能はまだまだたくさんあるので、参考書などを活用して知識を深めましょう。

Figma for UIデザインアプリ開発のためのデザイン、プロトタイプ、ハンドオフ【電子書籍】[ 沢田俊介 ]

価格:2,750円
(2022/7/29 12:34時点)

まとめ

この記事では、Figmaの登録方法や基本的な使い方について解説しました。

高い機能性はもちろんのこと、チームでの作業に適したコミュニケーション機能も満載です。制作から共有まで一本化でき、さまざまな場面で活躍するツールといえるでしょう。

フリープランで気軽に始められるので、ぜひ試してみてくださいね！