デザイン制作を効率化 Webデザインツール「Figma」とは？

Figmaとはブラウザ上で簡単にデザインの作成、チームでの共同編集を行えるデザインツールです。

ワイヤーフレームやアプリのUIデザイン制作はもちろん、PowerPointの代わりとして資料作成を行うなど使用用途は幅広く、リアルタイムで複数人による共同編集が行えるなどの特徴があります。今回はFigmaの概要や基本機能について解説を行っていきます。

Fifmaとは？

Figmaとはブラウザ上で動作するデザインツールで、UIデザインやプロトタイプの制作、共同編集などを行うことができます。Webブラウザ上で直接デザイン作業ができるため、インストールや環境設定が不要で、どこでも利用することができます。またリアルタイムに複数人が同時にデザイン作業を行うことができ、変更履歴やコメント機能を使ったコミュニケーションができるため、チームでのデザイン制作やレビューがスムーズに行えます。さらにFigmaはデザイン制作に必要な機能をほぼすべて備えており、プラグインを活用することでより高度なデザイン制作も可能となっています。

無料版と有料版の違い

Figmaには永年無料で使用することができる「Starter」とチーム開発向けの「Professional」企業向けの「Organization」の3つのプランが存在します。

無料である「Starter」ではチーム内のプロジェクトを1つまでしか作れなかったり、保存できるファイル数も3つまでなど機能面でいくつかの制限が設けられており、個人使用や小規模開発向けのプランとなっています。「Professional」では上記の制限が解除され無制限で使用できるようになり、共有可能なチームライブラリを作成することができます。また、学生や教育関係者は認証されると「Professional」プランを無料で使用することができます。企業向けの「Organization」では権限付与を行なったり社外との共有ファイルにはパスワード設定を義務付けたりといった、より企業向けの機能が用意されています。

機能面で多少の制限はありますが、個人使用の場合は「Starter」プランでも十分な機能が備わっているため、最初は「Starter」プランの使用をおすすめします。

使用方法

Figmaはブラウザ上で動作するデザインツールのため、会員登録をするだけですぐに使用することができます。

また、Googleアカウントを使用することでこれらの作業を数分で済ませる事ができるため、Googleアカウントを使用するのがおすすめです。

1. 公式サイトにアクセス

公式サイトにアクセスを行い、「始める」を選択します。

2. アカウント作成

メールアドレスを使用し、アカウントを作成するかGoogleアカウントを使用してのログインするかを選べます。今回はGoogleアカウントを使用します。

3. アカウント情報入力

次に登録を行いたい「名前」と「職業」の入力を行い、「アカウントを作成」を選択します。

4. チーム作成

Figmaでは同時に編集を行うメンバーで「チーム」を作成し、その中に「プロジェクト」を立ち上げて「ファイル」を作成します。複数人で使用しない場合は飛ばしても大丈夫です。

5. チームメンバーの招待

作成したチームにメンバーを招待します。招待をしたい方のメールアドレスを入力し、次に進みます。

6. プラン選択

「Starter」と「Professional」の二択から選択します。　いくつかの制限がありますが、まずは「Starter」を選択しましょう。

7. FigmaかFigjamの選択

Figmaを開くかFigjamを開くかを聞かれるのでFigmaを選択します。

8. テンプレートの選択

使用するテンプレートを選びます。

9. 作成

これでデザインの作成を始めることができます。

日本語化

今までFigmaを日本語化する際はブラウザの拡張機能を入れる必要がありましたが、公式に日本語対応致しました。そのため設定を変更するだけで簡単に日本語に変更をすることができます。

1. ホーム

ホーム右上のユーザーアイコンを選択し、「Settings」を開きます。

2. Language

Language設定の「Change languages」を選択します。

3. 言語選択

「English」と「日本語」が選べるため、「日本語」を選択し保存します。

4. 日本語化完了

以上で日本語化が完了致します。

デスクトップアプリのインストール

Figmaにはブラウザ版とデスクトップ版、モバイルアプリ版があります。

機能面に違いはありませんが、ブラウザ版の場合本格的なデザインを行うとカクついてしまう可能性などがあります。そのため、本格的なデザインを行う場合はデスクトップ版を使用し、それ以外の用途ではブラウザ版を使用するなどの使い分けをおすすめします。

今回はMac（Ventura Ver13.2.1）へのインストール方法について解説を行います。

1. ホーム

ホーム右上のユーザーアイコンを選択し、「デスクトップアプリを入手」を選択します。

2. Figma.dmg

ダウンロードされた「Figma.dmg」を開き「Applications」へドラッグ&ドロップします。

3. ログイン

インストールが完了したらLaunchpadよりFigmaを起動しログインを行います。

画面構成

Figmaを活用していく上で必要となってくる各種ツールや画面について解説を行っていきます。

まずはFigmaで新規ファイルを作成すると以下の画面になります。Figmaのウィンドウは「ツールバー」「左サイドバー」「キャンバス」「右サイドバー」の4つのエリアで構成されています。

左サイドバー:レイヤー

左のサイドバーには「レイヤー」「アセット」「ページ」が表示されます。

レイヤーには配置をしているオブジェクトが一覧表示されます。試しに「iPhone14 Pro Max」のフレームを2つ配置してみます。。すると左サイドバーのレイヤーに配置を行ったオブジェクトが一覧で表示されます。

左サイドバー:アセット

アセットでは作成した「コンポーネント」が表示されます。

コンポーネントには構成要素や部品といった意味合いがあり、複数レイヤーを1つにまとめてコンポーネント化（部品化）することで複数のデザイン間で再利用することができます。コンポーネントを作成するには使用したいレイヤーを複数選択し、右クリックを行い「コンポーネントの作成」を選択するか「⌥⌘K」を押す事で作成することができます。

左サイドバー:ページ

ページにはファイル内のページが表示されます。

デフォルトでは折りたたまれていますが、クリックをすることで表示することができ、「＋」を選択することでページの追加を行えます。

キャンバス

画面の中央にはキャンバスが表示されます。

このキャンバスがデザイン画面となり、キャンバスにオブジェクトを配置していくことで作成を行います。

右サイドバー:デザイン

右のサイドバーには「デザイン」「プロトタイプ」「インスペクト」が表示されます。

デザインでは選択をしたオブジェクトの色や位置、線幅やエフェクトなどを調整できます。

右サイドバー:プロトタイプ

プロトタイプではユーザーの操作や行動を検証するためのフローを作成することができます。

これにより実際にページ遷移した際の動きなどを動的に確認することが可能です。

右サイドバー:インスペクト

インスペクトではデザインデータからCSSコードを参照したり画像の書き出しが行えます。

参照したいオブジェクトを選択することでCSSコードを参照できます。ただし、レスポンシブコーディングを行う場合このまま全てコピペをしてしまうと、ウィンドウ幅に合わせて伸縮しないなどの問題が出てくるため注意が必要です。

ツールバー

画面上部にあるツールバーにはデザインを作成するための様々なツールが配置されています。ツールの種類は以下になります。

Figmaの使い方

画面構成や各種機能について理解ができたところで実際に簡単なワイヤーフレームの作成を行ってみましょう。

1. ファイルの作成

まずはファイルの作成を行っていきます。

ホーム画面中央にある「デザインファイルを新規作成」よりファイルを作成します。

2. フレームの作成

次にツールバーのフレームツールを選択し、右サイドバーに表示される「MacBookPro16」のテンプレートを選択します。

3. 図形ツール

図形ツールを使い大雑把に全体図を作っていきます。

4. 文字入れ

あとは挿入したい文字を配置して完成です。

5. 完成

「⌥⌘エンター」を押す事で実際に端末で表示した際のイメージを見る事ができます。

まとめ

Figmaとはブラウザ上で簡単にデザインの作成、チームでのリアルタイムな共同編集を行えるデザインツールです。

FigmaではUIデザインやプロトタイプの制作、共同編集などが行えます。また、リアルタイムに複数人が同時にデザイン作業を行うことができ、変更履歴やコメント機能を使ったコミュニケーションができるため、チームでのデザイン制作やレビューがスムーズに行えます。デザイン制作に必要なツールはほとんど搭載されており、正式に日本語対応もしたため、これからデザイン制作を行う初心者の方にも扱いやすいデザインツールと言えます。個人や小規模でのデザイン制作の場合、無料で使用出来るStarterプランでも十分な機能が使用できるため、まずはStarterプランを使用してみることをおすすめします。