Amplify Studio の設定

Amplify Studio 側から Figma で Amplify UI テンプレートを元に Figma ファイルを作成します。また、Amplify Studio 側で Figma のデザインにデータが入れられるように Data （データの入れ物）を作成します。

Amplify Studio の設定を進めます。

別のタブで Figma にログイン

ブラウザで別のタブを開きます。

右上の Login ボタンをクリックして、ログインします。

（UI Kit のコピー時にログインすると、ダッシュボードにもどって分かりにくくなるので、先にログインしてます。）

Figma の言語設定が English かどうかを確認

Figmaが日本版をリリース、英語以外の言語へのローカライズは初 | gihyo.jp

最近、日本語もサポートされましたが、まだまだ文献が少なく、つまづいたときに解決しにくく、進めにくいところがあります。

今回が右上の言語設定から English を選択して英語で設定します。

Data の設定

ブラウザで Amplify Studio のタブに戻ります。

左のメニューから Data をクリックします。たまに Loading のままになる場合があるので、そのときはリロードします。

今回の仕組みでは、すでにデータができています。（Git リポジトリで事前に設定されています。）

右上の Save and Deploy ボタンをクリックして設定を確定します。

デプロイするか聞かれるので Deploy ボタンをクリックします。

アニメーションしながらデプロイしています。

下部の Deployment logs をクリックすると開くので、UPDATE_COMPLETE になりまで待ちます。

UI Library

左のメニューから UI Library をクリックします。

Get started ボタンをクリックします。

Use our Figma template to get started の Use our Figma template をクリックします。

Figma の AWS Amplify UI Kit のページに移動します。

AWS Amplify UI Kit の取り込み

Get a copy ボタンをクリックします。

しばらくボタンがローディングでくるくる回って、このように Figma で AWS Amplify UI Kit が読み込まれたプロジェクトが表示されます。

これで Amplify Studio 用の Figma ファイルの準備ができました。設定していきましょう。

余談

右上の三角ボタンをクリックするとプレゼンテーションぽく再生されて、部品の作り方が表示される仕掛けです。

ただし、英語です。

トラブルシューティング : Checking for running deployments のまま進まない 対応1

Data のときに Checking for running deployments の場合は待ちます。

• /amplify-homes-handson-sample-202208/amplify/backend/api/amplifyhomes/schema.graphql ファイルを開きます
• 1行だけ改行を増やして保存して amplify push します
• ? Do you want to update code for your updated GraphQL API
  • Yes
• ? Do you want to generate GraphQL statements (queries, mutations and subscription) based on your schema types? This will overwrite your current graphql queries, mutations and subscriptions
  • Yes
• Deploy が終わったらもう一度 Amplify Studio を見に行く
• Data で Deploy 出来るはずです

トラブルシューティング : Checking for running deployments のまま進まない 対応2

それでも進まない場合は、環境を作り直しますが、解決する確証がなく、あまりおすすめしないので、対応1で解消されることを祈っております。

• Cloud9 にもどります。
• amplify-homes-handson-sample-202208 フォルダに移動します
• amplify delete コマンドで今回の環境削除します
• ファイルツリーから amplify-homes-handson-sample-202208 フォルダを削除します
• 再度 Amplify ベースから作り直します。

参考

• Amplify studio data save and deploy is loading for ever · Issue #440 · aws-amplify/amplify-adminui
  • https://github.com/aws-amplify/amplify-adminui/issues/440
• UI - parse error blocks functions · Issue #431 · aws-amplify/amplify-adminui
  • https://github.com/aws-amplify/amplify-adminui/issues/431