初めに
AmplifyStudioを利用して
Reactコンポーネントを生成するまでの
一連の流れをメモしておこうと思います。
AmplifyStudioとは
デザインツールであるFigmaをAmplifyで作成したアプリケーションに
接続できるサービス。
AmplifyStudioが、Figmaで作成したデザインを
Reactコンポーネントに変換し、
Amplifyで作成したアプリケーション側で利用可能にしてくれるという、
ノーコード / ローコードサービスです。
参考：Introducing AWS Amplify Studio
全体の流れ
- Amplifyのアプリケーションを作成
- AmplifyStudioを有効化
- AmplifyStudioにログイン
- FigmaのファイルをAmplifyStudioに読み込む
- Amplifyアプリケーション側でpullしてReactコンポーネントを生成
1. Amplifyのアプリケーションを作成
まずは、ReactをベースとしたAmplifyのアプリケーションを作成します。
今回は、詳細は割愛させていただきます。
Amplifyチュートリアルなどを参考にしてみてください。
2. AmplifyStudioを有効化
次に1で作成したAmplifyアプリケーションの設定にある
AmplifyStudioを有効化します。
手順
Amplifyアプリの設定 > AmplifyStudioの設定
3. AmplifyStudioにログイン
AmplifyStudioの認証は、AWSの認証とは
別で管理されているので、
今回作業をするためのアカウントを発行します。
AWSアカウントを必要としないデザイナーやマーケター
でもアクセスしやすい環境を作れそうです。
手順
AmplifyStudioの設定の、
"ユーザーを招待"から自身のメールアドレスを登録。
(権限は個人開発ならとりあえずFull accessを選択)
一時パスワードが送られてくるので、
メールアドレスと一時パスワードでパスワードを再設定しつつログインする。
4. FigmaのファイルをAmplifyStudioに読み込む
AmplifyStudioにログインが出来たら、
いよいよAmplifyStudioにFigmaのファイルを読み込ませます。
手順
4-1. 利用するFigmaのファイルURLをコピー
4-2.
Design > UI Library > Get Startedをクリック > 4-1のURLを貼り付ける
5. Amplifyアプリケーション側でpullしてReactコンポーネントを生成
最後にAmplifyアプリケーションで
AmplifyStudio上にあるコンポーネントを
Reactコンポーネントとしてコードにpullします。
手順
※npmの場合
npm install -g @aws-amplify/cliamplify pull --appId {アプリケーションID} --envName {環境名}
AmplifyのアプリケーションIDと環境名は自分の環境に合わせて変更してください。
例）
アプリケーションID：hoge_123
環境名: dev
amplify pull --appId hoge_123 --envName dev
最後に
お疲れ様でした。
AmplifyStudioを利用した
Reactコンポーネント生成ができましたでしょうか。
この記事が何かの助けになれれば幸いです。
良きAmplifyライフを。