初めに

AmplifyStudioを利用して
Reactコンポーネントを生成するまでの
一連の流れをメモしておこうと思います。

AmplifyStudioとは

デザインツールであるFigmaをAmplifyで作成したアプリケーションに
接続できるサービス。

AmplifyStudioが、Figmaで作成したデザインを
Reactコンポーネントに変換し、
Amplifyで作成したアプリケーション側で利用可能にしてくれるという、
ノーコード / ローコードサービスです。

まずは、ReactをベースとしたAmplifyのアプリケーションを作成します。
今回は、詳細は割愛させていただきます。

Amplifyチュートリアルなどを参考にしてみてください。

次に1で作成したAmplifyアプリケーションの設定にある
AmplifyStudioを有効化します。

Amplifyアプリの設定 > AmplifyStudioの設定

AmplifyStudioの認証は、AWSの認証とは
別で管理されているので、
今回作業をするためのアカウントを発行します。

AWSアカウントを必要としないデザイナーやマーケター
でもアクセスしやすい環境を作れそうです。

AmplifyStudioの設定の、
"ユーザーを招待"から自身のメールアドレスを登録。
(権限は個人開発ならとりあえずFull accessを選択)

一時パスワードが送られてくるので、
メールアドレスと一時パスワードでパスワードを再設定しつつログインする。

AmplifyStudioにログインが出来たら、
いよいよAmplifyStudioにFigmaのファイルを読み込ませます。

4-1. 利用するFigmaのファイルURLをコピー

4-2.
Design > UI Library > Get Startedをクリック > 4-1のURLを貼り付ける

最後にAmplifyアプリケーションで
AmplifyStudio上にあるコンポーネントを
Reactコンポーネントとしてコードにpullします。

※npmの場合

AmplifyのアプリケーションIDと環境名は自分の環境に合わせて変更してください。

例）
アプリケーションID：hoge_123
環境名: dev

amplify pull --appId hoge_123 --envName dev

お疲れ様でした。

AmplifyStudioを利用した
Reactコンポーネント生成ができましたでしょうか。

この記事が何かの助けになれれば幸いです。

良きAmplifyライフを。