AWS Amplify UI Builderでfigmaからコード生成をやってみた

この記事はニッセイ情報テクノロジーPS事業推進室 アドベントカレンダー2024の4日目の記事になります。

https://qiita.com/advent-calendar/2024/nissay-it-xthinklab

ニッセイ情報テクノロジー株式会社　プロダクト・サービス事業推進室　田島です。
私の所属するチームでは、仮説検証型アジャイル開発を実践するため、素早い開発サイクルを目指して開発の一部にAWS Amplifyを利用しています。
今回はAWS Amplify UI BuilderというFigmaプラグインを利用して、Figmaで作った画面デザインを直接コード化するやり方をご紹介します。

# この記事でわかること
　AWS Amplify UI Builderの使い方がわかる
　Figmaからコード生成する上での注意点がわかる

 
 ## プラグインの準備

 Figmaプラグインは以下のリンクからインストールすることができます。
 https://www.figma.com/community/plugin/1040722185526429545/aws-amplify-ui-builder

・`Open in Dev Mode`ボタンからfigmaを開くと以下のFigmaファイルが開きます。
ここには`premitives`ページにAmplify側で用意された既存デザインが入っているため、入力フォームやボタンなどはこれをコピーして使うようにします。

![image-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/9a5cf251-0d06-4909-5455-817572cfcb34.png)
## Figmaでデザインを作る
Figmaで試しに以下のような入力フォームを作ってみました。
![image-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/f8d17dc2-ce9b-60e5-dbcb-455727f3713c.png)
上記のファイルを作成する上では、`premitives`ページから以下の2つ（ButtonとTextField）をコピーして使用しています。
![image-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/217c42a1-4085-dd80-1b94-10b57c26eb1f.png)
![image-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/5ef0eadc-e2b8-5679-9379-3f54fba899d7.png)

ページ構成とFigmaの構成は以下になります。

![image-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/bbcbb4f8-77c4-b073-c7aa-c786e148627b.png)

Figmaからコード生成するためには、コンポーネント化する必要があるため、一番上の階層を選択して`コンポーネントの作成`を押してコンポーネント化します。

![image-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/fba9c128-9eba-cfa6-6ac0-fad1ac275239.png)

コンポーネント化すると、一番上の題名部分が紫になります。

![image-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/14e4600b-324b-9d2e-2507-82c7e8769109.png)

## Figmaプラグインを実行する
ここでプラグインタブからプラグインを実行します。
実行すると上記のプップアップが表示されるため、`Download component code`を押すとzipファイルがダウンロードされます。

![image-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/86801913-66f7-51e0-af30-af123f64066d.png)

以下のようにダウンロードされます。
ダウンロードしたファイルを展開すると、作ったコンポーネントが入っていません。
コンポーネント名がそのままクラス名になるため、日本語だとコード生成ができませんでした。

![image-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/833e2835-d47b-1e44-b79f-916516cc609c.png)

コンポーネント名を英字に変更し再度取り込むと、無事にFigmaで作成したコードがコード出力されました！
![image-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/2dc5fdeb-c650-4b27-9642-62cf8cf184fc.png)
![image-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/3b870aa6-ac72-bfe9-c9c2-ca41a5b44bde.png)

このような手順でFigmaからreactコンポーネントを出力できます。
出力したコンポーネントをAmplifyGen2環境に配置することで画面表示できるようになります。
（src配下のcomponentsに、ダウンロードしたui-componentsファイルを配置）

![image-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/69f26c80-76c4-754b-7617-97119689daaf.png)

AmplifyGen2については、以下のリンクからクイックスタートを実施してみてください！
クイックスタートで作成したプロジェクトに、Figmaプラグインから出力したUIコンポーネントを配置し、jsxファイルのラッパーファイルを実装することで簡単に画面表示ができます。

（参考）

https://docs.amplify.aws/react/start/quickstart/

## 終わりに
Amplifyプロジェクトにファイルを取り込み、ローカルで表示してみました。
表示にあたり、以下の手順を実施しました。
・src > components内にダウンロードしたディレクトリごとに配置
・Figmaを修正した場合は再度プラグインを実行 → ui-componentsをダウンロード → プロジェクトに再配置
を行うことで、すぐにFigmaでのUI修正を反映できます。

オーバーライドなどせずにこのような実装が可能です。

Amplify UI Builder側で用意されたコンポーネントを流用することで、コード実装なしで入力もできる画面が楽に作ることができます！

（入力前）
![image-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/b9e763fa-92ff-3e14-e239-279f3111dd63.png)

（入力後）
![image-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928533/6677521f-920f-6d36-5436-22a2f00be12d.png)