flutter-figma-workflow

Flutter Figma ワークフロー

Figma は生成コードではなく、デザインの根拠として扱います。実装前に対象ノードと Flutter プロジェクトを確認してください。Figma にアクセスできない場合は、エクスポートされた画面や仕様書を依頼するか、提供されたアーティファクトを使って作業し、制約を明示してください。アクセスできなかったファイルを確認したと主張してはいけません。

ワークフロー

1. 正確なフレーム、バリアント、ブレークポイント、状態、対象プラットフォームを特定します。
2. 再利用可能なトークン、コンポーネント、アセット、タイポグラフィ、制約、インタラクションを抽出します。
3. 新しいプリミティブを作成する前に、既存の Flutter テーマとコンポーネントへの対応付けを行います。
4. セマンティックで制約駆動の Flutter 構造を実装します。Figma のすべてのレイヤーをそのまま再現したり、CSS の座標を貼り付けたりしないでください。
5. 参照ビューポートと関連するレスポンシブサイズで、決定性のあるフィクスチャをレンダリングします。
6. スクリーンショットを比較し、階層構造とジオメトリの差が最も大きい部分を修正してから、アクセシビリティとインタラクションの状態を確認します。

Dev Mode、トークン、アセット、または Code Connect については、デザインの抽出とマッピングを読み込んでください。レイアウトの変換と視覚的な検証については、Flutter の実装とパリティを読み込んでください。

境界

• ソースが不完全な場合、または新しいビジュアルの方向性が必要な場合は、flutter-ui-design を使用します。
• Figma ソースなしでコンポーネント構造を検討する場合は、flutter-ui-patterns を使用します。
• flutter-responsive-layout、flutter-animation、または flutter-accessibility は、該当する要件が明示されている場合にのみ追加します。
• デザインまたはタスク上、変更が必要だと確認できない限り、リポジトリのパッケージ、フォント、アイコン、テーマ、状態管理を維持します。

ソース

• Figma Dev Mode
• Figma Code Connect
• Flutter のアダプティブデザインとレスポンシブデザイン