【2024年版作成】Figmaの使い方を解説！

Figmaとは、Webサイトやアプリケーションといったデジタル製品に用いる、デザインを作成するツールです。ひとくちに「Figma」といっても「Figmaデザイン」「FigJam」の2種類があり、Figmaデザインでは主にデザイン系の工程を担います。一方で、FigJamは複数人同時にアイデアを書き出せたり、付箋を貼ったり、図を用いて説明したりと、オンライン上でスムーズにコミュニケーションを取ることができる特徴があります。

なお、機能数が多く、1つのツールでさまざまな役割を完結できるため汎用性が高いツールといえるでしょう。

ここからはFigmaの具体的な使用方法を解説します。Figmaはブラウザ版とアプリ版がありますが、いずれも登録は簡単に行えます。

①アカウント登録

まずは公式ページにてFigmaのアカウントを作成「Try Figma for free」または「無料で始める」をクリックしましょう。次に、メールアドレスとパスワードを設定し、名前と利用目的を設定していきます。そして、すべてのチェックボックスをチェックしてアカウントの登録が完了します。なお、Googleアカウントをお持ち場合は連携して登録も可能です。

②アプリケーションのダウンロード

Figmaはブラウザだけでなく、デスクトップアプリケーションもあります。とくに、デザイン作業については、圧倒的にデスクトップアプリケーションの方が挙動などスムーズなのでおすすめです。アプリケーションを活用する場合は、公式ページから「Desktop App」を選択し、対応するOSを選んでダウンロードしましょう。

なお、ダウンロード後はそのままブラウザからアプリにアクセスし、ログインできます。参考までに、先にアプリケーションをダウンロードしてからアカウントを作ることも可能です。こちらのほうがスムーズに利用まで進められるでしょう。

③新規ファイルの作成と初期設定

登録が済んだら初期設定を行い、実際に使用してみましょう。なお、デフォルトは英語表記なため、わかりづらい場合は設定(Settings)>言語(Language)から、日本語に変更しましょう。

Figmaの基本概念として、アカウントの下には「チーム」が存在します。「チーム」の中には複数の「プロジェクト」が存在し、「プロジェクト」の中には複数の「ファイル」が存在します。また、「ファイル」の中には複数の「ページ」が存在しています。

Webページのデザインを作成するためには、デパートでは以下のように作成をしています。

• チームを作成する

クライアントごと、などの粒度で作成

• プロジェクトを作成する

要件/案件ごと、などの粒度で作成

• デザインファイルを作る

成果物の種類ごと、などの粒度で作成
※基本的には1サイト1ファイルで作成しています。

ここではコンテンツのデザイン作成にFigmaを利用するメリットとデメリットを紹介します。一度慣れると利便性が高いFigmaですが、事前にデメリットも把握しておきましょう。

メリット①ブラウザとアプリの両方で操作できる

Figmaはパソコンにアプリをダウンロードしなくても、ブラウザ上で使用可能です。そのため、アプリケーションがパソコンの容量やメモリを圧迫する心配がないメリットがあります。 通常、デザインツールは動作が重いものが多く、パソコンのスペックがある程度求められます。しかし、Figmaは動作が軽く、スペックがあまり高くないパソコンでも使いやすいでしょう。なお、インターネット環境そのものは整える必要があります。

メリット②ファイルを共有しながら編集できる

Figmaは複数の編集者と同時に作業しながらデザインを作れます。リアルタイムで相手の編集が常に自動反映されるため、相手と物理的に距離があっても変更の上書きによる齟齬が生まれにくいでしょう。 デザイン系の仕事で頻繁に行われるファイルの送付をいちいち行う必要がなく、相手には共有URLを送るだけで完結できる点が嬉しいポイントです。また、コメントを残す機能もあるため、コーディングのように効率的な情報の共有が可能になるでしょう。

メリット③アプリのバージョン管理や更新に強い

Figmaで編集したデータはバージョン管理がされるため、更新用にバックアップ用ファイルを増やす必要がありません。また、オートレイアウト・コンポーネント・スタイルといったデザインを更新する際は簡単に編集できる機能があるため、レイアウトの大枠を保存し、作業を効率化できます。 デザインの現場では似た系統のデザインを使い回す傾向があるため、これらの機能があることで業務の引き継ぎや共有、レイアウトの大規模な作り直しにかかる工数を大幅に削減可能です。

デメリット①ヒストリー機能が保存されるのは30分ごと

現行のバージョンだとデザインの修正を行えるのは30分ごとのデータのみであるというデメリットがあります。細かいヒストリー機能は搭載されていないため、短い工程の修正をやり直すのは難しいでしょう。なお、無料プランでもヒストリー機能はありますが、保存できるのは30日間分のみのためデータの扱いには注意が必要です。

デメリット②エクスポートに対応するファイル形式が少ない

Figmaで対応しているエクスポート形式はPNG・JPG・SVG・PDFの4種類のみです。エクスポートできるファイル形式が少ない分、ほかのツールから引き継いでFigmaで作業するといった形が難しいでしょう。 たとえば、自社内や個人の作成ではなく、外部から依頼を受けてデータを編集・納品する形式の場合は、ほかのツールの利用も検討したほうがよい可能性もありますので、必ず事前に確認を行いましょう。

デメリット③本格的な機能を使うには有料プランが必要

Figmaは簡易的なデザインの作成であれば無料プランで問題ありませんが、本格的な機能を使ってデザインを作るのであれば有料プランを契約する必要があるでしょう。 また、無料プランだとチーム内のファイル数が最大3つ、チーム内ページ数が最大3つ、プラグインの利用も一部制限される点も懸念点として挙げられます。効率的かつクオリティが高いコンテンツを求めるなら、有料プランも検討しましょう。 なお、2024年8月時点のプランは「スターター（無料）」「プロフェッショナル（月額2,250円）」「ビジネス（月額6,750円）」「エンタープライズ（月額11,250円）」の4つです。

ここではFigmaを利用する際に、あわせて使いたいおすすめのプラグインを3つ紹介します。プラグインを組み合わせて使うことで、ぐっと効率的に質の高いデザインを行えるでしょう。

Iconify

「Iconify」は60以上のアイコン配布サイトで提供されている素材を手軽に利用できるプラグインです。デザインの仕事ではアイコンを使用するケースも多く、なかにはライセンスが必要なものもあり非常に手間が多いのが現状です。しかし、Iconifyを使えば「素材サイトからライセンスを購入→デザインをダウンロード→Figmaにインポート」の手間が不要で、作業をスムーズに行えます。

Find component

「Find component」は、選択したコンポーネントが、どこで仕様されているかを検出できるプラグインです。デザインの景観を損なわないよう、かつ効率よく実装進めるために、近年のWebデザインではコンポーネントというパーツを定義し組み上げる制作が一般的になっています。
Find componentはそのコンポーネントがどこで使われているのかを検出し、一気に選択して置き換えることができる優れものです。デザイン制作でAdobe XDを使っていた方には、探していた機能ではないでしょうか。

LottieFiles

「LottieFiles」は簡易的なアニメーションを作成できるプラグインです。アカウント作成が必要なものの、数秒程度のミニマムなアニメーションを作れるため、デザインにオリジナリティを持たせられるでしょう。

近年はWebサイトの差別化が難しく、試行錯誤するデザイナーが多い傾向です。しかし、LottieFilesを活用すると、オープニングやバナーといった部分にアニメーションをつけることで目立たせられるでしょう。Figmaはデフォルトの機能だと、本格的なアニメーションを作ることはできないため、凝ったデザインを作るのであれば必須のプラグインです。

Figmaはコンテンツのデザインを効率化してくれるおすすめのツールです。自社のデザイン工数がかかっている場合や、デザイナーごとにクオリティが異なる場合にぜひ導入を検討しましょう。しかし、Figmaは使い慣れるまである程度数をこなす必要があります。自社で操作に悩みを抱える場合や、アドバイスを求める場合は制作会社への相談もおすすめです。

株式会社デパートでは、Figmaの使用方法はもちろん内製強化や教育など、Webサイト制作のサポートを様々な角度で行っております。内製化で不安を抱えることがありましたら、ぜひお気軽にご相談ください。