$30 off During Our Annual Pro Sale. View Details »

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

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

Takuma Kurosawa

November 19, 2022
Tweet

More Decks by Takuma Kurosawa

Other Decks in Technology

Transcript

  1. コード自動生成技術検証 AI事業本部 オンライン接客カンパニー 黒澤 拓磨

  2. プロトタイプ上で実現した最高のUI/UXをすぐさま開発 物としてアウトプットできたら爆速FBループが生まれる のではないか? 概要 現時点で世の中に存在している自動生成サービスを検証 することで、上記の世界観がどれくらい実現可能性があ るのか知りたい! PoCMOCK コード自動生成技術検証

  3. 検証サービス&結果

  4. None
  5. コード自動生成の現状 65% まだ発展途上の技術 • GitHubなどのインテグレーション • コードスタイルの選択 • エディター上で作業が必要 •

    デザインシステムへの習熟が必要
  6. すでに使えそうなケースは存在 • LPなどの静的サイト • 部品コンポーネント ◦ コード生成(微修正は必要) ◦ ライブラリ化(Storybook的な使い方) •

    新機能開発時に完全ゼロベースで作りたくないモチベーション • コードスタイルを自動生成ツールに合わせられるPJT • デザイナーのポートフォリオサイト
  7. デザイントークン自動生成 コード自動生成 今はデザイントークン成熟期 プロダクションレベルのサービス多数