Figma to Codeから Code to Figmaへ

Transcript

1. Figma to Codeから Code to Figmaへ。 ~ Claude Codeを使いこなすデザイナーと高速で開発を進めている話~ 2026.04.09 【AI駆動開発】AI自走環境構築・運用スペシャル #1 戸塚翔太
2. 01 A I に よ っ て 我 々 の 開 発 は ど う 変 わ っ た の か ？
3. 01 1 0 倍 ？ 2 0 倍 ？ . . . 1 0 0 倍 ？
4. 01 そ れ ぞ れ の 円 は か な り 大 き く な っ た
5. 01 次 の 問 題 は 連 携 。
6. 01 ハ ー ネ ス エ ン ジ ニ ア リ ン グ
7. 01 人 と 人 （ 組 織 ） の ハ ー ネ ス
8. 01 エ ン ジ ニ ア と デ ザ イ ナ ー が 垣 根 を 超 え て 爆 速 開 発 し て い る 事 例 を 紹 介 し ま す 。
9. 01 結 論 : デ ザ イ ナ ー が コ ー ド を 書 い て い ま す
10. 01 自 己 紹 介 簡 単 に 私 に つ い て お 伝 え し ま す
11. 戸塚 翔太(Tech Lead/EM) 製造業向けのサービスを開発しております。 登壇依頼や開発依頼も、気軽に連絡ください。 【経歴】 BEエンジニア → フリーランス → 起業 → スター トアップEM,TechLead 【SNS(X)】 @totsumaru_dot [ 自己紹介 ] 株式会社Arts Japan
12. 2 02 な ぜ デ ザ イ ナ ー が コ ー ド を 書 く の か ？
13. 01 き っ か け は F i g m a と プ ロ ダ ク ト の デ ザ イ ン 差 分
14. カラーが微妙に違う 01 フォントサイズが違う 02 モーダルのデザインが微妙に違う 03 こだわって作った部分が... 04 [ 微妙に違うUI ] 開発速度を優先 して後回しとな っている部分も
15. 01 人 を 責 め ず 、 仕 組 み を 疑 う 。
16. FE Engineer Designer ここが問題
17. 01 F i g m a M C P も あ る け ど 、 そ も そ も 先 に コ ー ド を 作 れ ば い い の で は ？
18. FE Engineer Designer レビュー 反映
19. 01 デ ザ イ ナ ー が P R を 出 す
20. 2 03 責 務 は ど こ に 置 く の か ？ 具 体 的 に 何 し て る ？
21. [ デザインシステムをコード上に ]
22. デザインシステムをコード上に生成 → 本番のプロダクトコードには含めない 01 新しいUIも可能な範囲でまず作る 02 [ デザイナーの責務 ]
23. プロダクトコードに対する全責任は エンジニアが持つ（当然） 01 デザインシステムとプロダクトコードの橋 渡しのためのSkill整備 02 [ エンジニアの責務 ]
24. 2 04 個 人 で は な く プ ロ ダ ク ト の 最 大 化 今 後 の 開 発 チ ー ム
25. 直 近 個 々 の 円 の 拡 大
26. 今 後 境 界 の 拡 大
27. ご 清 聴 あ り が と う ご ざ い ま し た ! 今 後 も よ ろ し く お 願 い し ま す ! 戸塚翔太 [ THANK YOU! ] 依頼や質問は @totsumaru_dot のDMにお願いします。