Figma → Vue コード自動生成サービスを技術検証してみた

先日参加した社内イベント（PoCMockコンテスト）の発表資料です。

DX事業を1年半ほど立ち上げフェーズから経験してきて思うことは、より早いサイクルでより良いUI/UXの探求を行う必要があるということ。
Figma上で起こしたプロトタイプで共通認識を作り、すぐさま動くもの（コード）に落とし込める世界線が作れると、UI/UXを洗練させるスピード感も爆速になるのではないかと思い、今回検証することにしました。

Twitter: https://twitter.com/TakumaKurosawa/status/1592667170185834497?s=20&t=MOcj9vugRIPmytXn0Sq-fQ
Qiita: https://qiita.com/TakumaKurosawa/items/2db04bfd67f6e7afd3ca

Transcript

1. コード自動生成技術検証 AI事業本部 オンライン接客カンパニー 黒澤 拓磨
2. プロトタイプ上で実現した最高のUI/UXをすぐさま開発 物としてアウトプットできたら爆速FBループが生まれる のではないか？ 概要 現時点で世の中に存在している自動生成サービスを検証 することで、上記の世界観がどれくらい実現可能性があ るのか知りたい！ PoCMOCK コード自動生成技術検証
3. 検証サービス＆結果
5. コード自動生成の現状 65% まだ発展途上の技術 • GitHubなどのインテグレーション • コードスタイルの選択 • エディター上で作業が必要 • デザインシステムへの習熟が必要
6. すでに使えそうなケースは存在 • LPなどの静的サイト • 部品コンポーネント ◦ コード生成（微修正は必要） ◦ ライブラリ化（Storybook的な使い方） • 新機能開発時に完全ゼロベースで作りたくないモチベーション • コードスタイルを自動生成ツールに合わせられるPJT • デザイナーのポートフォリオサイト
7. デザイントークン自動生成 コード自動生成 今はデザイントークン成熟期 プロダクションレベルのサービス多数