Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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事業本部 オンライン接客カンパニー
    黒澤 拓磨

    View full-size slide

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

    View full-size slide

  3. 検証サービス&結果

    View full-size slide

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

    View full-size slide

  5. すでに使えそうなケースは存在
    ● LPなどの静的サイト
    ● 部品コンポーネント
    ○ コード生成(微修正は必要)
    ○ ライブラリ化(Storybook的な使い方)
    ● 新機能開発時に完全ゼロベースで作りたくないモチベーション
    ● コードスタイルを自動生成ツールに合わせられるPJT
    ● デザイナーのポートフォリオサイト

    View full-size slide

  6. デザイントークン自動生成 コード自動生成
    今はデザイントークン成熟期
    プロダクションレベルのサービス多数

    View full-size slide