サービス

Figma

フィグマ

ブラウザで動くクラウド型の UI デザインツールです。チームで同時に編集でき、デザインから実装まで一貫して使えます。

体験区分：少しだけ触った推奨読者レベル：Level 2-4

画面レイアウトのデザインと共同編集を担います。複数人のカーソルが見える状態でファイルを編集でき、Dev Mode（デブモード）から CSS など実装向けコードも取り出せます。

デザイナーや PM（プロダクトマネージャー）が UI の仕様書代わりに使う場面で名前を見ます。「Figma の URL 送ります」と渡されたリンクを開発者が見て実装する場面が典型です。

構造図

2026.04·ready

「Figma の Dev Mode の CSS を Claude に渡したら、コンポーネントが一発で組めました。」

Figmaの見方

この用語の見どころ

役割

UI デザインの作成・共有・実装連携を担うクラウドツールです。

うれしさ

Dev Mode で CSS が取れるため、AI へのコード生成指示が具体的になります。

注意点

共有リンクの公開範囲設定が誤ると、社外から見えない・見えすぎるトラブルが起きます。

どこで役立つか

デザインと実装の引き継ぎ・AI による UI 生成の起点として役立ちます。

はじめに

View 権限と Edit 権限の違い、Dev Mode の存在を押さえます。

深掘り先

Dev Mode、Auto Layout、Figma Make

非エンジニアのつまずき

私のコメント

開発フローでの位置

要件定義

→

デザイン作成

→

共有・確認

→

実装連携

→

修正ループ