AmplifyのDesignToCodeからの脱却

はじめに

Figmaで作成したデザインをReactのコードに変換するニーズは高まっています。特に、デザイナーとエンジニアの間の手作業を減らし、スムーズに開発へ移行できるツールが求められています。

AWS AmplifyのDesign to Code機能（Gen1, Gen2）は、Figmaのデザインをコードに変換する便利な機能ですが、Gen2に移行する際にいくつかの制約があり、使いづらいという課題がありました。

そこで、独自のFigmaプラグインを作成し、AWS BedrockのClaude 3.5 Sonnetを活用してデザインからReactコードを生成する仕組みを試してみました。

どんなプラグインを作っているか

このプラグインの主な機能は以下のとおりです。

• デザインからReactのコードに変換

  • 選択されたコンポーネントのFigmaのデザインデータを取得しAWS Bedrockのclaude3.5 Sonnetを使いコード化

• 画像とコードをZIPでダウンロード可能

  • Figmaデザインで使用されている画像と生成したコードをまとめてZIP形式でダウンロードできる

作ろうとした背景・課題

AWS AmplifyのDesign to Codeを使っていたが制約が多い

AWS AmplifyのDesign to Code機能（Gen1, Gen2）を利用していたが、以下のような課題がありました。

• Gen1, Gen2共通の課題

  • 全てのコンポーネントが一括でコード化される

    • 一部のコンポーネントだけを変換したい場合でも、全体をコード化しなければならない

  • 生成したコードがデザイン変更のたびに更新され、直接編集できない

    • 実質的にコードを直接編集することが難しく、ラップしてオーバーライドする必要がある
    • その結果、コードの量が膨大になり、管理が大変になる

  • 一部のCSSが反映されない問題がある

    • 生成されたコードの中で、特定のスタイルが適用されないケースが発生する
    • その都度、デザインとコードを確認しながら修正する必要がある

    

    

• Gen2特有の課題

  • デザイン上のユーザー入力欄の仮テキストがオーバーライドできない
    • Figmaで仮のテキストを入力しても、そのままコードに反映され、変更が難しい

※Amplifyでは下記記事のように実装していました。

解決されるであろう課題の仮説

このプラグインを使うことで、次のような課題を解決できると考えています。

1. 必要なコンポーネントだけを選んでコード化できる

   • 一括変換ではなく、個別のコンポーネントを選択してコード化できるようにする
   • これにより、デザインの一部を試験的にコード化し、順次組み込むワークフローが可能になる

2. デザイン上の仮テキストを自由に調整できる

   • Figma上での仮テキストがコード上に直接反映されないようになるため、Figma上でのデザインの自由度が上がる

3. コードの更新管理を最適化する

   • 一括でコード出力し、UI部分のコード全体を置き換えるわけではなくなるため、出力されたコードを直接編集できるようになる

4. CSSの適用ミスを防ぐ

   • 全体を出力するのではなくひとつひとつ出力し確認になるので、確認や変更が容易になる

おわりに

このプラグインは、0からの開発を迅速に行えるようにという観点で作りました。デザイナーさんから受け取ったデザインを素早く形にし、ユーザーに触ってもらえる状態にすることで、開発からリリースしFBを受けるまでの時間を短縮できると考えています。また、Figma上での制約も少なくなることで、デザイナーさんや開発者の負担を軽減し開発者体験の向上にもつながるものだと思います。

このプラグインをチーム内で活用することで、デザインからコードへの移行がより効率的に行えるようになり、開発プロセス全体のスピードとクオリティが向上することを期待しています。