Figma

tool beginner

ブラウザ上で複数人が同時に共同編集できる、Webサイトやアプリ用のUI/UXデザイン設計ツール。

概要（サマリー）

Figma（フィグマ）は、Webサイトやスマートフォンアプリの画面レイアウト（UI/UX デザイン）を設計・制作するためのデザインツールである。

ブラウザ上で動作し、同じデザイン画面を複数人で同時に、リアルタイムに共同編集できるのが最大の特徴である。

詳細解説

Figmaとは何か

Figmaは、モダンなWeb制作やアプリ開発において、多くのチームで使われている代表的なデザインツールである。

デザイナーが画面の見た目を作るだけでなく、企画者がワイヤーフレーム（画面の骨組み）を作ったり、エンジニアがデザインから余白やフォントの情報（CSS）を読み取ったりと、プロダクト開発に関わる全員が共通で使うハブとして活用されている。

Figmaの特徴と選ばれる理由

Figmaが多くのチームに選ばれている理由は、主に以下の3点である。

インストールの壁がない: ブラウザ（Google Chromeなど）があれば、WindowsでもMacでも、あるいは Chromebook でもすぐに起動して作業ができる。
リアルタイム共同編集: Google ドキュメントのように、誰かがデザインを編集している様子がカーソルの動きとともにリアルタイムに見える。オンラインミーティングをしながらその場でデザインを調整することも容易である。
デザインと成果物のギャップを埋める: デザインから直接アイコンなどの画像を書き出す（エクスポート）ことができ、エンジニアが開発に使う数値を正確に取得できる。

開発現場でのFigmaの役割（エンジニア視点）

エンジニアがFigmaを使う場合、自分でイラストを描くような「デザインの作成」をする必要はない。主に「デザインの実装（コーディング）」をスムーズに行うためにFigmaを使用する。

Figmaには「開発モード（Dev Mode）」という機能があり、これを使うと以下の操作を確認しやすくなる。なお、Dev Modeの利用条件はプランやシート種別によって変わるため、チームで使う場合は契約内容も確認する必要がある。

要素のサイズや余白の確認: ボタンと文字の距離、セクション間の余白（margin / padding）をピクセル単位で確認できる。
CSSのコピー: フォントサイズ、カラーコード（HEX/RGBA）、グラデーション、角丸（border-radius）などのコードを直接取得できる。
画像アセットの書き出し: SVG、PNG、WebPなどの形式で、必要な画像を適切なサイズで直接ダウンロードできる。

プロトタイプ機能

Figmaには、デザイン上のボタンをクリックすると「別の画面に遷移する」「ポップアップ（モーダル）が表示される」といった、実際のアプリに近い動作をシミュレートする「プロトタイプ機能」がある。

コードを1行も書くことなく、スマホの実機などで「本物のような操作感」を試すことができるため、開発前にユーザーテストを行ったり、クライアントに仕様を確認してもらったりする際に非常に有効である。

AIコーディングとの関係

AIコーディングの進化に伴い、FigmaとAIの連携は急速に進んでいる。AIにデザインを指示したり、デザインからコードを自動生成したりするプロセスで、Figmaは重要な役割を担っている。

AIを活用する際は、以下のような指示方法がある。

レイアウトのコード化:
「Figmaで作成したログイン画面の構成が『幅320pxのカード、上部余白24px、ボタンは青色（#0055ff）』です。この構成を再現するHTMLとTailwind CSSのコードを書いてください」
Figma APIやプラグインの活用:
「Figmaのデザインデータを入力として受け取り、Reactのコードに変換するプラグインの使い方を教えてください」

また、近年ではFigmaの画面スクリーンショットを直接AI（GPTやGeminiなど）に読み込ませ、「このデザインをもとにコーディング案を作って」と指示するアプローチも使われている。ただし、画像だけでは余白や状態差分、レスポンシブ時の挙動までは正確に伝わらないことがあるため、Figma上の数値や仕様もあわせて確認するとよい。

よくある勘違い

Figmaは画像編集ソフト？

Figmaは、写真を加工したりイラストを細かく描いたりするソフト（PhotoshopやIllustratorのようなソフト）ではない。あくまで既存の画像やパーツを配置し、画面レイアウトやボタンの配置といった「画面の設計図」を組み立てるツールである。写真のレタッチなどは別の専門ソフトで行う必要がある。

Figmaを使うにはデザインセンスが必要？

エンジニアやディレクターがFigmaを使うにあたって、高度なデザインセンスは不要である。「デザインから数値を読み取る」「簡単なワイヤーフレームでアイデアを形にする」「コメント機能でフィードバックを残す」といったコミュニケーションツールとしての使い方がメインになるため、操作に慣れるだけで十分に実務で活用できる。

Dev Modeを使えば完全なコードがそのまま手に入る？

そうではない。Dev Modeはサイズ、色、余白、アセットなどを確認する助けになるが、実際のHTML構造、アクセシビリティ、レスポンシブ対応、状態管理まですべて自動で完成させるものではない。エンジニアは取得した情報をもとに、実装に合わせて調整する必要がある。

まとめ

Figmaは、ブラウザ上でリアルタイム共同編集ができるUI/UXデザインツールである
開発モード（Dev Mode）を使うことで、エンジニアはサイズやカラーコード（CSS）を確認しやすくなる
画面遷移をシミュレートするプロトタイプ機能により、開発前に動作検証ができる
AIコーディングでは、デザイン画像だけでなく余白、状態差分、レスポンシブ時の仕様もあわせて伝えると実装精度を上げやすい

情報ソース

より詳しくAIに聞いてみよう

Figmaの「開発モード（Dev Mode）」を使って、エンジニアがHTML/CSSコーディングの数値を効率的に読み取る手順を教えてください。
Figmaのデザインからアイコンなどの画像を書き出す際、SVG形式とPNG形式はどのように使い分ければよいですか？
AI（マルチモーダルAI）にFigmaのデザインのスクリーンショットを渡し、高精度なTailwind CSSのコードを出力させるためのプロンプトのコツを教えてください。
Figmaの「オートレイアウト（Auto Layout）」という機能と、CSSの「Flexbox」の関係性について初心者向けに教えてください。
Figmaで作成したデザインのプロトタイプを、スマートフォンの実機（Figmaモバイルアプリ）で確認する方法を教えてください。