Figmaを使ったAI駆動モバイルアプリ開発 - コード生成しやすいデザイン設計の実例 -
374 Views
February 27, 26
スライド概要
FigmaのデザインデータをAIに渡してUIコードを生成する開発手法について話しています。AIが参考にするデータがどのような設計になっていると生成物の質が上がるのか、失敗例と成功例の実例を出して解説しています。前半は株式会社アルクの会社紹介です。
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.2M
各ページのテキスト
Figmaを使った AI駆動モバイルアプリ開発 ― コード生成しやすいデザイン設計の実例 ― by・Hiroya Soma #gotanda_mobile
相馬 裕也 Hiroya Soma 株式会社アルク モバイルアプリエンジニア（Android,Flutter） DroidKaigiのOSSコントリビューターです x.com(旧twitter)@naoele_dev 34歳でこういうイベント初登壇なので お手柔らかにお願いします #gotanda_mobile
1. よくある失敗例 1. 実例① レイアウト設計（Auto Layout / Constraints） 2. 実例② コンポーネント設計（Components / Variant） 3. 実例③ トークン設計（Color / Theme） 2. まとめ 3. チェックリスト 注意点 AIの紹介や、Figmaについての説明はしません デザインデータの設計についてのみ話します #gotanda_mobile
1.よくある失敗例 Figmaのデザイン AIでコード生成失敗 →
生成コードのレイアウト崩れの原因 「Figmaの設計が曖昧」 だから AIはデザインを理解しているわけではなく 構造・名前・規則性をコードに変換しているだけ
生成に失敗する例・成功する例 NG例 Frame名が “Frame 123” / “Group 1” / “Frame”のまま 手動配置 色が直接指定されており毎回違うHex コンポーネント未使用
生成に失敗する例・成功する例 OK例 意味のある命名 Auto Layout必須 Variantで差分管理 値は直接指定しない（Figma Design Tokenを使う）
生成に失敗する例・成功する例 名前・構造・規則性 が揃っていると SwiftUIでもJetpack ComposeでもFlutterでも ほぼ同じ構造のコードを生成できる
実例① レイアウト設計 悪い例 悪い例 1. Textを手で配置 2. PaddingをFrameサイズで調整 3. Frame名が “Frame” や “Group 1"で どういうUI部品か分からない
実例① レイアウト設計 良い例 良い例 1. レイヤー構造 = コード構造 2. Auto LayoutやConstraintsを使用 3. FrameやGroupでなく「Card」や 「BookContentCard」「Row」とい う意味のある命名 良いFigmaのデザイン
実例① レイアウト設計 良い例 AIでコード生成成功！
実例① レイアウト設計 良い例 FigmaのAuto Layout Auto Layout = Stack(SwiftUI), Column(Compose,Flutter) 1. 並べる方向の指定（縦・横） 2. 並べた時の要素同士の間隔（Marginなど）の指定 3. 並べた時の要素のアラインの指定（上下左右・中央） 4. フレームに対する余白（Paddingなど）の指定（上下左右） これがないとAIは縦と横どちらにUI部品を積めばいいのか分からない
実例① レイアウト設計 良い例 FigmaのConstraints Frame(外枠)のサイズが変わった時に、 中のUI部品がどのように振る舞うか決めるもの 左寄せ、右寄せ、上寄せ、下寄せ、中央寄せ 左右揃え、上下揃え、左右中央揃え、上下中央揃え AIにとってResponsive生成時に重要 Compose / Flutterの Modifier.weight / SizedBox等に変換される SwiftUIのframe(maxWidth:)相当
実例② コンポーネント設計 悪い例 悪い例 状態ごとに別コンポーネント 引用 Figma Variants Playground (Community)
実例② コンポーネント設計 良い例 良い例 1 Component + Variant 引用 https://ics.media/entry/220413/
実例② コンポーネント設計 まとめ Component化＋Variants設定で 1. 類似Componentの管理や切り替えが楽になる 2. 画面に再利用可能な「状態」「アイコンの有無」「対象デバイス」 「ダークモード」「OSに合わせたデザイン」のUIコンポーネントを簡単に 追加できる VariantsがあるとAIが差分を理解できる Varinatプロパティ名からenum生成 条件分岐(if文) UiStateのプロパティ追加 再利用コンポーネント化をしてくれる
実例③ トークン設計（Color / Theme） 絶対ルール 色・余白・フォントサイズを直接設定しない 色は Primary や Surface といった意味のある名前にする 余白のサイズも L/M/S/XS と定義してそれに値を設定する Figma Design Tokensを導入して一貫性のあるUIを実現する • 名前と値のペア color-text-primary: #000000; • 一箇所の値を更新するだけで、 変更を全ての箇所に適用できる font-size-large: 40px; • ダークテーマ対応などがしやすい
まとめ Figmaは構造を定義する場所 「絵を描く場所」ではない AI駆動開発は「設計力の差」を拡大する 良い設計がAIによってさらに報われる時代になった
チェックリスト Auto Layoutを使っているか Frame名に意味があるか Variantで差分を表現しているか Token参照になっているか これだけやっても完璧なコードは(まだ)出ない でも精度は大きく変わる
ご清聴ありがとうございました！ #gotanda_mobile