【ツールNo.70】今更聞けない！Figmaをサクッと解説

この記事では、Figmaの使い方についてわかりやすく解説します。Figmaをまだ知らない方にも理解しやすいように、具体的な例や図解を交えながら説明しますので、ぜひご参考にしてください。

Figmaとは？

Figmaは、デザインツールの中でも特に人気のあるクラウドベースのUI/UXデザインツールです。ユーザーはブラウザ上で直接デザイン作業を行うことができ、リアルタイムでの共同作業が可能なため、チームでの効率的なデザイン作業ができます。

わかりやすい具体的な例

わかりやすい具体的な例1

たとえば、ウェブサイトを作成する際に、Figmaを使ってデザインを作成し、そのデザインをチームで共有してフィードバックをもらいながら進めることができます。これにより、作業の効率が大きく向上します。

このように、Figmaではデザインを簡単に共有し、意見を取り入れながら進めることができるため、チーム全体での作業効率を大幅に向上させることができます。

わかりやすい具体的な例2

別の例として、Figmaはプロトタイピングツールとしても優れており、インタラクティブな画面遷移を簡単に作成することができます。これにより、クライアントに対して実際の動きが分かりやすく伝えることができます。

プロトタイピングを使うことで、デザイン案をクライアントに具体的に示し、意図をしっかりと伝えることができ、修正が容易になります。

Figmaはどのように考案されたのか

Figmaは、ウェブデザインの効率化を目指して、2012年にアダム・サルツマン（Adam Saltzman）とダイアナ・ファング（Diana Fang）によって考案されました。従来のデザインツールが複数のソフトウェアを必要とし、共有が難しかった問題を解決するため、Figmaは「クラウドベース」という新しいアプローチを取り入れ、誰でもインターネット越しにデザインを共有できるようにしました。

graph TB
A[従来のツール] --> B[複数ソフト使用]
B --> C[共有が難しい]
A --> D[Figma開発]
D --> E[クラウドベース]
E --> F[リアルタイムで共有]
[/mermaid>

考案した人の紹介

Figmaを考案したのは、アダム・サルツマンとダイアナ・ファングです。彼らはそれぞれデザインとソフトウェア開発のバックグラウンドを持ち、業界の課題を解決するためにFigmaを開発しました。アダムは元々Webデザインの専門家であり、ダイアナはソフトウェアエンジニアとして活躍していました。

考案された背景

Figmaは、デザイナーと開発者の間で起こる「コミュニケーションのズレ」や「ツール間の互換性の問題」を解決するために考案されました。従来のデザインツールでは、デザインファイルを共有したり、リアルタイムでフィードバックを受け取ることが難しく、作業の効率が悪かったため、クラウド上でデザインが共有できるFigmaが必要とされました。

Figmaを学ぶ上でつまづくポイント

Figmaを学び始めたばかりの人は、初めて使うツールに馴染みがないため、操作方法やインターフェースに戸惑うことがよくあります。特に、レイヤーやコンポーネントの使い方、インタラクションの設定に関してつまづくことが多いです。

Figmaの構造

Figmaは、プロジェクトを構成する「ファイル」や「ページ」、「フレーム」を管理するための構造を持っています。ユーザーは、これらの要素を使い分けることで、複雑なデザイン作業を整理して行うことができます。

graph TD
A[ファイル] --> B[ページ]
B --> C[フレーム]
C --> D[アートボード]
D --> E[コンポーネント]
[/mermaid>

Figmaを利用する場面

Figmaは、WebデザインやUI/UXデザイン、プロトタイピングを行う際に広く利用されます。

利用するケース1

例えば、ウェブサイトのUIデザインを行う際にFigmaを利用すると、デザインをチームメンバーとリアルタイムで共有し、フィードバックを受けながら進めることができます。このため、修正や改善がスムーズに進行します。

graph LR
A[UIデザイン] --> B[リアルタイム共有]
B --> C[フィードバック]
C --> D[修正・改善]
[/mermaid>

利用するケース2

Figmaは、プロトタイプを作成する場面でも役立ちます。たとえば、インタラクティブな画面遷移をFigmaで簡単に作成し、クライアントにデモンストレーションすることで、視覚的に魅力的な提案ができます。

graph LR
A[プロトタイプ作成] --> B[インタラクション設定]
B --> C[デモンストレーション]
[/mermaid>

さらに賢くなる豆知識

Figmaには、コメント機能やアニメーション機能などがあり、デザインだけでなく、プロジェクト全体のコラボレーションをスムーズに進めるためのツールが備わっています。

あわせてこれも押さえよう！

Figmaの理解において、あわせて学ぶ必要があるツールについて5個のキーワードを挙げて、それぞれを簡単に説明します。

• Adobe XD

Adobe XDは、UI/UXデザインに特化したデザインツールで、Figmaと同様にプロトタイプ作成やデザイン共有が可能です。

• Sketch

Sketchは、主にMacユーザーに人気のUIデザインツールで、Figmaと同じようにデザインを作成し、共有することができます。

• InVision

InVisionは、デザインのコラボレーションやプロトタイプ作成をサポートするツールで、Figmaと併用することもできます。

• Framer

Framerは、インタラクティブなUIデザインを作成できるツールで、アニメーションの設定が簡単に行えます。

• Zeplin

Zeplinは、デザイナーと開発者の間でデザインデータを共有し、作業を効率化するためのツールです。

まとめ

Figmaは、デザイン作業を効率化し、チームでの共同作業をスムーズに行うための強力なツールです。プロトタイピングやUIデザインにおいても非常に便利で、多くのデザイナーに愛用されています。