デザインを作る → 管理する → 共有する → 修正する → 開発に渡す
という 一連の作業の流れ(やり方のルール)
Figma運用ワークフローの全体像(超シンプル版)
フェーズ 目的 Figma上で行うこと
1. 設計 構造や動線を決める ワイヤーフレーム、画面遷移の整理
2. デザイン制作 UIを作る コンポーネント作成、スタイル適用
3. デザインシステム管理 統一性を保つ Color / Text / Components / Icons の共通化
4. プロトタイプ 画面遷移や動きを再現 Prototype でリンク & アニメーション設定
5. 開発へのハンドオフ エンジニアへの受け渡し Inspect / Export / コンポーネント仕様共有
6. 運用・改善 修正やアップデート コンポーネント更新 → 自動反映
構成例
/ 00_Foundation ← 色 / 文字 / グリッド / アイコン
/ 01_Components ← ボタン / 入力欄 / ナビ / 共通パーツ
/ 02_Patterns ← カード / リスト / モーダルなど UIブロック
/ 03_Screens ← 実際の画面デザイン
/ 04_Prototype ← 動きと遷移確認
/ 99_Archive ← 古いもの、破棄予定
UX設計 ワイヤーフレーム、情報設計、遷移図
UIデザイナー コンポーネント作成、スタイル管理、画面デザイン
エンジニア InspectでCSS確認、コンポーネント仕様反映
PM / クライアント プレビューで確認、コメントでレビュー