---
title: Figmaを使ったAI駆動モバイルアプリ開発 - コード生成しやすいデザイン設計の実例 -
tags:  #ai #figma #android #ios #flutter  
author: [naoele](https://convert.docswell.com/user/naoele)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4EQYXRMYJP.jpg?width=480
description: FigmaのデザインデータをAIに渡してUIコードを生成する開発手法について話しています。AIが参考にするデータがどのような設計になっていると生成物の質が上がるのか、失敗例と成功例の実例を出して解説しています。前半は株式会社アルクの会社紹介です。
published: February 27, 26
canonical: https://convert.docswell.com/s/naoele/KQXGV3-gotanda-mobile-ai-driven-dev-using-figma
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4EQYXRMYJP.jpg)



# Page. 2

![Page Image](https://bcdn.docswell.com/page/KJ4W68VZ71.jpg)



# Page. 3

![Page Image](https://bcdn.docswell.com/page/LE1YV23D7G.jpg)



# Page. 4

![Page Image](https://bcdn.docswell.com/page/GEWGLRP8J2.jpg)



# Page. 5

![Page Image](https://bcdn.docswell.com/page/47ZLMRK9J3.jpg)



# Page. 6

![Page Image](https://bcdn.docswell.com/page/YJ6WNRQDJV.jpg)



# Page. 7

![Page Image](https://bcdn.docswell.com/page/GJ5M58R8J4.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/9E29NKDV7R.jpg)



# Page. 9

![Page Image](https://bcdn.docswell.com/page/D7Y4PN2QEM.jpg)

Figmaを使った
AI駆動モバイルアプリ開発
― コード生成しやすいデザイン設計の実例 ―
by・Hiroya Soma
#gotanda_mobile


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VENY5X82J8.jpg)

相馬 裕也
Hiroya Soma
株式会社アルク
モバイルアプリエンジニア（Android,Flutter）
DroidKaigiのOSSコントリビューターです
x.com(旧twitter)@naoele_dev
34歳でこういうイベント初登壇なので
お手柔らかにお願いします
#gotanda_mobile


# Page. 11

![Page Image](https://bcdn.docswell.com/page/Y79PY8KDE3.jpg)

1. よくある失敗例
1. 実例① レイアウト設計（Auto Layout / Constraints）
2. 実例② コンポーネント設計（Components / Variant）
3. 実例③ トークン設計（Color / Theme）
2. まとめ
3. チェックリスト
注意点
AIの紹介や、Figmaについての説明はしません
デザインデータの設計についてのみ話します
#gotanda_mobile


# Page. 12

![Page Image](https://bcdn.docswell.com/page/G78D68R57D.jpg)

1.よくある失敗例
Figmaのデザイン
AIでコード生成失敗
→


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L7LM9RK3JR.jpg)

生成コードのレイアウト崩れの原因
「Figmaの設計が曖昧」
だから
AIはデザインを理解しているわけではなく
構造・名前・規則性をコードに変換しているだけ


# Page. 14

![Page Image](https://bcdn.docswell.com/page/4EMYZR2MEW.jpg)

生成に失敗する例・成功する例
NG例
Frame名が “Frame 123” / “Group 1” / “Frame”のまま
手動配置
色が直接指定されており毎回違うHex
コンポーネント未使用


# Page. 15

![Page Image](https://bcdn.docswell.com/page/PER96RMLJ9.jpg)

生成に失敗する例・成功する例
OK例
意味のある命名
Auto Layout必須
Variantで差分管理
値は直接指定しない（Figma Design Tokenを使う）


# Page. 16

![Page Image](https://bcdn.docswell.com/page/P7XQMRK6EX.jpg)

生成に失敗する例・成功する例
名前・構造・規則性 が揃っていると
SwiftUIでもJetpack ComposeでもFlutterでも
ほぼ同じ構造のコードを生成できる


# Page. 17

![Page Image](https://bcdn.docswell.com/page/37K9GR5G7D.jpg)

実例① レイアウト設計 悪い例
悪い例
1. Textを手で配置
2. PaddingをFrameサイズで調整
3. Frame名が “Frame” や “Group 1&quot;で
どういうUI部品か分からない


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LJ3WN8K5J5.jpg)

実例① レイアウト設計 良い例
良い例
1.
レイヤー構造 = コード構造
2.
Auto LayoutやConstraintsを使用
3.
FrameやGroupでなく「Card」や
「BookContentCard」「Row」とい
う意味のある命名
良いFigmaのデザイン


# Page. 19

![Page Image](https://bcdn.docswell.com/page/8JDKWM3YEG.jpg)

実例① レイアウト設計 良い例
AIでコード生成成功！


# Page. 20

![Page Image](https://bcdn.docswell.com/page/VEPK9R4278.jpg)

実例① レイアウト設計 良い例
FigmaのAuto Layout
Auto Layout = Stack(SwiftUI), Column(Compose,Flutter)
1. 並べる方向の指定（縦・横）
2. 並べた時の要素同士の間隔（Marginなど）の指定
3. 並べた時の要素のアラインの指定（上下左右・中央）
4. フレームに対する余白（Paddingなど）の指定（上下左右）
これがないとAIは縦と横どちらにUI部品を積めばいいのか分からない


# Page. 21

![Page Image](https://bcdn.docswell.com/page/27VVMRXX7Q.jpg)

実例① レイアウト設計 良い例
FigmaのConstraints
Frame(外枠)のサイズが変わった時に、
中のUI部品がどのように振る舞うか決めるもの
左寄せ、右寄せ、上寄せ、下寄せ、中央寄せ
左右揃え、上下揃え、左右中央揃え、上下中央揃え
AIにとってResponsive生成時に重要
Compose / Flutterの Modifier.weight / SizedBox等に変換される
SwiftUIのframe(maxWidth:)相当


# Page. 22

![Page Image](https://bcdn.docswell.com/page/5JGLGMVR7L.jpg)

実例② コンポーネント設計 悪い例
悪い例
状態ごとに別コンポーネント
引用 Figma Variants Playground (Community)


# Page. 23

![Page Image](https://bcdn.docswell.com/page/47QYXR6YEP.jpg)

実例② コンポーネント設計 良い例
良い例
1 Component + Variant
引用 https://ics.media/entry/220413/


# Page. 24

![Page Image](https://bcdn.docswell.com/page/KE4W684ZJ1.jpg)

実例② コンポーネント設計
まとめ
Component化＋Variants設定で
1.
類似Componentの管理や切り替えが楽になる
2.
画面に再利用可能な「状態」「アイコンの有無」「対象デバイス」
「ダークモード」「OSに合わせたデザイン」のUIコンポーネントを簡単に
追加できる
VariantsがあるとAIが差分を理解できる
Varinatプロパティ名からenum生成
条件分岐(if文)
UiStateのプロパティ追加
再利用コンポーネント化をしてくれる


# Page. 25

![Page Image](https://bcdn.docswell.com/page/L71YV24DJG.jpg)

実例③ トークン設計（Color / Theme）
絶対ルール
色・余白・フォントサイズを直接設定しない
色は Primary や Surface といった意味のある名前にする
余白のサイズも L/M/S/XS と定義してそれに値を設定する
Figma Design Tokensを導入して一貫性のあるUIを実現する
• 名前と値のペア
color-text-primary: #000000;
• 一箇所の値を更新するだけで、
変更を全ての箇所に適用できる
font-size-large: 40px;
• ダークテーマ対応などがしやすい


# Page. 26

![Page Image](https://bcdn.docswell.com/page/G7WGLRX8E2.jpg)

まとめ
Figmaは構造を定義する場所
「絵を描く場所」ではない
AI駆動開発は「設計力の差」を拡大する
良い設計がAIによってさらに報われる時代になった


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4JZLMR69E3.jpg)

チェックリスト
Auto Layoutを使っているか
Frame名に意味があるか
Variantで差分を表現しているか
Token参照になっているか
これだけやっても完璧なコードは(まだ)出ない
でも精度は大きく変わる


# Page. 28

![Page Image](https://bcdn.docswell.com/page/YE6WNR2DEV.jpg)

ご清聴ありがとうございました！
#gotanda_mobile


