はじめに
前回の記事 AmplifyのDesignToCodeからの脱却 では、FigmaのデザインをReactコードに変換するプラグインの開発を開始し、MVP（Minimum Viable Product）を作成しました。
今回は、Ver1 を実際に使ってみて見えてきた課題と、それを改善した Ver2 の開発について書いていきます。
まずはVer1を作成
Ver1 では、以下のような機能を実装しました。
-
デザインから React のコードに変換
- Figma で選択したコンポーネントのデータを取得し、AWS Bedrock の Claude 3.5 Sonnet を使ってコードを生成。
-
画像とコードを ZIP でダウンロード
- デザイン内で使用されている画像と、生成されたコードをまとめて ZIP 形式でダウンロードできるように実装
ハンズオンで評価してもらう
Ver1 を他チームメンバーを招きハンズオンで評価してもらいました。
「便利かも」と言う意見をもらったものの、いくつかの課題が浮かび上がってきました。
操作がわかりにくいという意見
UI が直感的でなく、どこをクリックすれば何が起こるのか分かりづらいという意見がありました。特に次のようなフィードバックがありました。
【課題１】：コンポーネントを選択した状態でプラグイン起動すると処理対象のコンポーネントが選択状態になっていない
【課題２】：生成ボタンを押した後、コード生成状況が分からず、処理が終わったのかどうかが判断しにくい
【課題３】：作成手順が煩雑（子コンポーネントを選んでコード生成したあと、親コンポーネントでコード生成）
Ver2 の開発と改善点
これらの課題を解決するために、Ver2 を開発しました。
課題と対応
【課題１】：コンポーネントを選択した状態でプラグイン起動すると処理対象のコンポーネントが選択状態になっていない
【対応】：コンポーネントを選択後、プラグイン起動で、コンポーネント選択状態にしました。
【課題２】：生成ボタンを押した後、コード生成状況が分からず、処理が終わったのかどうかが判断しにくい
【対応】：生成ボタンを押した後、ローディング画像（ぐるぐる）を表示するようにしました。
【課題３】：子コンポーネントを選んでコード生成したあと、親コンポーネントでコード生成の操作が煩雑
【対応】：子コンポーネントを含む親コンポーネントを選択した場合、親子のコンポーネントのコードを同時出力するようにしました。
ローカルファイルの読み書きができない
課題３の対応過程で、新たな問題が発生しました。
Ver1では、親コンポーネントを作成するAIプロンプトには子コンポーネントのコードを添付していました。
Ver2では生成ボタンが押されたら、子コンポーネントを先にローカルフォルダに作成し、連続して親コンポーネント作成を行い、この時、ローカルフォルダの子コンポーネントのファイルを読んで添付しようと考えました。
しかし、Figma プラグインの仕様上、ローカルファイルを直接保存することができませんでした。
そのため、生成したコードをユーザーのPCに保存する方法を工夫する必要がありました。
ローカルフォルダの代わりに、生成したコードを一時的に AWS S3 にアップロードし、S3に保存したファイルを読むことでこの課題を解消することにしました。
この方法により、Figma のローカルファイル制約を回避しつつ、スムーズにコードを取得できるようになりました。
まとめ
Ver1 で浮かび上がった課題を解決し、Ver2 ではより直感的な操作ができるようになりました。
まだ改善の余地はありますが、実用レベルのプラグインに近づいてきた手応えを感じています。
今回の開発を通じて、実際に使ってもらうことで初めて気づく課題がある ことを改めて実感しました。
開発者としては「これで使いやすいはず！」と思っていても、ハンズオンで実際に操作してもらうと、思わぬ意見に「はっ」とする気づきがありました。
このことで、フィードバックをもらいながらブラッシュアップしていくことの大切さを再認識しました。
Ver2 でもこの後ハンズオンを実施する予定になっています。皆の反応が今から楽しみです！