前回初開催だった、五反田.mobile の第二回はデザインがテーマ。間違って前回の開催場所だったウェルスナビさんに行ってしまい、1セッション目は間に合わなかった。
AIコーディング時代におけるデザインとの連携をどう滑らかにするか？を考えてはいるものの、エンジニアサイドは自発的に様々な工夫をする一方で、デザイン側との接点については手探り感があった。今回そのヒントがいくつか得られて良かった。
パネルディスカッションは、プレゼンター以外の社員さんの参加もあってエピソードが豊富だったし、またプレゼンテーションという粒度外の話もてんこもりで（そういえば、みたいな思い出しもあり）素敵な試みだった。
イベントページ：https://gotanda-mobile.connpass.com/event/382518/
Figmaを使ったAI駆動モバイルアプリ開発
@naoele_dev さん
- よくある失敗例
- レイアウト設計（Auto Layout, Constraints）
- コンポーネント設計（Components, Variant）
- トークン設計（Color, Theme）
- 失敗原因：Figma の設計が曖昧だから
- Frame 名が初期値のまま→意味のある命名がされている
- 手動配置されている、色が直接指定されている；Auto Layout や Variants を使っている
- コンポーネントを使ってない
- レイアウト設計の悪い例、良い例
- 重要なのは、レイヤー構造がコード構造になる（Auto Layout, Constraints）
- 意味のある名前をつける
- → Figma のデザインデータそのままで生成される（クラス名や変数名にも反映される）
- Auto Layout = Stack, Column
- Figma の Constraints: サイズが変わった時に、中のTalkで部品がどの様に振る舞えウカを決める（寄せ方）
- コンポーネント設計の悪い異例、良い例
- 状態ごとに別コンポーネントになっているのは悪い例
- 一つのコンポーネントに Variants が指定されていて、状態管理されている
- UI部品をメインコンポーネント化し、Variants に切り出すと、その差分をAIが理解してくれる
- 絶対ルール
- 数値を直接書かない、Design Token 化する
- AIのためでも、将来の自分たちのためでもある
- Figma は絵を描く場所ではない、恒常を定義する場所
- チェックリスト
- Auto Layout を使っているか
- Frame 名に意味があるか(ListItem みたいな名前になっているだけでも違う)
- Variantsで差分を表現しているか
- Token を参照になっているか
iOSデザインシステムとデザイナーと連携した取り組み
ひなっこ さん
“聴講メモ：五反田.mobile Vol.2 – モバイルアプリデザイン最前線” の続きを読む