フリーランス求人を探すFigma（フィグマ）とは？特徴や導入方法、メリットやデメリットを解説
Figma（フィグマ）とはUIデザインやワイヤーフレームの作成に便利なデザインツールです。
本記事では初心者でも手軽に始められるFigmaの使い方を解説していきます。
目次
Figma（フィグマ）とは？
Figmaは、2016年にアメリカでリリースされた、WebサイトやアプリのワイヤーフレームやUIを作成するためのブラウザベースのデザインツールです。大企業であるGoogleやMicrosoftなどでも利用されており、初心者からプロまで幅広いユーザーが活用しています。ブラウザ上で利用できるFigmaは、使いやすくて簡単にデザインできるため、チームでの作業にも向いています。
Figma（フィグマ）の特徴
Figmaは、Web制作用のデザインツールとして、さまざまな機能があるのが特徴です。オープンなデザインフォーマットを採用しており、他のツールで利用可能なファイル形式で出力・保存することができます。また、豊富なプラグインエコシステムを提供しているため、ユーザーがさまざまな機能を追加してカスタマイズ可能です。Figmaは、WebデザインやUI/UXデザイン、プロトタイピングなどの作業を効率的におこなえるツールです。
Figmaを使ってできる事
デザインの世界は常に変化しており、新しいトレンドや技術、ユーザーのニーズに応えるためのツールが必要です。Figmaは、そのようなニーズに応えるために開発されたデザインツールで、できることは多岐にわたります。ここでは、Figmaを使用することで、具体的に何ができるのかご紹介します。
ワイヤーフレームの制作
Figmaでワイヤーフレームを作成する方法は、大きく分けて「一からデザインする」と「プラグインを利用する」の二つがあります。一からデザインするには、Figmaの標準機能を使って、自分でワイヤーフレームの要素を作成・配置・編集します。この方法では、フレームの作成、シェイプ、テキスト、画像などの基本的な操作を覚えることが必要です。
プラグインを利用する方法では、Figmaのコミュニティで提供されているワイヤーフレーム用のテンプレートや素材を使って、ワイヤーフレームを作成することが可能です。自分でデザインする手間を省いて、既に用意された要素を配置するだけでワイヤーフレームを作成できます。プラグインは、無料のものから有料のものまで、さまざまな種類があるため、自分の目的や好みに合わせて選びましょう。
ホームページやアプリのプロトタイプの作成
ホームページやアプリのプロトタイプを作成するときには、Figmaのプロトタイプ機能を活用することができます。この機能は、実際のデザインを使用して画面遷移やインタラクティブな要素を再現することが可能です。例えば、ボタンをクリックしたときにどのページに移動するかを実際の動作で示したり、メインビジュアルにアニメーションを追加することもできます。また、画面の一部に別の要素を重ねて表示する機能もあり、モーダルウィンドウやドロワーメニューなどの作成に使えます。
グラフィックデザインの作成
Figmaには、ペンツールやエフェクトなど、高度なグラフィックデザインをするための機能が備わっています。プラグインを使うことで、ノイズやスキュー、3D押し出しなどの表現ができます。フレームやコンポーネントなどの機能で、デザインのレイアウトやバリエーションを効率よく管理することが可能です。また、スマートアニメートなどのプロトタイプ機能で、動きのあるグラフィックを作成できます。
SNSへの投稿用の画像作成
SNSへの投稿用の画像作成にもFigmaを利用できます。フレーム機能を使って、画像のサイズやレイアウトを簡単に設定できるため、投稿するSNSに合わせて画像を作成できるのが特徴です。画像や動画をドラッグアンドドロップで配置でき、初心者でも操作が簡単です。ペンツールやエフェクトなどで、オリジナルのグラフィックを作成可能です。プラグインを使って、アイコンや写真などの挿入もできます。
プレゼンテーション資料の作成
プレゼンテーション資料が作成できるのもFigmaの強みです。Figmaではスライドを「フレーム」と呼ばれる単位で作成し、一つのファイル内に複数のフレームを並べられます。フレームは自由にサイズや位置を変更できるため、資料全体のレイアウトやデザインの統一感を確認しながら調整することが可能です。また、プラグインを使って、無料の写真素材やアイコンを検索して配置できます。
Figma（フィグマ）のメリット
Figmaは、デザイナーや開発者にとって欠かせないツールです。ブラウザ上でデザインやプロトタイピングをおこなえるだけでなく、クライアントとのコミュニケーションもスムーズにできます。ここでは、Figmaのメリットについてご紹介します。
インストール不要で手軽に利用可能
Figmaはブラウザ上でデザインできるプラットフォームで、インターネットに接続されたパソコンやタブレットなどからアクセスできます。そのため、ソフトウェアのインストールやアップデートの手間が不要です。WindowsやMacなどのOSに関係なく利用できます。データの保存や共有もクラウド上で自動的におこなわれるため、作業環境に依存しません。
複数人で共同編集できる
複数人で同時に編集できるのは、Figmaの大きなメリットです。インターネットに繋がっていればアクセスできるため、チームがリアルタイムでデザインファイルを共有し、コメントやフィードバックをやりとりできます。チームメンバーのカーソルや編集内容がリアルタイムで表示されるため、作業の進捗や意図が伝えやすいです。
同じファイルを同時に編集できるため、作業の効率化やコラボレーションが可能となります。また、FigmaはWeb上で動作することから、チームメンバーが異なるOSやブラウザを使っていても互換性の問題が起きません。
デザイン制作に必要なツールや機能はほとんど搭載
Figmaには、デザイン制作に役立つ機能が豊富に備わっています。例えば、四角形や円、星などの基本的な図形を描画できる図形描画ツールがあります。ペンツールやブラシツールを使って自由に線や曲線を描くこともでき、オリジナルグラフィックの作成が可能です。ワイヤーフレームやチャートなどの無料テンプレートを利用できるのも特徴的です。
また、アセットと呼ばれる機能を使って、色やフォント、アイコンなどのデザイン要素を保存して再利用できます。
デザイナーに限らず様々な職種の人の利用が可能
デザイナーに限らず、マーケティング担当やエンジニアなど、さまざまな職種の人が利用できます。Figmaでは、URLを共有するだけで、デザインファイルをリアルタイムで閲覧や編集が可能です。コメント機能やプレゼンテーション機能などもあり、デザインに関するコミュニケーションがスムーズにおこなえます。例えば、マーケティング担当が、デザイナーが作成したデザインファイルにコメントを付けて、意見や要望を伝えることができます。
こまめな保存が不要
Figmaでは、作業中のファイルは自動的にクラウドに保存されます。そのため、手動で保存する必要がありません。パソコンが故障してもデータが消失せず、安心して作業できます。作業中に保存する手間がないため、デザインに集中することが可能です。また、クラウド上のファイルは暗号化されており、第三者による不正アクセスや改ざんのリスクも低減されます。
無料で使える
Figmaは無料で利用できます。Figmaには、無料のプランと有料のプランがありますが、無料プランでもデザインに必要な機能がほとんど揃っています。誰でも気軽にデザインを始められて、小規模チームや個人での利用にも十分な機能があるのが特徴です。予算の制約を気にせずにデザインの品質を高められます。また、デザインの学習や練習にも利用することが可能です。
Figma（フィグマ）のデメリット
Figmaは、多機能で使いやすいデザインツールとして多くのユーザーに支持されています。チームでリアルタイムに共同作業ができるのは、デザイン制作において大きな魅力です。しかし、Figmaには欠点も存在します。ここでは、Figmaのデメリットについてご紹介します。
ヒストリー機能がない
Figmaには、ヒストリー機能がありません。通常、ヒストリー機能は、過去の作業手順を一覧表示してくれるため、必要な箇所に素早く戻ることができます。ヒストリー機能は、デザインを変更したり削除したりした場合に元に戻せることから、頻繁に活用される機能だと言えます。そのため、ヒストリー機能が無いことに不便を感じる人もいるようです。
ガイド線固定の機能がない
Figmaでは、ガイド線はフレーム内でのみ使用できますが、フレームの範囲外にスクロールすると、ガイド線が見えなくなってしまいます。これは、デザインの整合性や一貫性を保つのに不便な場合があります。ガイド線を固定する機能がないと、複数のフレームを同じ基準で配置するのが難しくなってしまうのです。
例えば、Webサイトのデザインで、ヘッダーやフッターなどの共通の要素を複数のページで揃えたい場合です。ガイド線固定の機能があれば、画面全体にガイド線を引いて、ガイド線に合わせて配置できます。しかし、Figmaでは、それぞれのフレームにガイド線を引く必要があり、手間がかかってしまいます。
ファイル出力形式が少ない
Figmaのファイル形式は、PNG、JPG、SVG、PDFの4つしかありません。他のデザインツールに比べて、ファイル形式の選択肢が少ないです。ファイル出力形式が少ないと、ファイルサイズや画質などの設定を細かく調整できないデメリットが生じます。
例えば、PNGやJPGの場合、圧縮率や透明度などのオプションがありません。また、PDFの場合、フォントの埋め込みやページ設定などのオプションもありません。これらの設定は、エクスポートした後に別のソフトウェアでおこなう必要がありますが、それには時間や手間がかかりますし、画質の劣化やデザインの崩れなどのリスクもあります。
Adobe製品との連携機能がない
Figmaは、Adobe製品との連携機能がありません。ファイルを変換するツールを利用すれば、ファイルのインポートは可能ですが、見た目や設定が異なることがあり、完全な互換性は期待できないかもしれません。また、Figmaでは一般的なフォーマットであるPhotoshopなどのファイル形式を読み込むことができません。Adobe製品のファイル形式を使用してデータをやり取りする場合は、他のツールを併用する必要があります。
日本語対応が不十分
Figmaは、もともと海外製品であるため、日本語への対応が完全ではありません。公式サイトやヘルプセンター、コミュニティなどの情報源も英語が主であり、日本語の情報が少ないです。そのため、使い方やトラブルシューティングに慣れるまでに時間がかかる可能性があります。とくに、Figmaのプラグインや拡張機能などは、ほとんどが英語のままであり、英語に不慣れな人は、操作や理解に苦労するかもしれません。
Figma（フィグマ）導入の流れ
Figmaは、デザインの作成からプロトタイプの作成、フィードバックのやりとりまで、一つのツールで完結できます。Figmaを使えば、デザインの品質やスピードが向上し、チームワークが強化されるのが特徴です。では、Figmaを導入するには、どのような手順が必要なのでしょうか？ここでは、Figmaの導入方法についてご紹介します。
ブラウザ版かアプリ版の選択
FigmaはWebブラウザ上で動作するデザインツールですが、アプリ版も用意されています。ブラウザ版は、インストール不要で手軽に利用できます。Windows、Mac、Linuxなどの異なるプラットフォームで利用できるのが特徴です。
ただし、ローカルフォントを使用したい場合は、フォントインストーラーが必要になります。デスクトップアプリ版は、Windows、Macの二つのOSに対応しています。ブラウザ版とほとんど同じ機能を持ちますが、オフラインでも作業できるのがメリットです。ローカルフォントも自動的に認識されます。モバイルアプリ版は、iOSとAndroidに対応しています。スマホで見たときのデザインやプロトタイプの動作を確認できる便利なツールです。
公式サイトでアカウント作成
Figmaを使うには、公式サイトでアカウントを作成する必要があります。アカウント作成の流れは以下のとおりです。
1.Figmaの公式サイトにアクセスします。
2.右上の「無料で始める」ボタンをクリックします。
3.Googleアカウントを使用するか、新規にメールアドレスとパスワードを入力するかのどちらかを選択します。
4.入力したメールアドレスに認証メールが送られるため、メール内容に従い認証をおこなうとアカウントの作成が完了します。
日本語の有効化
ブラウザ版では、右上のアカウントアイコンをタップして、「設定」を開き、そこから「言語」を選択して日本語に変更できます。デスクトップ版の場合は、右下のサポートアイコン（？）をクリックし、「言語を変更」から日本語に変更することが可能です。モバイル版は、使用中のデバイスの言語設定を変更して日本語にすることができます。また、Figmaアプリ内で変更することも可能で、「設定」からFigmaに移動し、希望する言語を選択するだけです。
Figma（フィグマ）の便利な機能
Figmaは、オンラインでデザインができる、革新的なツールです。デザインに役立つ便利な機能が豊富に備わっており、デザインの品質を高めるだけでなく、効率的に作業を進めることができます。ここでは、Figmaの便利な機能についてご紹介します。
Auto Layout(オートレイアウト)
Auto Layoutは、Figmaにおいて要素（画像やテキストなど）を自動的に整列させ、配置や間隔を調整する機能です。一度余白や間隔を設定すれば、中の要素のサイズが変わってもレイアウトが保持されるため、非常に便利です。また、要素の数が増えても、コンテナの幅で中の要素を自動的に折り返すこともできます。この機能は、レスポンシブデザインやカード形式のレイアウト、ボタンなどのUI要素を作成するのに適しています。
Component(コンポーネント)
Componentとは、デザインの基本要素をテンプレート化したものです。インスタンスというコピーを作って、デザインに使います。コンポーネントを変更すればインスタンスも一緒に変わるため、修正作業が楽になり、また、デザインの一貫性も保てます。コンポーネントは、別のコンポーネントを入れる（入れ子）ことも可能です。入れ子にすると、基本のスタイルを継承しながら、パターンやバリエーションを作れます。基本のコンポーネントを変えれば、入れ子のコンポーネントも変わるのが特徴です。
カーソルチャット
カーソルチャットとは、Figmaのファイルで他のユーザーとライブで一時的なメッセージをやり取りできる機能です。他のユーザーの注意を引いたり、ファイルの内容に関するディスカッションなどができます。デザインにフィードバックを与えるときなどに便利です。例えば、「このボタンの色は変えた方がいいと思いますか？」や「このロゴはどうやって作りましたか？」などの質問を気軽にできます。
メンション
Figmaのメンションは、コメント内で@記号を使って他のユーザーに通知を送る機能です。メンションすると、相手にメールやアプリ内通知が届きます。メンションは、フィードバックや指示を伝えたり、デザインの特定の部分に注意を引いたりするのに便利です。例えば、「@鈴木さん、このアイコンの意味は何ですか？」や「@田中さん、このデザインについてご意見をお聞かせください。」といった使い方ができます。
ワシテープ
ワシテープとは、Figmaで使えるデジタルマスキングテープの機能です。ワシテープは、日本の和紙が語源となっており、色や柄が豊富で、デザインが美しいだけでなく、機能的にも優れています。ワシテープは、ボードやファイルをデコレーションしたり、アイデアやコメントを目立たせたり、ワイヤーフレームやプロトタイプにアクセントを加えたりすることができます。遊び心と実用性を兼ね備えた機能で、自由な表現が可能です。
バージョン管理
バージョン管理は、制作時に保存したバージョンを記録しておく機能です。ファイルの以前の状態を参照したり、必要に応じて特定の段階に戻したりすることができます。Figmaでは、30分間ごとに自動的にファイルが保存されます。過去のデザインデータを確認し、チームで変更内容について議論したりすることが可能です。
Figma（フィグマ）の利用料金
Figmaには、スターター、プロフェッショナル、ビジネス、エンタープライズの4つのプランがあります。それぞれのプランの特徴と違いは以下のとおりです。
・スターター（無料）
基本的なデザイン機能やプロトタイピング機能が使えますが、チーム内で作成できるプロジェクトやファイルの数に制限があります。また、ファイルの履歴は30日間しか保存されません。
・プロフェッショナル（月額1,800円、学生や教育関係者は無料）
スターター機能に加えて、チーム内で無制限のプロジェクトやファイルを作成できます。また、チームライブラリや高度なプロトタイピング機能、開発モードなどを利用することができます。ファイルの変更履歴も無制限に保存可能です。
・ビジネス（月額6,750円、開発者モードのみの場合は月額3,750円）
プロフェッショナルの機能に加えて、組織全体のライブラリやデザインシステムアナリティクス、ブランチ機能とマージ機能、プライベートプラグインなどの機能が使えます。一元管理機能やシングルサインオンなどの管理・セキュリティ機能も充実しているのが特徴です。
・エンタープライズ（月額11,250円、開発者モードのみの場合は月額5,250円）
ビジネスの機能に加えて、高度なテーマ設定や可変用のREST API、ワークスペースごとのデフォルトのデザインシステムなど、さまざまな機能が利用できます。REST APIを使用したワークフローの同期や専用ワークスペース、ゲストアクセス管理などの機能もあります。
まとめ
Figmaは、インストールやアップデートの手間がなく、チームで共同作業ができるツールです。幅広いデザインに対応しており、便利な機能も豊富に揃えています。Figmaが気になっている人は、まずは無料プランで試してみてはいかがでしょうか。
AIを仕事にするためのキャリアノウハウ、機械学習・AIに関するTopics、フリーランス向けお役立ち情報を投稿します。
