【入門】Figmaで作ったデザインをReactアプリに連携する

## はじめに

今回は[AWS Amplify Studio](https://aws.amazon.com/jp/blogs/news/announcing-the-general-availability-of-aws-amplify-studio/)を利用してFigmaで作成したデザインをReactアプリに連携する方法について解説します。

「**AWSなんて触ったことないよ！**」「**Reactも触ったことないでやんす！**」って人でもサクッとできるような内容なので読んでいただければなと思います。

## 目標成果物

- Figmaで作成したカードコンポーネントのデザインをReactアプリ上で表示させる
- Figmaで作成したボタンコンポーネントでクリックイベントを試す

![スクリーンショット 2022-07-23 13.00.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/51f9c6eb-380b-16c1-21fd-00a7d3202ab0.jpeg)

![スクリーンショット 2022-07-23 13.16.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/fef47d12-7f8e-126f-4f02-a93139ae273b.jpeg)

![スクリーンショット 2022-07-23 13.30.33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/f2b65713-c2e1-512c-4b46-0e3703dbd505.jpeg)



## この記事でやること

- AWS Amplify Studioの解説
- Figmaでのデザイン作成とコードの自動生成方法の解説
- Reactアプリとの連携

## この記事の対象者

- AWSの初心者だけどFigmaで作成したデザインをReactアプリと連携してみたい人
- 将来的に流行りそうな技術をサクッと試してみたい人

## AWS Amplify Studio

### AWS Amplify Studioとは

[公式ドキュメント](https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/)を引用しますが、

> Amplify Studioは、Figmaで作成されたデザインを人間が読めるReactのコンポーネントコードに自動的に変換します。また、Amplify Studioでは、開発者が生成されたコンポーネントをアプリのバックエンドデータに視覚的に接続することができます。

一言で、デザイナーがFigamaで作成したデザインをAmplify Studioを利用することで、Reactのコードとして自動的に変換し、開発者はReactアプリ内で生成されたコードを利用してFigamaで作成したデザインUIを反映することができる。

### AWS Amplify Studioを使った将来と恩恵

まだ実務での本格的な利用は先だとは思いますが将来的には、下記のような手順でアプリ開発が進んでいくのではないかなと推測しています。

- デザイナーがFigmaでデザインを作成
- デザインをAmplify Studioを使ってReactコンポーネントのコードを生成しエンジニアに共有
- エンジニアは共有されたコードをアプリに反映

この結果、エンジニアがUIの実装にかけていたコストを減らすことができ、機能やロジック面の開発に集中することができる。

次の章から実際にFigmaとAmplify Studioを利用してReactアプリを開発していきます。

## AWS Amplify Studioを起動する

AWSアカウントを作成の上、進んでください。(AWS初心者の人でも手順が簡単なのでサクッと進めていくことができる内容になっています)

実装の手順は公式ドキュメントを参考に進めていきます。

https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/

### Amplifyに接続をする

まずは公式ドキュメントにアクセスをします。

https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/

公式ドキュメントの「**Deploy with Amplify Hosting**」をクリック。

![スクリーンショット 2022-07-23 8.34.33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/11cb79c0-87d3-25e9-88c7-75002cebe0d0.jpeg)

開かれた画面上で「**GitHubに接続**」をクリックしGitHubと連携。

GitHubアカウントがない人は作成をしてから進んでください。

![スクリーンショット 2022-07-23 8.36.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/9236b313-0e80-6776-f73b-6c3b6ce1d3e7.jpeg)

### デプロイ

GitHubの連携が完了したら、こちらの画面が開かれるのでアプリケーションの名前(任意)を入れます。

入力が完了したら**新しいロールを作成**をクリックします

![スクリーンショット 2022-07-23 8.38.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/1b9a274e-4a21-a522-d4a8-7db87cf27e2f.jpeg)

自動で項目が選択されているのでそのまま右下の**次のスッテプ: アクセス権限**をクリックします。

![スクリーンショット 2022-07-23 8.40.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8788c5f7-44a7-66ce-79de-a7638a51684b.jpeg)

こちらもそのまま**次のステップ:タグ**をクリックして進みます。

![スクリーンショット 2022-07-23 8.42.39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/0033fba1-7e1f-79fa-0483-d9fae1f7c831.jpeg)

タグの追加ページでも入力は何もせずに**次のステップ:確認**へ進みます。

![スクリーンショット 2022-07-23 8.43.28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/5c17b86f-a410-5696-4d67-473f2f642edc.jpeg)

最後に確認画面が表示されるので**ロールの作成**をクリックしましす。

![スクリーンショット 2022-07-23 8.45.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/a1f5bca5-60f9-e58e-c0ad-124184b4f7f8.jpeg)


これでロールが作成されたので、先程のアプリケーションをデプロイする画面に戻り更新ボタンを押します。

すると先ほど作成したロールが選択できるようになっているので、選択を**保存してデプロイ**をクリックします。

![スクリーンショット 2022-07-23 8.49.03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/83e6a991-619a-86b7-9e02-ca17ee656782.jpeg)

![スクリーンショット 2022-07-23 9.05.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/bfb99eef-f1fc-e67c-758e-d2d24c089d01.jpeg)

これによってアプリのデプロイが完了しました。

![スクリーンショット 2022-07-23 9.07.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/c04de811-4051-7e5d-28ba-8cef5b014e26.jpeg)

### AWS Amplify Studioを起動

次にタブを**Backend environments**に切り替えて、**Studioを起動する**をクリックします。

※ ビルドがまだの人は「**Get Start**」ボタンが表示されているのでクリックした上で行います。

![スクリーンショット 2022-07-23 9.10.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/85685a04-137d-b01a-3ea7-72a8ce098fda.jpeg)

AWS Amplify Studioの画面が出てきたことを確認できます。

![スクリーンショット 2022-07-23 9.12.03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d58a9016-cf09-ee97-e59c-ee0a4101ac8d.jpeg)

左メニューからDataを選択するとHomeデータが作成されていることが確認できます。

そのまま右上の「**Save and Deploy**」をクリックします

![スクリーンショット 2022-07-23 9.16.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/4188050d-d5dd-ee11-49c0-76432a1ce629.jpeg)

デプロイ中の画面が出てくるのしばらく待ちます。

![スクリーンショット 2022-07-23 9.19.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/fc0bd13a-cca9-0fb2-375c-4a815e217e8a.jpeg)

## AWS Amplify StudioとFigmaの連携

まず初めに今まで準備した**AWS Amplify Studio**と**Figma**を連携していきます。

左メニューからUI Libraryを選択し**Get started**をクリックします。


![スクリーンショット 2022-07-23 9.22.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/df7eecec-c788-4167-b1fa-e9d3d483fa3a.jpeg)

![スクリーンショット 2022-07-23 9.52.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/235d0b1c-1fbc-02a4-7cb4-b3eed1f52a87.jpeg)


①をクリックしてAWS Amplify UIのテンプレートキットコピーをクリックします。

※ なおFigmaアカウントをまだ作成していない人は事前に作成してください(無料)

![スクリーンショット 2022-07-23 9.52.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/361ae0c7-070f-ae47-c0f4-9d409340ca0a.jpeg)

すると以下のようにFigmaアプリが起動しテンプレートが入っていることが確認できます。

![スクリーンショット 2022-07-23 9.57.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/924f537d-ce50-50ee-8039-cec3c0d0f7b3.jpeg)

Figmaの右上にあるShareボタンをクリックしCopylinkをおしてリンクをコピーします。

コピーしたリンクを先程の②に入れてcontinueをクリックします。

![スクリーンショット 2022-07-23 10.02.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8e5b154e-316c-22ee-f222-082d0735f2c5.jpeg)

以上でFigmaとAmplify Studioの連携が完了しました。


## Figmaでデザインを作成しAmplify Studioでコードを生成する

### カードコンポーネントを作成

まずはじめにFigmaの以下の部分をクリックし300×200(任意)のFrameを作成します。

このFrame(300×200)上でカードポーネントを作成していきます。

![スクリーンショット 2022-07-23 10.18.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d27fba7a-47b1-54f0-93a0-4b4f0fb3426f.jpeg)

適当に画像を探してフレームの上部に載せます。(カードの画像部分)

画像は今は固定の値ですが後で動的に変更できるように設定します。

![スクリーンショット 2022-07-23 10.20.47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/9b2ce4a2-8192-0855-95dc-3f058dcfc192.jpeg)

タイトルと本文を入れます。

![スクリーンショット 2022-07-23 10.22.21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/cfb79eb3-13d6-00f0-4152-a645a902bb74.jpeg)

そうしたら作成したFrameを選択して右クリックで**Create component**をクリックします。

![スクリーンショット 2022-07-23 10.23.39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/132d1f0d-3f72-15c2-6d62-8464a5f0ce5d.jpeg)

これでFigma上でカードコンポーネントを作成することができました。

また名前の部分でダブルクリックをしてFigmaCardという名前に変更しておきます。

このコンポーネントがReactアプリ内でも適応されます。

![スクリーンショット 2022-07-23 10.25.44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/79f3d2b3-6b5f-c1ae-4091-07b47f009d97.jpeg)

### 作成したコンポーネントをAWS Amplify Studioに反映する


今作成したコンポーネントをAWS Amplify Studioに反映するために画面に戻り、Sync with Figmaをクリックします。

![スクリーンショット 2022-07-23 10.36.38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d7b315b3-6385-bccd-ad1a-e43afd5960ed.jpeg)


すると以下のように作成したFigmaCardコンポーネントが表示されることが確認できます。

![スクリーンショット 2022-07-23 10.38.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/571d587f-308e-006b-4cc0-80d8c541f5af.jpeg)

右上にあるAcceptボタンをクリックして作成したFigmaCardコンポーネントを取り込みSave Componentボタンをクリックします。

するとComponentsの中にFigmaCardが取り込まれていることを確認できます。

![スクリーンショット 2022-07-23 10.40.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d6e5df02-56e5-d638-7252-f519b3db20f8.jpeg)

### コンポーネントに入れるデータを準備する

先ほど作成したFigmaCardコンポーネント内に入れるデータを準備します。

左メニューのContentを選択しAuto-generate seed dataをクリックします。

![スクリーンショット 2022-07-23 11.13.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/b55f1c81-d35e-85f5-d7e3-f44bd9143a06.jpeg)

5件分のデータを作成します。

![スクリーンショット 2022-07-23 11.14.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/addcdc10-f365-2483-1953-bb242a3727de.jpeg)

データが5件作成されていることが確認できます。

![スクリーンショット 2022-07-23 11.14.46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/37183e2c-b65b-124b-6066-a399196e5045.jpeg)

作成したデータの行を上からクリックをして```address```と```image_url```と```price```に任意のデータを入れていきます。

なお```image_url```に入れる画像のURLはGoogleから取ってきています。

![スクリーンショット 2022-07-23 11.18.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d6fd700d-4860-0635-1a79-0446fa98cb8a.jpeg)

他の4件のデータも以下のようにデータを入れました。

![スクリーンショット 2022-07-23 11.20.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8acff5d4-ae48-3a21-ac92-94585aaae517.jpeg)

これでデータの準備は完了です。


### 準備したデータをFigmaCardコンポーネントに紐付ける

続いて今作成したデータをFigmaCardコンポーネントに反映していきます。

UI Libraryのメニューに戻り、**FigmaCard01**を選択し**Configure**をクリックします。

![スクリーンショット 2022-07-23 11.22.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/a79795b9-f55c-c055-0f75-77928d3b6ee1.jpeg)

Add propをクリックしNameをhomeでTypeをHomeと設定します。

![スクリーンショット 2022-07-23 10.58.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/b8339498-9a8c-51f7-afe7-b5832cd383d6.jpeg)

コンポーネント内の画像をクリックするとChild propertiesというものが出てくるのSet propをクリックし、PropをsrcでValueをhome.image_urlに設定します。

これで先ほどContentで作成したimage_urlのデータに紐付けることができます。

![スクリーンショット 2022-07-23 10.59.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/4926b71e-ae23-4a70-6b0c-27efb51e9460.jpeg)

同様にタイトルと本文の部分をChild propertiesを設定します。


![スクリーンショット 2022-07-23 11.01.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d5da3d98-8839-7dee-8344-b1c10a954d83.jpeg)

![スクリーンショット 2022-07-23 11.03.03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/7ea4750d-540f-dd20-1371-990c2d114f20.jpeg)

全部設定すると先ほど入力したデータがFigmaCardコンポーネントに反映されていることが確認できます。

![スクリーンショット 2022-07-23 11.29.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/abab8890-c85e-ba40-2138-a26dbf9a1ed4.jpeg)

次にデータを挿入そたFigmaComponentのコレクションを作成し、5つ分のデータを並べていきます。


![スクリーンショット 2022-07-23 11.33.44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/f3b908ed-22e7-42a5-280f-3a8bcde7d1e9.jpeg)

コレクションを作成すると以下のようにコンポーネントが5つ表示されることを確認できます。

![スクリーンショット 2022-07-23 11.34.11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/45dc991d-1a97-b6c4-df4e-d996392b76c2.jpeg)

コレクションでは

- TypeをGridに設定
- カラムを3に設定

※ paddingに関しては自分の環境だと入れるとバグが出たので一旦入れずに進めます

![スクリーンショット 2022-07-23 17.52.46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/0aa14bfd-4d08-1dcf-6714-03a22500ff91.jpeg)


作成したら Get component codeからコードをが生成されることを確認します。

![スクリーンショット 2022-07-23 11.40.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/454569a9-f124-610d-429b-8d0d31ec9e56.jpeg)

Reactのプロジェクトを作成し、こちらのコードを埋め込んでいきます。

## ReactアプリとAmplify Studioの連携

### Reactの環境構築

Reactプロジェクトを作成します。

今回はaws-amplify-studio-testという名前で作成しました。

```
npx create-react-app aws-amplify-studio-test
```

作成できたら以下のコマンドでアプリを起動させます。

```
npm start
```

![スクリーンショット 2022-07-23 11.51.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/db9d4c40-9538-7a85-d533-ac2372d5485c.jpeg)

この画面に先ほど作成したコンポーネントを入れていきます。


### ローカル環境の設定

まずamplify-cli をインストールします。

```
npm install -g @aws-amplify/cli
```

### Reactアプリとの連携

ここまで準備したら先程のReactアプリを開いて、先ほどGet component codeで確認したコマンドを入れて連携をしていきます。

![スクリーンショット 2022-07-23 11.40.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/d9de8bb3-e666-b4a6-e680-e8eb0da0f325.jpeg)

まず初めに一番上のコマンドを実行しamplify pullをします。

```
amplify pull --appId xxxxxxx xxxxxxxxx
```

すると以下のような画面に遷移するのでyesを押します。

![スクリーンショット 2022-07-23 11.58.59.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/2a5d1ea0-5843-1e05-3e2f-0196fe0709cf.jpeg)

Reactアプリのターミナル上で質問が出てくるので下記のように答えます。

![スクリーンショット 2022-07-23 12.00.20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/8219f1ac-1b77-88bc-ade8-32e0b1e11a8e.jpeg)

これで連携が完了してReactアプリを見てみると``src/ui-components``というディレクトリが作成されています。

### Reactアプリで作成したコンポーネントを表示させる

まずはじめに先程のモーダル上でInitial project setupタブをクリックします。

手順の1通りにコマンドを実行します。

```
npm install -g @aws-amplify/cli
npm install aws-amplify @aws-amplify/ui-react
```

![スクリーンショット 2022-07-23 12.47.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/e789b934-cfe7-7e46-ca41-c34bc9163da5.jpeg)

コマンドを実行したら手順2と同じく```AmplifyProvider```でAppをラップします。


```js: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 Amplify from "aws-amplify";
import "@aws-amplify/ui-react/styles.css";
import { AmplifyProvider } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <AmplifyProvider>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </AmplifyProvider>
  </>
);

// 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();
```

最後にAPP.jsでFigmaCardコンポーネントを読み込んで表示させます。

下記の2~3の記述を書くことで読み込むことができます。

![スクリーンショット 2022-07-23 11.40.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/65008ea6-0970-5f7e-4402-5c0d3037c469.jpeg)


```js:src/App.js
import logo from "./logo.svg";
import "./App.css";
import { FigmaCard01Collection } from "./ui-components";

function App() {
  return (
    <div className="App">
      <FigmaCard01Collection />
    </div>
  );
}
export default App;
```

ローカル環境を立ち上げます
```
npm start
```
立ち上げると先程作成したコンポーネントで表示されているのが確認できます。
(画像サイズを調整しておけばよかった..)

![スクリーンショット 2022-07-23 12.56.46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3ffddf46-7da0-c8c8-38b4-2c643176cf56.jpeg)


### ボタンコンポーネントを作成

次にボタンコンポーエントをFigmaで作成クリックイベントが発火するかを試してみる。

デザイン作成及びAWS Amplify Studioへの連携までは先ほどと同じなので簡略的に説明します。

まずFigma上で新しくボタンのデザインを作成し右クリックでcreate componentをします。

![スクリーンショット 2022-07-23 13.31.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/bd3e1c89-ec64-30ce-884f-659823a31a3a.jpeg)

その上でAmplify Studioにて以下のボタンをクリックしデザインを連携します。

![スクリーンショット 2022-07-23 13.32.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/e3bfc858-2ce1-e348-276d-35b59d3dbecc.jpeg)

連携が完了したらConfiureから下記のようにlabelとonClickのpropを設定します。

onClickではクリック時にどんなアクションを起こすのかを設定しています。

今回はクリックしたらQiitaトップに遷移するようなクリックイベントを作成してみました。

![スクリーンショット 2022-07-23 13.34.44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/3362cb8d-250f-2a92-daa3-b1074597fc6c.jpeg)

ここまで完了したら```Get component code```をクリックして先ほど同様コマンドを入れて変更内容をReactアプリに連携します。

```
amplify pull --appId xxxxxxxxxxxx
```

App.jsを下記のように書き換えます。

```js:src/App.js
import logo from "./logo.svg";
import "./App.css";
import { Frame9 } from "./ui-components";

function App() {
  return (
    <div className="App">
      <Frame9 />
    </div>
  );
}

export default App;
```

ローカル環境を立ち上げるとボタンが表示されているのが確認できます。
```
npm start
```

![スクリーンショット 2022-07-23 13.38.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/f216f322-e327-2667-d808-83eb88503723.jpeg)

クリックするとQiitaのトップページに遷移することも確認できます。

### ボタンコンポーネント内を確認してみる

作成したボタンコンポーネント(Frame9)のファイルを確認するとpropsでlabelとonClcikを受け取っているのを確認できます。

該当箇所のみを表示

```js:src/ui-components/Frame9.jsx
  const { Button, button, overrides, ...rest } = props;
  const OnClick = useNavigateAction({
    target: "_blank",
    type: "url",
    url: "https://qiita.com/",
  });
 return (
   <Text
        children="ボタン"
        onClick={() => {
          OnClick();
        }}
        {...getOverrideProps(overrides, "\u30DC\u30BF\u30F3")}
      ></Text>
   ）
```

試しにonClickの部分を直書きでalertを表示する処理に変えてみます。

```js:src/ui-components/Frame9.jsx
 const OnClick = () => {
    alert("クリックしました");
  };
```

ボタンをクリックするとアラートが表示されることが確認できました。

![スクリーンショット 2022-07-23 13.42.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2695521/654b91bb-1e33-3748-42f8-913b1af8b501.jpeg)


## 最後に

いかがだったでしょうか。

今回はAWS Amplify Studio をつかってFigmaのデザインからReactアプリにコンポーネントを連携する手順について解説をしました。

まだまだロジック周りの結合などが難しそうなので本格的なプロジェクトに導入するのは先なのかなとは思いますが、大きな可能性を感じました。

実務での本格的な導入ができる日を楽しみにしています。

他にもいろいろな記事を書いているのでよければ読んでいただけると嬉しいです。

https://qiita.com/SMAC/items/7cf6b24bed318dab5715

https://qiita.com/SMAC/items/201c133d6eeaabf675a7

https://qiita.com/SMAC/items/ca48c2578cc891674575