Figma（フィグマ）とは｜使用するメリットと導入方法を詳しく解説

2023/12/13

プラットフォーマー

多くのデザイナーに利用されているFigma（フィグマ）とはどんなツールでしょうか？使い心地や料金は、どんな人に向いてるのか。ここでは、Figmaを使うメリットや導入方法を解説します。また、仕事の効率化が図れるFigmaの便利な機能も紹介します。

Contents

Figmaを活用して作業の効率化を図ろう

Figma（フィグマ）というワードを聞いたことはありますか？Figmaは、「Adobe XD」や「Sketch」と並ぶ人気のUIデザインツールです。2006年にリリースされ、近年日本でも利用している方が増えてきています。今回は、Figmaとはどのようなツールであり、使い心地や利用料金などを解説します。またFigmaの導入方法や、効率的に作業ができる便利な機能を紹介します。

Figmaとは

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

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

デザインコラボレーションツール

Figmaは、アメリカで誕生したブラウザ上で簡単にUIデザインやWebデザイン、グラフィックデザインができるツールです。PowerPointがわりにもなるため、資料作成にも使えます。アップデートを繰り返し行い、機能性がアップしているので、SketchやAdobeXDと並んで人気があります。1つのプロジェクトにおいて、さまざまな関係者が共同作業できるように、チーム間でデザイン共有したり、コメント機能が搭載されています。Figmaは、情報共有やコミュニケーションを円滑に進めることができるデザインコラボレーションツールです。

基本無料で使える

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

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として君臨しました。ソフトをインストールする必要がなく、インターネットに繋がるデバイスさえあれば、世界のどこからでも同じファイルにアクセスできます。

デザインのシェアができる

一般的なデザインツールは、デザイナー一人が全てを管理し、デザイン制作後エンジニアにファイルを転送して共有します。またネイティブアプリをダウンロードしなければならないツールがほとんどです。Figmaはアプリをダウンロードせずにブラウザ上でやり取りができます。アカウントさえ持っていれば、違うデバイス上からでもログインでき、またURLを共有すればチームメンバー全員が同じデザインを編集できます。常に最新のデザインがリアルタイムで更新されるため、デザインを送り合う必要がありません。

作業の効率化が図れる

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

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にある便利な機能

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

オートレイアウトAuto Layout

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

コンポーネントComponent

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

カーソルチャット

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

メンション

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

ワシテープ

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

Figmaの利用する際の注意点

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

Adobe製品との連携機能がない

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

日本語に十分対応していない

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