【AWS Amplify Studio + Figma + React】Amplify StudioとFigmaを同期してReactコンポーネントを自動生成する手順

先日、[AWS Summit Tokyo](https://aws.amazon.com/jp/summits/tokyo/)に行ってきました！とても楽しかったです。
私はフロントエンド実装が大好きな生き物なので、AWSのブースで紹介されていた、Amplify StudioをFigmaと同期することでReactコンポーネントを自動生成できる機能に感動しました。
ブースにいたAWSの方に機能の紹介をしてもらい、帰宅後に自分でもやってみましたが、結構苦戦しました...。なんとかコンポーネントを表示するところまではいけたので、いつか利用する時にまた躓かないように手順をまとめてみました。この記事がどこかで誰かの役に立てると幸いです。是非ご覧ください(^｡^)
## AWS Amplifyとは
![ogp.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/da66b15e-d286-99e0-aee8-580193b19bb8.jpeg)
AWS Amplifyとは、Webアプリ、モバイルアプリの開発が出来るプラットフォームサービスです。Amplifyでは、アプリケーションの開発からホスティングまでを手助けする複数のツールが展開されています。（公式ドキュメントは[こちら](https://aws.amazon.com/jp/amplify/)！）
その中でも今回は、2022年4月に正式リリースされた[**Amplify Studio**](https://aws.amazon.com/jp/amplify/studio/)について紹介しようと思います。
Amplify Studioは、フロントエンドのUIとバックエンドを迅速に構築することができるツールです。筆者が注目した機能が、WebデザインツールのFigmaと同期することで、Figmaで作成したデザインをReactコンポーネントに変換することができる機能です。
この、Figmaとの同期👉コンポーネントの作成👉実際にコンポーネントを使用するまでの手順を次項から紹介させていただきます！
なお、今回はAWSアカウントが登録済みであることが前提となっていますので、ご了承ください🙏

## Amplify Studio初期設定
### Amplify Studioアプリケーションの起動
AWSマネジメントコンソールで[Amplify](https://ap-northeast-1.console.aws.amazon.com/amplify/home?region=ap-northeast-1#/)を開き、Amplify Studioから「使用を開始する」を押してください。
![Screen Shot 2023-04-24 at 12.54.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/2de8b32e-2baa-eaf3-e1e1-257dd2b724f8.png)
既にプロジェクトが存在する場合は、「新しいアプリケーション」から「アプリケーションを構築」を選択してください。
![Screen Shot 2023-04-24 at 13.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/c5d6e399-f0a8-7484-1d37-7eb153aedc31.png)
以下の画面に遷移するので、アプリケーション名を入力して「Confirm deployment」を押してください。
![Screen Shot 2023-04-24 at 12.58.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/052b2cb6-a659-8780-d5f7-1f14cb297aaa.png)
以下のような画面が表示され、Amplify Studioのセットアップが開始されます。
![Screen Shot 2023-04-24 at 13.01.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/351ba8d9-f98c-e62a-e2bd-56bd21264c5a.png)
セットアップが完了すると、アプリケーションの詳細画面に遷移します。Amplify Studioでのアプリケーション作成が完了しました！
![Screen Shot 2023-04-24 at 13.04.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/f1f209fe-358b-63d9-7da7-ae65e98c680f.png)
上記の画面の「Backend environments」タブから、「Studio を起動する」を押下してください。別タブで以下のようなAmplify Studioコンソールが起動します。この画面から、作成したアプリケーションを操作することができます。
![Screen Shot 2023-04-24 at 13.20.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/1de208b6-0117-ae0f-98b4-cdc142732739.png)
### Figmaと同期
サイドメニューから、「UI Library」を選択すると、以下のような画面に遷移します。こちらではアプリケーションのUIの作成をすることができます。今回はFigmaとの同期を行いますので、「Sync with Figma」を選択してください。
![Screen Shot 2023-04-24 at 13.21.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/97a1c2ef-59ac-f645-45ed-6945ee0f0925.png)
以下のようなモーダルが表示されます。今回は、AWSが用意したUIを使用します。「Use our Figma template」リンクを押下してください。
![Screen Shot 2023-04-24 at 13.24.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/e6531ac0-6703-81f3-6843-e805befd6478.png)
以下のような画面に遷移します。「Open in Figma」を押下してください。
![Screen Shot 2023-04-24 at 13.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/ebc70b4a-3d3a-7527-48fe-e78c46b44f3e.png)
Figmaが起動します。右上に表示されている「Share」ボタンを押下してください。
![Screen Shot 2023-04-24 at 13.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/8d448a64-f419-4c9a-cdc0-34a34b4c99a6.png)
以下のようなモーダルが表示されます。モーダル下に表示されている「Copy link」リンクを押下してください。
![Screen Shot 2023-04-24 at 13.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/4c321771-449a-6d84-e463-3a597a7f0e1f.png)
Amplify Studioコンソールに戻り、「Paste your Figma file link」フォームにコピーしたリンクをペーストして、「Continue」を押下してください。Figmaとの同期処理が開始されます。
![Screen Shot 2023-04-24 at 13.30.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/762ba9aa-a868-11ca-f767-c6ea0ac27d9e.png)
![Screen Shot 2023-04-24 at 13.31.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/a4a7e45a-6c27-04c0-6229-342cc1681924.png)
同期が完了すると、以下のような画面に切り替わります。「Accept all changes」ボタンを押下してください。
![Screen Shot 2023-04-24 at 13.32.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/06a28a93-c2ff-2e94-e098-74c79ce6aa4b.png)
以下のような画面が表示されますので、こちらでも「Accept all」ボタンを押下してください。
![Screen Shot 2023-04-24 at 13.33.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/834835f4-09f9-bd70-7c56-04e1a806fd09.png)
正常終了すると、以下のような画面に切り替わります。UI Libraryの「Components」を確認すると、Figmaとの同期が完了し、UIコンポーネントがインポートされていることが確認できます。
![Screen Shot 2023-04-24 at 13.35.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/c896ecc7-56e2-1700-4f81-0857134ee776.png)
これでAmplify Studioプロジェクトの作成、Figmaとの同期が完了しました。コンソールでの操作は以上になります。

## AmplifyCLIの設定
### インストール
Amplifyを使用するにあたって、ローカル環境に[AmplifyCLI](https://docs.amplify.aws/cli/)をインストールする必要があります。まずは以下コマンドを実行し、AmplifyCLIをグローバルインストールしましょう。
~~~bash
npm install -g @aws-amplify/cli
~~~
以下コマンドを実行し、バージョンが正常に表示されればAmplifyCLIが正常にインストールされています。
~~~bash
amplify -v
~~~
### AWSアカウントの紐付け
次に、AWSアカウントとの紐付けを行います。以下コマンドを実行してください。
~~~bash
amplify configure
~~~
以下のようなログが出力され、ブラウザが起動し、AWSマネジメントコンソールのログイン画面が表示されますので、ルートユーザーでログインを実行してください。ログインが完了したら、エンターキーを押してください。
~~~bash
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
~~~
次に、リージョンの選択を要求されます。今回は`ap-northeast-1`（東京リージョン）を選択してください。
~~~bash
Specify the AWS Region
? region:  (Use arrow keys)
❯ us-east-1 
  us-east-2 
  us-west-1 
  us-west-2 
  eu-north-1 
  eu-south-1 
  eu-west-1 
(Move up and down to reveal more choices)
~~~
次に、以下のようなログが出力されてIAMユーザーの作成を要求されます。
~~~bash
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
~~~
ブラウザが自動で起動し、AWS IAMのコンソールに遷移します。「ユーザー名」に任意のユーザー名を入力して「次へ」を押下してください。
![Screen Shot 2023-04-24 at 13.55.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/d64e7859-e4dc-944c-c493-c433ac1d2b79.png)
ポリシーの設定を行います。「許可のオプション」で「ポリシーを直接アタッチする」を選択すると、アタッチするポリシーが選択できます。検索フォームに「Amplify」と入力して検索を実行すると、`AdministratorAccess-Amplify`というポリシーが見つかりますので、こちらにチェックを入れて「次へ」ボタンを押下してください。
![Screen Shot 2023-04-24 at 13.55.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/222b9cfe-b415-a877-a46a-c7644a823a75.png)
確認画面が表示されます。「ユーザーの作成」ボタンを押下してください。
![Screen Shot 2023-04-24 at 14.03.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/b584431a-a6a5-bb63-b51c-2170bb617acd.png)
IAMユーザーが正常に作成されると、IAMユーザー一覧に作成したユーザーが追加されます。
![Screen Shot 2023-04-24 at 14.05.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/ae3b7a2c-a0c2-06b7-9024-3dd6e3758cb6.png)
IAMユーザーの作成が完了したので、ターミナルに戻りEnterを押してください。以下のようなログが出力され、作成したIAMユーザーのアクセスキーの入力が要求されます。作成した段階ではアクセスキーは発行されないので、アクセスキーの作成をします。
~~~bash
Enter the access key of the newly created user:
? accessKeyId:  [hidden] 
~~~
AWS IAMコンソールに戻り、IAMユーザー一覧から作成したユーザーのユーザー名リンクを押下して、IAMユーザーの詳細画面に遷移してください。
![Screen Shot 2023-04-24 at 14.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/b6ff100b-3b7c-7395-ebc7-17575806480e.png)
セキュリティ認証情報タブを選択して、下にスクロールすると「アクセスキー」といエリアがあります。IAMユーザーを新規作成した時点ではアクセスキーは登録されていないので、「アクセスキーを作成」ボタンを押下して作成していきます。
![Screen Shot 2023-04-24 at 14.11.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/7578ea8c-34d0-84fa-9bba-66005c7de093.png)
アクセスキー作成画面に遷移します。ラジオボタンから「コマンドラインインターフェイス」を選択して、「上記のレコメンデーションを理解し、アクセスキーを作成します。」にチェックを入れて、「次へ」ボタンを押下します。
![Screen Shot 2023-04-24 at 14.14.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/3e6f1905-634d-6eea-0c89-772d100c5df3.png)
必要に応じて説明タグを入力し、「アクセスキーを作成」ボタンを押下します。
![Screen Shot 2023-04-24 at 14.15.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/22bc5fd0-31e0-2b45-4441-76c0e3d5ed8c.png)
アクセスキーの作成が実行され、アクセスキーとシークレットアクセスキーが表示されます。それぞれコピーし、アクセスキーとシークレットアクセスキーをそれぞれ入力してください。
![Screen Shot 2023-04-24 at 14.22.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/fe7984c8-0463-a7b0-f717-9a0746f30f75.png)
~~~bash
Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
~~~
以下のようなログが出力され、作成したユーザーのプロフィール名の入力が要求されます。こちらは任意のユーザー名を入力してください。
~~~bash
This would update/create the AWS Profile in your local machine
? Profile Name:  amplify-dev
~~~
エンターを押して以下のようなログが出力されればAmplifyCLIの設定が完了です！
~~~bash
Successfully set up the new user.
~~~

## Reactプロジェクトの作成
では、Reactのアプリケーションを作成していきます。以下コマンドを実行し、Reactのアプリケーションの起動を行なってください。
~~~bash
npx create-react-app amplify-studio-tutorial
~~~
作成したディレクトリに移動し、開発サーバーを起動します。
~~~bash
cd amplify-studio-tutorial
npm run start
~~~
上記のコマンドが正常すると以下のようなログが出力されます。`Local`に表示されるURLにアクセスしてReactアプリケーションの画面が表示されれば、完了です。
~~~bash
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.73.117:8080/
~~~
![Screen Shot 2023-04-24 at 12.47.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/76e9530f-fb87-9201-3022-10d58c9b6267.png)

## Amplify Studioのコンポーネントを使用
### コンポーネントをプル
Amplify Studioで作成したコンポーネントを、Reactアプリケーションにプルしてみましょう。
まずはAmplify Studioに保存されたUIコンポーネントを使用することができるように必要なパッケージをインストールします。アプリケーションのディレクトリに移動して以下コマンドを実行してください。
~~~bash
npm install aws-amplify @aws-amplify/ui-react
~~~
インストールが完了したら、アプリケーションでAmplifyStudioのコンポーネントを使用できるように設定していきます。`src/index.js`を以下のように編集してください。
~~~diff_javascript:src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

+ import { ThemeProvider } from "@aws-amplify/ui-react";
+ import { Amplify } from 'aws-amplify';
+ import awsconfig from './aws-exports';
+ import "@aws-amplify/ui-react/styles.css";
+ import { studioTheme } from "./ui-components";
+ Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
+   <ThemeProvider theme={studioTheme}>
      <App />
+   </ThemeProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
~~~
では、実際にAmplifyStudioからUIコンポーネント群をプルしてみましょう。Amplify Studioコンソールを開き、UI Libraryを開いて、「Components」から何かコンポーネントを選択すると、以下のような画面になり、「Configure」というオレンジ色のボタンが表示されますので、こちらを押下してください。
![Screen Shot 2023-04-24 at 14.39.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/8a2a70c4-17ff-fe23-1dd3-3c5f44d72bc4.png)
以下のような画面に切り替わりますので、画面下部に表示されている「Get component code」というボタンを押下してください。
![Screen Shot 2023-04-24 at 14.41.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/bf4a2417-af55-cfbb-d21f-69ded35761cd.png)
以下のようなモーダルが表示されます。一番目にある「Pull in the latest components, run the following command in Terminal」のコマンド（`amplify pull --appId {APP_ID} --envName staging`）をコピーして、ローカルのターミナル上で実行してください。
![Screen Shot 2023-04-24 at 14.44.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/d1c5de8e-f4c4-d94f-3e6d-9ecf5e3874d2.png)
~~~bash
amplify pull --appId {APP_ID} --envName staging
~~~
コマンドを実行すると、AmplifyCLIのログイン許可ページがブラウザで立ち上がりますので、「OK」を押下してください。
![Screen Shot 2023-04-24 at 14.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/bceeec17-58c9-2a39-d06b-d11d45e196c7.png)
ターミナルに戻ると、対話形式のCLIでアプリケーションの設定の入力が要求されます。それぞれ以下で指定された値を選択してください。
~~~bash
? Choose your default editor: > Visual Studio Code
? Choose the type of app that youre building > javascript
? What javascript framework are you using > react
? Source Directory Path: >  src
? Distribution Directory Path: > build
? Build Command: >  npm run build
? Start Command: > npm run start
? Do you plan on modifying this backend? > Yes
~~~
以下のようなログが出力されれば、コンポーネントのプルが正常終了しています。
~~~bash
✔ Successfully pulled backend environment staging from the cloud.
✅ 

✅ Successfully pulled backend environment staging from the cloud.
Run 'amplify pull' to sync future upstream changes.

No AppSync API configured. Please add an API
✔ Synced UI components.
~~~
プロジェクトのディレクトリを確認すると、ルート配下に`.vscode`と`amplify`、`src/`配下に`ui-components`が追加されていることが確認できます。
`src/ui-components`配下に格納されているコンポーネントが、AmplifyStudioから実際にプルしてきたコンポーネントの一覧になります。AmplifyStudioに格納されているコンポーネントと名前が一致することが確認できるかと思います。ここからコンポーネントを使用するような形になります。
~~~bash
src
└── ui-components
    ├── ActionCard.d.ts
    ├── ActionCard.jsx
    ├── Ampligram.d.ts
    ├── Ampligram.jsx
    ├── CommentCard.d.ts
    ├── CommentCard.jsx
    ├── ContactUs.d.ts
    .
    .
    .
~~~
### コンポーネントの動作確認
では実際にコンポーネントを使用してみましょう。今回は以下のコンポーネントを使用してみたいと思います。
![Screen Shot 2023-04-24 at 15.16.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/5c9bfbd4-2467-ad70-80e1-9b1f24342bee.png)
`src/App.js`を以下のように編集します。`ui-components`から`NavBar`コンポーネントをインポートして使用しています。
~~~diff_javascript:src/App.js
import logo from "./logo.svg";
import "./App.css";
+ import { NavBar } from "./ui-components";

function App() {
  return (
    <div className="App">
+     <NavBar/>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
~~~
ローカルで起動しているアプリケーションに再度アクセスすると、以下のように、`NavBar`コンポーネントが正常に追加されていることが確認できます。
![Screen Shot 2023-04-24 at 15.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/b15ae44c-1b9e-750a-e7ea-fd3eb94622a1.png)
おめでとうございます！AmplifyStudioのコンポーネントを使用することができました！


![giphy (4).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/8299e892-0633-1a3c-c080-12fffdf6de04.gif)


## さいごに
今回は、Figmaと連携してReactコンポーネントを自動生成する手順を紹介しました。他にも、Propsを設定することができる機能などもあるので、そちらもまた紹介できればと思っています。
デザイナーさんがFigmaでデザインを調整し、プログラマはAmplifyStudioから大枠のコンポーネントをプルして、実際に動くようにロジックを実装していくというような働き方に変わりそうですね。プログラマがデザイン以外に集中することができるようになるので、業務効率も向上しそうですね！
また、現状自動生成できるコードは、Reactコンポーネントのみとなっているようです。今後、VueやAngularなどにも対応することに期待です...
最後まで読んでいただき、ありがとうございました！ハッピーコーディング(^｡^)