初めてのFigma：初心者が知っておくべき基本的な使い方とヒント｜パソコン教室・パソコンスクールなら「パソコン市民講座」

デザインツールの中でも特に注目を集めている「Figma（フィグマ）」に興味を持っている初心者の方も多いでしょう。しかし、初心者にとっては、その多機能さゆえに使い方が少し難しく感じられるかもしれません。

しかし、Figmaの使い方をマスターすれば、ワイヤーフレームやプロトタイプの作成、さらにはグラフィックデザインやプレゼン資料の作成まで、多岐にわたる作業を効率的に進めることができます。この記事では、Figmaの基本的な使い方を丁寧に解説し、初心者が知っておくべきヒントを紹介します。今すぐFigmaを使いこなして、デザインの可能性を広げましょう！

Figmaとは？

Figma（フィグマ）は、デジタルデザインの分野で注目されているクラウドベースのデザインツールです。Figmaは、2016年に登場して以来、機能の進化とともに多くのデザイナーに支持されてきました。特にUI/UXデザインに特化しており、ウェブやモバイルアプリケーションのデザインプロセスを効率化するために開発されました。

Figmaの特徴は以下の通りです。

インターネット環境があれば、どこからでも作業を開始できる

Figmaはブラウザ上で動作するため、特定のOSに依存せず、インターネット接続さえあればどこからでもアクセスできます。これにより、リモートワークや国際的なチームでの共同作業にも非常に適しています。

コラボレーション機能

デザイナー、開発者、クライアントなど、プロジェクトに関わるすべてのメンバーが同時にデザインを閲覧し、編集することが可能です。リアルタイムでのフィードバックや修正が迅速に行えます。

無料プランがある

Figmaは無料プランも用意しており、個人や小規模チームでも気軽に導入できるのが魅力です。

常に最新バージョンを利用できる（ブラウザ版のみ）

Figmaは多くのデザインツールと異なり、インストールやアップデートの手間が不要で、最新の機能を利用できるのも利点の一つです。ただし、Figmaのデスクトップアプリを利用する場合は、更新が必要になることがあります。初心者の方は、ブラウザ版とデスクトップ版の両方を試してみて、自分の作業スタイルに合った使い方を見つけるのがおすすめです。

直感的なインターフェース

Figmaのインターフェースは直感的で、初心者でも比較的簡単に操作を覚えることができます。豊富なテンプレートやプラグインが提供されており、デザインのスタートをスムーズにするだけでなく、デザイン性を高めるのに役立ちます。さらに、デザインのバージョン管理やヒストリー機能も備えており、過去のデザイン状態への戻りも簡単です。

Figmaでできること

ワイヤーフレーム設計

ワイヤーフレーム設計は、Figmaを活用したデザインプロセスの初期段階であり、ユーザーインターフェースの構造と機能を視覚化するための重要なステップです。この段階では、ページのレイアウトやコンテンツの配置、ナビゲーションの流れをシンプルな図形や線で表現し、デザインの基盤を築きます。

Figmaでは、直感的な操作性と豊富なツールを駆使して、迅速かつ効率的にワイヤーフレームを作成できます。特に、フレームやグリッド機能を活用することで、一貫性のあるレイアウトを設計することが可能です。

また、Figmaのリアルタイムコラボレーション機能を利用することで、チームメンバーと同時に作業し、フィードバックを即座に反映させることができるため、コミュニケーションの齟齬を減少させます。

Figmaのコンポーネント機能を使えば、デザインシステムの一貫性を保ちながら、ワイヤーフレームから最終デザインまでスムーズに進行できるのが大きなメリットです。

Webサイトデザイン・グラフィックデザイン（バナー・SNS画像）作成

Figmaは、Webサイトデザインやグラフィックデザインの作成において高機能ツールとして広く使用されています。豊富なデザインテンプレートやコンポーネントライブラリを利用することで、効率的にデザインを進めることができます。初心者でも使いやすいテンプレートが多数用意されています。また、Figmaのプラグインを利用すれば、デザインに必要な機能を追加でき、作業をさらに効率化することが可能です。

また、Figmaのレスポンシブデザイン機能は、SNSプラットフォームごとに異なる画像サイズに対応する際に非常に便利です。異なるデバイスやプラットフォームに合わせて、デザインを簡単に調整できるため、複数のバリエーションを迅速に作成できます。

特にバナーやSNS画像のような短期間での更新が求められるデザインにおいては、Figmaのリアルタイムで共有する機能が非常に役立ちます。

プロトタイプ作成

プロトタイプとは、製品の試作品やモデルを指し、完成前にその動作や使い勝手を確認するために作成されます。

Figmaにおけるプロトタイプ作成は、デザインに画面遷移やアニメーションなどの動きを追加し、実際のWebサイトのように操作できる形にするプロセスです。これにより、デザインのアイデアをインタラクティブに視覚化し、ユーザー体験をシミュレーションすることが可能になります。これにより、デザイン段階でのユーザビリティテストが容易になり、最終的な製品開発前にフィードバックを受け取り、必要な改善を行うことができます。

Figmaのプロトタイピング機能は、画面遷移やインタラクションを視覚的に設定できるため、デザイナーはコードを記述することなく、リンクの追加やアニメーションの設定を直感的に行うことが可能です。例えば、ボタンをクリックした際の画面遷移や、スワイプアクションなど、ユーザーが実際にアプリケーションを使用する際の動作を再現できます。

プレゼン資料作成

Figmaは、プレゼン資料作成にもその機能を活用できます。

まず、フレームを使ってスライドのレイアウトを設計し、豊富な図形やテキストツールを用いて、情報を効果的に伝えるためのデザインを構築します。また、カラースタイルやフォントスタイルを一貫して使用することで、統一感のあるデザインを実現できます。

さらに、Figmaのコンポーネント機能を活用することで、再利用可能なデザイン要素を作成し、効率的にスライドを構成できます。プロトタイピング機能を用いれば、スライド間のナビゲーションやインタラクションをシミュレーションし、プレゼンの流れを確認することができます。

最後に、完成したプレゼン資料は、Figmaの共有機能を通じてチームメンバーやクライアントと簡単に共有でき、リアルタイムでのフィードバックを受け取ることが可能です。これにより、資料の質を高めるだけでなく、プレゼン準備のプロセス全体をスムーズに進めることができます。

Figmaの導入と初期設定

ここでは、Figmaのインストール方法から初期設定まで、基本的な導入手順を詳しく解説します。

Figmaのアカウント作成

Figmaを使い始めるには、まずアカウント作成が必要です。Figmaの公式サイトから「アカウント作成」ボタンをクリックし、メールアドレスまたはGoogleアカウントで簡単に登録できます。

Figmaの言語と環境の設定

Figmaは多言語に対応しており、設定＜アカウントからインターフェース言語を簡単に切り替えることができます。また、テーマカラー（ダークモードやライトモード）やフォントの設定が可能です。

さらに、ショートカットキーをカスタマイズすることで、作業効率を向上させることができます。Figmaのデフォルト設定を基に、頻繁に使用する機能にアクセスしやすいようにショートカットを設定し直すことを検討してください。これにより、デザインプロセス全体がスムーズになり、時間の節約にも貢献します。

最後に、ディスプレイ設定も重要です。高解像度のディスプレイを使用する場合、Figmaの画面表示を適切に調整することで、細部まで鮮明に確認できるようになります。これらの設定を適切に行うことで、Figmaをより快適に、そして効率的に利用することができるでしょう。

Figmaのプランと料金について

Figmaは、「無料プラン」と「有料プラン」から選択でき、用途やチーム規模に応じて最適なライセンスを選ぶことができます。

無料プラン「スターター」は、個人ユーザーや小規模なプロジェクトに最適です。まずはFigmaを試したい場合はこちらのプランから選ぶと良いでしょう。

有料プランには、「プロフェッショナル」「ビジネス」「エンタープライズ」の3種類があります。無制限のプロジェクト作成や大人数でのコラボレーションが可能となるほか、AIによるデザイン支援や詳細なログ管理、デザインシステム全体の効率的な運用が行えます。さらに、チームライブラリの共有やコンポーネント管理など、企業・プロフェッショナル向けの強力な機能が用意されています。

（キャプチャを入れる）

[参照] プランと料金 | Figma

さらに、Figmaは教育機関向けに特別なプランも提供しており、学生や教育者が無料で有料プランの機能を利用できるようになっています。これにより、教育現場でのデザイン学習がより手軽に行えるようになっています。

このように、Figmaのプランと料金体系は、個人から大企業まで、さまざまなユーザーのニーズに応じて柔軟に対応しています。Figmaは、成長に応じて柔軟にプラン変更ができるため、個人利用から大規模チームまで幅広く対応可能です。

Figma 基本的な使い方と流れ

ここでは、Figmaを初めて使う方がスムーズにデザインプロジェクトを進められるよう、基本操作の流れをわかりやすく説明します。

新規ファイルとフレームの作成

ダッシュボードの右上にあるアイコンをクリックします。この時、用途に合わせた適切なアイコンを選択しましょう。

アイコンの種類

Design：UI/UXデザイン、ワイヤーフレーム作成、モックアップ作成、プロトタイプ作成に使います。

FigJam：アイデア出しや企画を考えるときに使います。ホワイトボードのような役割です。

Figma Slides：プレゼンテーションツールです。

ここでは、「Design」をクリックした場合の操作をご説明します。

アイコンをクリックすると、新しいキャンバスが用意されます。この新しいファイルは、プロジェクトの全体像を設計するための基盤となります。

そして次に、デザインのレイアウトを決定するためにフレームを作成します。フレームは、他のデザインツールでいうアートボードに相当し、Webページやアプリ画面のサイズを設定するために使用されます。目的に合ったサイズやプリセットのデバイスフレームを指定しましょう。

フレームを作成するには、キャンバスで「F」キーを押すか、ツールバーの「Frame」から選択し、キャンバス上にドラッグしてサイズを決めます。Figmaは、デフォルトでいくつかの一般的なデバイスサイズを提供しており、これを利用することで迅速にデバイスに適したデザインを開始できます。

フレームの作成後、その中に図形やテキスト、画像などのコンテンツを配置し、デザインを具体化していきます。

さらに、Figmaではフレームをネスト（入れ子）することもでき、複雑なデザイン構造を整理するのに役立ちます。これにより、デザインの階層を明確にし、視覚的な整理が容易になります。

なお、Figmaはクラウド上で自動保存されるため、ログを意識することなく、常に最新データを安全に管理できます。

図形・テキスト・画像の配置

Figmaでは、図形、テキスト、画像を直感的に配置できる機能が充実しています。

まず、図形ツールを使用すると、四角形や円形、線などの基本的な図形を簡単に描画できます。これらの図形は、ドラッグアンドドロップで自由に移動したり、サイズを調整したりすることが可能です。さらに、スナップ機能を活用することで、他の要素に対して正確に配置することができ、デザインの整合性が保たれます。

テキストの配置においては、フォントの選択やサイズ変更、カラーの設定が容易に行えます。テキストボックスはリサイズ可能であり、文字の間隔や行間を調整することで、読みやすさや視覚的なバランスを整えることができます。また、テキストスタイルを保存しておけば、プロジェクト全体で統一されたフォーマットを維持することができます。

画像に関しては、Figmaに直接ドラッグアンドドロップすることで簡単に追加できます。画像はサイズ変更やトリミングが可能で、クリッピングマスクを使用して特定の形状に合わせて画像を切り抜くこともできます。これにより、デザインの中で画像を効果的に活用し、ビジュアルのインパクトを高めることができます。

Figmaでは、これらの要素をレイヤーとして管理することができ、各レイヤーの順序を変更することで、デザインの見え方を自在にコントロールできます。レイヤーのグループ化やロック機能を使用することで、複雑なデザインを整理しやすくなり、作業効率が向上します。

カラー・スタイルの設定

Figmaでは、色をパレットとして保存し、異なるデザイン要素に簡単に適用することが可能です。これにより、プロジェクトのどの部分でも同じ色を再利用できるため、デザインの修正や調整が必要な場合でも迅速に対応できます。

スタイルの設定も同様に重要です。スタイルには、テキストスタイルやエフェクトスタイルが含まれます。例えば、同じテキストスタイルを複数のページやコンポーネントに適用することで、フォントやサイズ、一貫した文字間隔を保つことができます。Figmaはこれらのスタイルを簡単に更新できるため、デザインの変更があった際にも素早く対応可能です。

また、これらのスタイルとカラーはチームライブラリに保存し、他のチームメンバーと共有することができます。

Figmaでのカラー・スタイル設定は、効率的なデザイン作業を実現するための基盤です。これにより、時間の節約とデザインの品質向上を高めることができるでしょう。

コンポーネントとインスタンス

コンポーネントとは、再利用可能なデザイン要素であり、ボタンやヘッダーなど、デザイン内で繰り返し使用するパーツを「マスター（親）」として登録し、効率的に管理・再利用する機能です。そうすることで、他のプロジェクトや画面で簡単に使用できます。

インスタンスは、コンポーネントのコピーであり、プロジェクト内で自由に配置できます。インスタンスは元のコンポーネントのプロパティを継承し、必要に応じて一部をカスタマイズすることも可能です。たとえば、ボタンの色やテキストを変更するといった小さな調整ができますが、全体のスタイルや構造はコンポーネントに依存します。この特徴により、デザインの一貫性を保ちながら、柔軟なカスタマイズが可能です。

さらに、コンポーネントを更新すると、すべてのインスタンスにその変更が自動的に反映されるため、デザインの修正やアップデートが容易になります。これにより、プロジェクト全体のデザインを最新の状態に維持しやすくなります。

コンポーネントとインスタンスの効果的な活用は、組織全体でデザインの一貫性を確保し、デザインのスピードアップと品質向上に貢献します。

Figmaのプロトタイプと共有

ここでは、Figmaでのプロトタイプ作成の基本と、デザインを他の人と効果的に共有する方法について解説します。

プロトタイピング機能の使い方

Figmaのプロトタイピング機能は、デザインをインタラクティブにし、ユーザー体験を視覚化するための重要なツールです。初心者はまず、デザイン画面をリンクでつなぎ、ボタンやアイコンにインタラクションを設定することから始めます。プロトタイプモードで要素を選び、クリックやホバーなどのトリガーを設定することで、シーン間の移行が可能になります。

さらに、アニメーションを追加して、画面間のトランジションをスライドやフェードインにすることで、直感的な操作感が得られます。プロトタイプは異なるデバイスでテストし、レスポンシブデザインを確認することもできます。完成後は、共有リンクでチームやクライアントとフィードバックを共有し、ユーザー体験を向上させるための貴重なインサイトを得ることができます。

コメントとフィードバック

Figmaのコメントとフィードバック機能を活用することで、チームメンバーやクライアントと効果的にコミュニケーションを取ることができます。デザインに関するフィードバックをリアルタイムで受け取ることができ、プロジェクトの進行状況に応じて即時に修正を加えることが可能です。

コメントは特定のデザイン要素に直接付けることができるため、具体的なフィードバックを提供するのが容易です。また、通知機能により、コメントが追加された際にチームメンバー全員に即座に知らせることができ、迅速な対応を促します。

さらに、コメントには解決済みのマークを付けることができるため、どのフィードバックがまだ処理中で、どれが完了したかを簡単に把握できます。

こうした機能により、Figmaはデザインプロセスを効率化し、チーム全体の生産性を向上させることに寄与します。特にリモートワーク環境においては、地理的な制約に関わらずスムーズなコラボレーションが可能となり、プロジェクトの成功に大きく貢献します。このように、Figmaのコメントとフィードバック機能は、単なるデザインツールを超え、包括的なプロジェクト管理の一部として機能するのです。

書き出しとエクスポート

Figmaは多様な書き出しオプションを提供しており、PNG、JPG、SVG、PDFなど、さまざまなフォーマットでデザインをエクスポートすることが可能です。これにより、デザイナーはプロジェクトの目的に応じた適切な形式でファイルを出力できます。

さらに、Figmaではエクスポート設定をカスタマイズすることができます。例えば、解像度やスケールを調整したり、特定のレイヤーやグループのみを選択してエクスポートしたりすることが可能です。

また、Figmaではエクスポート設定をプリセットとして保存することができるため、同じプロジェクトでの繰り返し作業を効率化することができます。これにより、何度も同じ設定を行う手間を省き、作業のスピードアップを図ることができます。

ファイル共有と共同編集

ユーザーはプロジェクトをクラウド上に保存し、リンクを共有することで、チームメンバーやクライアントと簡単にファイルを共有できます。このリンク共有は、ファイルのコピーを送る必要がなく、常に最新のデザインを共有できるため、効率的です。

共同編集機能は、リアルタイムでのコラボレーションを可能にします。複数のユーザーが同時に同じファイルにアクセスし、編集を行うことができるため、チーム全体での作業がスムーズに進行します。編集履歴は自動的に保存され、誰がどの変更を行ったかを簡単に確認できるため、誤操作による問題のリスクを軽減し、迅速な対応を可能にします。

また、コメント機能も充実しており、デザインに対するフィードバックを直接デザイン上に記入することが可能です。これにより、デザイナーと他の関係者間でのコミュニケーションが容易になり、誤解を減らすことができます。さらに、コメントの解決状況も追跡できるため、フィードバックの処理が効率的に行えます。

Figmaの便利機能

ここでは、Figmaの便利機能を紹介し、あなたのデザイン作業をスムーズにするためのヒントをお届けします。

コンポーネント活用のポイント

Figmaでのデザインシステム構築や効率的なUI設計には、コンポーネントの活用が欠かせません。

まず、コンポーネントを作成する際は、再利用性と拡張性を意識しましょう。共通のUIパーツをコンポーネント化し、デザインシステム内で統一的に管理することで、各プロジェクトにおける作業効率の向上に貢献します。また、「インスタンス」機能を活用することで、元のデザインを保ちつつ、プロジェクトごとの細かなカスタマイズも簡単に対応可能です。

プレビューモード

プレビューモードは、Figmaで作成したデザインを実際にどのように表示されるかを確認するための便利な機能です。デザインプロセスの中で、ユーザーがどのようにインターフェースと対話するかを視覚化できるため、特にプロトタイピング作業において大変役立ちます。

このモードを使用することで、デザインの各要素が正しく配置されているか、ユーザビリティの視点から問題がないかを事前にチェックすることが可能になります。さらに、プレビューモードでは、アニメーションやインタラクションの動作も確認できるため、デザインの完成度を高めることができます。クライアントやチームメンバーとデザインの意図を共有する際にも、動的な視覚表現が提供できるため、理解を深める助けとなります。

また、デザインを実際に体験することにより、フィードバックを受けやすくなり、修正が必要な箇所を迅速に特定することができます。こうした利点により、プレビューモードはデザインプロセスを効率化し、より優れたユーザーエクスペリエンスを提供するための重要なステップとなっています。

FigmaAIの基本

FigmaのAI機能は、デザインプロセスを効率化するために役立ちます。これにより、デザイナーは作業をよりスムーズに進めることができます。具体的には、FigmaAIは、プロンプトからのデザイン生成や既存デザインへの機能追加など、リアルタイムに近い形でデザインの提案や支援機能を提供します。

また、基本的なデザイン要素の自動生成や、パターン認識によるデザインの一貫性の維持も可能です。

さらに、ユーザーの操作履歴を学習し、次に必要となる操作を予測して支援することで、作業時間の短縮が期待できます。

[参照] FigmaデザインでのAIツールの使用

Figmaと他ツールの比較

デザインツールとFigmaは、どう違うのでしょうか？ここでは、Adobe XDやSketchなどと比較しながら、Figmaの特長や利便性について初心者の方にも分かりやすく解説します。

FigmaとSketchとの違い

Figmaはブラウザベースのツールであるため、インターネット環境があれば、どこからでもアクセス可能であり、チームメンバーがリアルタイムで共同作業を行うことができます。このコラボレーション機能は、リモートワークが一般的になった現代において、非常に重要なポイントです。一方、Sketchは主にmacOSで動作するデスクトップアプリケーションです。

また、Figmaは無料プランを提供しており、個人や小規模なチームにとって手軽に始められるのが特徴です。Sketchも試用版を提供していますが、基本的には有料モデルを採用しています。さらに、Figmaは最新の機能が自動的に更新されるため、新しいデザイントレンドやワークフローへの対応が容易になります。Sketchも定期的にアップデートを行っていますが、Figmaのクラウドベースの特性が、よりスムーズな更新を可能にしています。

他にも、インターフェースの直感性に関しても違いがあります。Figmaは使いやすさを重視したデザインがなされており、ユーザーが直感的に操作を学べるように設計されています。Sketchは多機能で柔軟なカスタマイズが可能ですが、その分学習曲線がやや急であると感じるユーザーもいます。

最後に、Figmaはデザインシステムやライブラリの共有機能に長け、組織全体で一貫したデザインを保つためのサポートも用意されています。

FigmaとCanvaとの違い

FigmaとCanvaは、どちらもデジタルデザインツールとして広く利用されていますが、用途や機能においていくつかの際立った違いがあります。

Figmaは特にUI/UXデザインに特化しており、プロトタイピングやデザインシステムの構築に強みを持っています。リアルタイムでのコラボレーション機能が充実しており、チームでの共同作業において非常に効率的です。また、Figmaはベクターグラフィックに基づいたデザイン作成が可能で、細かなデザインやインタラクションの設計に適しています。

一方、Canvaはより一般的なグラフィックデザインツールとしての位置づけが強く、バナー、ポスター、SNS用画像などの作成に向いています。テンプレートが豊富に用意されており、デザインの初心者でも直感的に使えるのが特徴です。Canvaはドラッグ＆ドロップ操作による簡単な編集が可能で、視覚的なコンテンツ作成において迅速な結果を得ることができます。

両者の違いは、ターゲットユーザーや利用シーンに大きく影響します。Figmaはプロダクトデザイナーや開発チームが集中的にデザイン作業を行うのに適し、Canvaはマーケティングチームや個人が手軽にビジュアルコンテンツを作成するのに適しています。さらに、Figmaは高度なデザイン機能を提供する一方で、Canvaはシンプルさと利便性を重視しています。このように、デザインの目的や必要な機能に応じて、両者を使い分けることが重要です。

著者の体験談

私は普段、Webディレクターとして活動しているため、業務の一環として「ワイヤーフレーム」を作ることがあります。

※ワイヤーフレームとは…Webサイトやアプリの制作において、ページ上の要素や構成（配置・レイアウト）を決める”設計図・骨組み”のことです。

昔から、ワイヤーフレームの作成にはMicrosoft PowerPointを使っていました。

過去には、ワイヤーフレームが作れるというオンラインツールを利用したこともありましたが、操作に慣れるまでに、それなりの時間を要しそうだったので、早々に使うのをやめてしまいました。なので、ずっとパワポひと筋でしたが、パワポにはパワポならではの課題もありました。

それは、キャンバスの広さが制限されるということです。例えば、トップページのワイヤーフレームを、パワポの1ページのシートにおさめきることができないことが多く、見やすさに欠けてしまうのです。

そんな中、約3年前に私が初めて利用したのが「Figma」でした。きっかけは、他の方がFigmaで作ったワイヤーフレームの修正をしたことでした。初めは探りながらの操作でしたが、作業が使い終わる頃（ワイヤーフレームの修正が終わる頃）には、ある程度の使い方が、なんとなくは分かるようになっていた気がします。それは、Figmaが直感的な操作性に優れ、分かりやすいインターフェースだったからこそでしょう。それ以降、今に至るまで、ワイヤーフレーム作成はすっかりFigmaにお世話になりっぱなしです。制作スタッフへの確認や伝達事項もチャット機能で一元化できるので、制作の進捗を管理する上でも有効だと感じています。

今や、ウェブサイト業界では、ディレクターもデザイナーもコーダーもFigmaを利用する機会が増えていると感じます。これからウェブ業界で頑張る初心者の方にもFigma利用をお薦めします。

（Webディレクター歴19年の著者より）

まとめ：初心者に向けたFigmaの使い方

Figmaの基本的な使い方を理解することで、効率的なデザイン作業を支援します。初めてFigmaを使うときは、まず基本操作をしっかりと身につけ、徐々にプロトタイピングや共有機能を活用することをおすすめします。特に、直感的なインターフェースと豊富なコラボレーション機能は、プロジェクトの進行をスムーズにしてくれるでしょう。

今後は実際にFigmaを使いながら、手を動かして自分のペースで理解を深めていくことが大切です。無料プランを活用して、まずは小さなプロジェクトから始めてみてください。慣れてきたら、他のデザインツールとの違いも体験し、自分に合った方法を見つけてくださいね。

ぜひ、Figmaの多彩な機能を活用して、クリエイティブな作品をどんどん作り出していきましょう！