Figmaとは何ですか？

ブラウザベースのUIデザインツール。リアルタイム共同編集が特徴で、Web・アプリのデザインに最も使われている。

Figmaのポイントは？

ブラウザで動作し、インストール不要。リアルタイム共同編集でデザイナーとエンジニアが同時作業。コンポーネント、Auto Layout、Dev Modeが強力。2022年にAdobeが200億ドルでの買収を発表（後に撤回）

【ふぃぐま】

Figma とは？

💡 チームで「同時編集」できるデザインツール

📌 このページのポイント

ブラウザで動作し、インストール不要
リアルタイム共同編集でデザイナーとエンジニアが同時作業
コンポーネント、Auto Layout、Dev Modeが強力
2022年にAdobeが200億ドルでの買収を発表（後に撤回）

Figmaのイメージ

ひよこ

なんでFigmaが人気なの？

ペンギン先生

①ブラウザで動くからOS不問（Mac/Windows/Linux）、②Google Docsのようなリアルタイム共同編集、③無料プランが充実（個人なら十分）、④Dev Mode でエンジニアがCSS値やアセットを取得可能。これまでのデザインツール（Sketch、Adobe XD）の課題を全て解決したんだ

ひよこ

エンジニアもFigmaを使うの？

ペンギン先生

Dev Modeでデザインからサイズ、色、フォント、間隔の値を取得できるよ。CSSコードの自動生成もある。コンポーネントのプロパティがReactのpropsと対応するように設計すれば、デザイン→実装の変換がスムーズになる。エンジニアもFigmaの基本操作は覚えておくといいよ

ひよこ

コンポーネントとAuto Layoutって何？

ペンギン先生

コンポーネントは再利用可能なUI部品。ボタンやカードを一度作れば、使い回して一括変更もできる。Auto Layoutは要素を自動的にFlexboxのように配置する機能。この2つを使いこなすとデザインの生産性が10倍になるよ

ひよこ

デザインシステムとの関係は？

ペンギン先生

Figmaのチームライブラリ機能でデザインシステム（カラー、タイポグラフィ、コンポーネント群の統一仕様）を共有できるよ。Material Design（Google）やShadcn/ui、Radixなどの有名デザインシステムのFigma版も公開されている。デザインとコードのデザインシステムを一致させるのが理想的だね

まとめ：ざっくりこれだけ覚えればOK！

「Figma」って出てきたら「ブラウザベースのリアルタイム共同デザインツール」と思えればだいたいOK！

📖 おまけ：英語の意味

「Figma」＝フィグマ

💬 Figure（図形）+ Sigma（合計）が名前の由来と言われているよ

← 用語集にもどる