Figma入門ガイド｜デザイン未経験でも始められるUI設計ツール
- アカウント作成と基本操作（フレーム・テキスト・図形）
- コンポーネントとAutoLayoutの概念
- プロトタイプ（画面遷移）の作成
- チームとの共有と開発者向けコード出力
基本ショートカット早見表
| 操作 | Mac | Windows |
|---|---|---|
| フレーム作成 | F | F |
| テキスト | T | T |
| 長方形 | R | R |
| 直線 | L | L |
| 拡大/縮小 | Cmd + / - | Ctrl + / - |
| 全体表示 | Shift + 1 | Shift + 1 |
| 選択ズーム | Shift + 2 | Shift + 2 |
| コンポーネント化 | Cmd + Alt + K | Ctrl + Alt + K |
| AutoLayout追加 | Shift + A | Shift + A |
開発者向け機能の使い方
デザインを開発者に渡すとき：
- レイヤーを選択して右パネル「Dev Mode」をオン（有料プランまたは限定無料）
- CSSプロパティが自動生成される（
width,height,background,font等） - SVGアイコンはそのままエクスポート可能（選択→右クリック→Export）
- デザイントークン（色・タイポグラフィ）はVariables機能で管理
よくある詰まりポイント
Q: コンポーネントを変更したら全体に反映されない → コンポーネントのメインインスタンス（紫のフレームアイコン）を編集するとすべてのインスタンスに反映されます。インスタンス（コピー）を編集してもメインには反映されません。
Q: AutoLayoutのパディングやギャップが思い通りにならない → AutoLayoutを選択した状態で右パネルのパディング値を直接数値入力すると細かく調整できます。方向（横/縦）や折り返し設定も確認しましょう。
Q: フォントが共同作業者の環境で表示されない → Google Fontsを使うと環境差がなくなります。カスタムフォントは共同作業者全員がFigmaデスクトップアプリにインストールする必要があります。
ひよこ Figmaってデザイナーさんが使うツールだよね？エンジニアも使うの？
ペンギン先生 ひよこ 無料で使えるの？
ペンギン先生 ひよこ まず何から覚えればいいの？
ペンギン先生 ペンギン先生 ここで実際にFigmaを開いてみてね。「F」を押してフレームを作成して（iPhone 14などのプリセットが選べるよ）、「T」でテキストを追加、「R」で長方形を描いてみよう。Shift+Aを押してAutoLayoutを追加すると、要素が自動的に整列してくれるよ。まずは好きなボタンを1つデザインしてみて！
ひよこ オートレイアウトってどんな機能？
ペンギン先生 要素を縦や横に自動で並べてくれる機能だよ。たとえばボタンを3つ横に並べたいとき、オートレイアウトを設定すれば均等に並んで、間隔も自動で調整される。要素を追加・削除しても自動で再配置されるから、レスポンシブなデザインを作るのに必須なんだ。
ひよこ コンポーネントって何？
ペンギン先生 ひよこ エンジニアがFigmaを使うメリットって何？
ペンギン先生 大きく3つあるよ。①デザインから直接CSSの値（色コード・余白・フォントサイズ）を読み取れる、②「Dev Mode」でデザインをコードに変換したヒントが見られる、③デザイナーと同じツール上でコメントやフィードバックができる。認識のズレが激減するんだ。
ひよこ プロトタイプも作れるの？
ペンギン先生 作れるよ！画面同士をつなげて「このボタンを押したら次の画面に遷移する」というインタラクションを設定できる。アニメーションも付けられるから、実装前に動く画面のイメージを共有できるんだ。プロダクトマネージャーへの提案にも使えるよ。
ひよこ 他のデザインツールと比べてどこがすごいの？