Figma（フィグマ）とは｜選ばれる理由と導入方法を詳しく解説

Figmaとは｜4つの特徴

Figmaとは、UIデザイナーが業務を行う際に必要な機能を多く集約した、ブラウザ上で簡単に使えるプロトタイピング（デザイン）ツールです。創業10年以内にして10億ドル以上の評価額が付けられている非上場のベンチャー企業を指す「ユニコーン企業」として認定され、SlackやX（Twitter）、Microsoftなど多数の有名企業で採用されています。インストールが不要でブラウザを起動できれば、場所を問わず使用できます。また共有機能に優れているため、1つのファイルを複数人で編集することができます。別の場所にいながら1つの作品にさまざまな役割の人がリアルタイムで編集できるため、オンラインを有効に生かしたFigmaは現在のテレワークのような遠隔でやりとりをするビジネスにぴったりなツールと言えます。

デザインの最初から最後まで全てを支援するデカコーン企業「Figma」〜海外ユニコーンウォッチ #4〜

特徴1｜クラウドベースで場所を選ばず使える

Figmaは、インターネットに接続できる環境があれば、どこでも利用可能なクラウドベースのデザインツールです。ブラウザ上で動作するため、特別なソフトウェアをインストールする必要がなく、WindowsやMac、タブレットやスマートフォンなど、様々なデバイスで使用できます。

これにより、デザイナーはオフィスだけでなく、自宅やカフェ、出張先など、場所を選ばずに作業を進められます。また、データはクラウド上に保存されるため、複数のデバイス間で同期が取れ、いつでも最新のデータにアクセスできるのも大きなメリットです。

Figmaは、リモートワークが当たり前になった現代のワークスタイルにマッチしており、デザイナーの働き方に柔軟性をもたらしています。

特徴2｜リアルタイムに共同編集できる

Figmaは、複数のユーザーが同じデザインファイルを同時に編集できるというリアルタイムコラボレーション機能を備えています。

これにより、デザイナー、マーケター、エンジニアなど、様々な立場のメンバーが一つのファイルを中心に、いつでも作業を進めることが可能です。

変更内容はリアルタイムで同期され、他のメンバーの作業状況をすぐに把握できるため、コミュニケーションのロスを減らし、スムーズに協働作業を行えます。

また、クラウド上でデザインデータを一元管理できるため、ファイルの共有や管理も簡単です。

変更してほしくない部分を他の担当者に編集されてしまったとしても、変更履歴を追跡できるため、必要に応じて以前のバージョンに戻すことも可能です。

Figmaのリアルタイムコラボレーション機能は、チームでのデザイン作業を効率化し、プロジェクトの進行をスピードアップさせる強力なツールと言えるでしょう。

特徴3｜基本無料で使える

Figmaの料金プランは、Starter・Professional・Organizationの3種類あります。Starterは無料で使用でき、個人、小規模プロジェクトに向いています。プロジェクトは最大1つまで、ファイルは最大3つまで同時に作成することができます。Fileを編集できるエディターは無制限なため、しっかりとコミュニケーションをとって作成できます。Figma Professionalは年払いで月々$12、月払いなら月々$15、Organizationは月々$45で利用でき、中小企業や大企業のチームプロジェクトでの使用に向いています。プロジェクトやファイルは無制限に作成でき、バージョン履歴も無制限に残せたりと使用できる機能の幅が広がります。無料のプランでも十分に多くの機能が利用できるため、個人での利用や小規模でのチームワークではStarterプランがおすすめです。

特徴4｜SketchやAdobe XDのデータをインポートできる

SketchやAdobe XDの素材をインポートできるので、今までSketchやAdobe XDを使っていた人も導入しやすいです。XDデータのインポート方法は2通りあり、1つ目は「XD2Sketch」を利用します。ただ有料のサービスで、1ファイルのみの移行であれば$17かかります。2つ目は、SVGとしてエクスポートします。ただこの方法では、レイヤー名や画像データ、プロトタイプの設定は移行できません。Sketchデータのインポートは簡単に行うことができ、Figmaのホーム画面にある「Import file…」をクリックしてデータを選択すると完了です。

Figmaを導入するメリット

Figmaの特徴と導入するメリットについて紹介します。Figmaは、アメリカ・サンフランシスコに本社を置き、2006年にリリースしました。そして2022年3月、アジア圏初となる日本法人を設立しました。GoogleやMicrosoft、Netflix、LINE、クックパッドなどさまざまなジャンルの企業のデザイナーたちに評価が高く、世界のデザイナーが使いたいツールNO.1として君臨しました。ソフトをインストールする必要がなく、インターネットに繋がるデバイスさえあれば、世界のどこからでも同じファイルにアクセスできます。

メリット1｜ブラウザ上で使えるためすぐに使える

Figmaは、ブラウザ上で利用できるクラウドベースのデザインツールなので、インターネット環境さえあれば、場所を選ばずに利用することができます。

従来のデザインツールのように、端末にソフトウェアをインストールする必要がないため、セットアップが簡単で、すぐに使い始めることが可能です。

また、クラウド上でデータが管理されているため、複数の端末間でのデータの受け渡しも容易に行えます。

FigmaはMacやWindowsなどのOS環境に依存しないため、チームメンバーが異なるOSを使用していても、スムーズに共同作業を進めることができるでしょう。

メリット2｜デザインのシェアができる

一般的なデザインツールは、デザイナーひとりが全てを管理し、デザイン制作後エンジニアにファイルを転送して共有します。Figmaはアカウントさえ持っていれば、違うデバイス上からでもログインでき、またURLを共有すればチームメンバー全員が同じデザインを編集できます。常に最新のデザインがリアルタイムで更新されるため、デザインを送り合う必要がありません。Figmaアカウントを持っていないユーザーでも共有でき、コメント機能などのコラボレーション機能で簡単にフィードバックができます。

メリット3｜作業の効率化が図れる

Figmaは、アプリやファイルをダウンロードすることなく、共同作業がリアルタイムで反映されます。クラウド上でファイルが管理されるため、常にチーム間で最新のデータが維持されます。複数のファイルから最新版を探す必要がなく、データの乱立を防ぐことができ、作業の効率化につながります。URLを共有するだけでデザインが見れるので、デザインチェックをするたびに書き出してメールなどで送信したり、相手のアプリ・アカウント保持の確認をする必要がなく、スムーズに作業を進行することができます。

メリット4｜直感的なUIで初心者でも使いやすい

Figmaは直感的なユーザーインターフェース（UI）を採用しており、デザインの経験がない初心者でも簡単に使いこなすことができます。

例えば、簡単な文言の変更や画像の差し替え、デザインの書き出しなどは、デザイナーでなくても問題なく行うことが可能です。

Figmaの直感的なUIは、ドラッグ＆ドロップ操作やわかりやすいアイコン、ショートカットキーなどを採用しており、ユーザーが迷うことなくスムーズに作業を進められるよう設計されています。

これにより、デザインの専門知識がない人でも、ストレスなくFigmaを使いこなすことができるでしょう。

Figmaの導入方法の流れ

Figmaの導入方法の流れを解説します。まず、Figmaをブラウザで開くかアプリで開くか選択をします。利用するにはアカウントが必要なため、Figmaの公式サイトで作ります。Googleアカウントまたはメールアドレスが必要です。Figmaはまだまだ日本ではユーザーが少なく、デフォルトではGoogle Fontsが読み込まれるようになっています。そのため、日本語を使用するためには設定が必要です。簡単な手順で設定できるので、始める前に設定しておくのがおすすめです。

①ブラウザ版かアプリ版を選択

Figmaを導入する際には、まずブラウザ版かアプリ版かを選びましょう。ブラウザ版では操作するのに重くなってしまう場合もあるので、アプリ版がおすすめです。使用しているOSのアプリケーションをダウンロードしてセットアップします。ブラウザで利用すると、デフォルトではローカルのフォントデータが利用できないので、「Font Installers」からフォント読み込みができるように設定しましょう。アプリでは設定の必要はありません。

②公式サイトでアカウントを作成する

Figmaを利用するにはまずアカウントの作成が必要です。Figmaの公式サイトでアカウントを作成しましょう。画面右上の「Try Figma for free」をクリックして、Googleアカウント、もしくはメールアドレスとパスワードを入力して登録します。英語表記のみなので注意しましょう。入力すると、アンケートが表示されるので、名前と職業を入力しましょう。後から変更もできます。メールが届くので、「verify email」をクリックして完了です。

③日本語を有効化する

デフォルトではGoogle Fontsが読み込まれるようになっています。Figmaは日本語フォントに対応していないため、まずローカルのフォントを設定して、日本語を使えるように設定しましょう。簡単に設定できるので、はじめに設定しておきましょう。操作方法は、まず左上にあるFigmaのロゴをクリックし、「Account Setting」を開きます。登録したアカウントの設定画面が出てくるので、ページ下部にある「Fonts」セクションに表示される「Download installer」をクリックします。「FigmaInstaller.pkj」がPCにダウンロードされるので、パッケージをダブルクリックして開きましょう。インストーラが起動するので指示に従ってインストールします。

Figmaの5つの便利機能

FigmaでUIデザインを作成する際に、「仕事が効率化する便利な機能はないだろうか」「自分の学習だけでは足りない部分を、誰かが指摘してくれる機能はないだろうか」などという疑問を持った方はいないでしょうか。ここでは、Figmaに搭載されている便利な機能を5つ紹介します。チームメイトからのアドバイスや指摘が、オンタイムで見れてすぐに修正でき、よりよいデザインが常にアップデートできるような機能があれば、仕事が効率化してチームメイトとのコミュニケーションがスムーズにできます。

便利機能1｜オートレイアウトAuto Layout

オートレイアウトとは、コンテンツに合わせてフレームを作成できる機能です。コンテンツの内容が変わっても、レイアウトを崩す心配がありません。オートレイアウトを活用することで、例えば、文字数が増えたためにボタンの大きさを変えたり、余白の調整を手動で行うといった手間を省くことができます。一つ一つの修正を手動で行うとミスがでてしまい形が崩れてしまいます。オートレイアウトを取得することで、デザインルールが明確になり、見やすく整ったデザインに仕上げることができます。

便利機能2｜コンポーネントComponent

コンポーネントとは再利用ができるUIの要素を意味し、デザインの一貫性を担保できる機能です。「Sketch」の「Symbol」と同じ機能です。コピーしたものをコンポーネント化すれば、フォント、色、枠線、位置、エフェクトなどオブジェクトのスタイルをまとめて適用することが可能になります。リストビューやナビゲーションなど、同じデザインを作るときに便利です。再利用することで、士官が節約され、仕事の効率化につながります。

便利機能3｜カーソルチャット

吹き出しのようなメッセージが送れるが数秒で消える機能です。音声でやりとりできない場合などにリアルタイムでメッセージを伝えるときに便利です。スラッシュキーを押すことで、テキストボックスが自分のカーソル上に出現します。このテキストボックスにメッセージを入力することで、マウスカーソルが話しているように見えます。ショートカットキーとしても使えるので、すぐに対応ができます。

便利機能4｜メンション

メンションは、チームでの作業で活躍する機能です。複数人で作業している場合、誰がどの部分を見ているか一目で分かります。また、特定の人に向けてコメントを残すこともできます。コメントに@の後に伝えたい人のアカウント名を入力することで、相手に通知がいく仕組みです。二度目からコメントに@と入力すると、最近やり取りした共同編集者を提案してくれるので、わざわざアカウント名（名前）を入力する必要がありません。

便利機能5｜ワシテープ

さまざまなデザインを作成していく中で、大事なアイデアをより目立たせたい場合や、オンライン会議時などにアピールしたい部分に印をつけたい場合などに役立つのがワシテープです。ワシテープは、よいアイデアを分かりやすくするデジタルマスキングテープ機能であり、たくさんのワードやデザインから探す必要がなく、目立ちます。日本語の和紙が語源となっており、日本人の私たちには親近感がある機能です。

Figmaを利用する際の2つの注意点

Figmaには便利な機能が多くあり、チームワークに適しているデザインツールです。URLさえ共有すれば同じデザインを編集でき、リアルタイムでコメントを残せたりするため、多くのデザイナーに人気です。しかし、日本ではまだ使用している人数が少ないこともあり、日本語に対応していなかったり、デザイン業界で最も多く使われているソフトに対応していないなどのデメリットがあります。ここでは、Figmaを使用する際に知っておきたい注意点を紹介します。

注意点1｜Adobe製品との連携機能がない

Figmaを利用する際に注意しなければならない点は、Adobe製品との連携機能がないことです。Adobe製品には、デザイン業界で最も多く使われているソフトであるイラストレーターやフォトショップなどが挙げられます。ベクター画像を編集するにはイラストレーターが、また画像の編集ではフォトショップが優れています。しかしFigmaは上記のツールと連携できないため使用できませんが、イラストレーターで作成したベクター画像をコピーしてFigmaにペーストすることができます。コピーした画像はFigma上で編集も可能です。ただしイラストによっては短縮化されてコピーされてしまい、ある程度の限界があります。

注意点2｜日本語に十分対応していない

Figmaはアメリカで開発されたツールなため、日本語対応していないというデメリットがあります。日本語を使用できるように設定することはできますが、日本語での解説やデフォルトで入っている日本語もあまりなく、使いづらいと感じる方も少なくはないでしょう。しかし、Figmaを利用する日本人が増えてきたこともあり、「Figma Japan」が創設され日本語での解説も増えてきています。今後さらに改善され、日本人にとっても使いやすい環境になることが期待されます。