ここでは、Amplify にアクセスし、Amplify Studio を利用して Figma のデザインをコンポーネントとして読み込み、データベースとの紐付けを設定します。
また、リスト表示用（Collection）のコンポーネントも作成します。
- AWS マネージメントコンソールから Amplify にアクセスします。
amplify initを実行したことによりアプリケーション名 amplifyhomes が作成されています。クリックして詳細を表示します。
- 「Amplify Studio をセットアップ」をクリックします。
- Amplify Studio を有効にします。 を on にします。
- backend environment の url をクリックして Amplify Studio にアクセスします。
- 認証を要求されるので、「Log in with AWS Account」をクリックします。
- 無事に認証が終わると Amplufy Studio が起動します。
- 画面左メニューの「UI Library」メニューをクリックし、続けて右上の「Sync with Figma」をクリックします。
- 先ほど Figma でコピーしたリンクを貼り付け、「Countinue」をクリックします。
- 「アクセスを許可」をクリックします。
- 「Accept all changes」をクリックします。
- 「Accept all」をクリックします。
- Components に先ほど Figma で編集したコンポーネントがあることを確認します。
- 次に画面左のメニューの「Data」をクリックし、続けて「Add model」をクリックします。
画像を参考に table:News を入力します。
Add a field をクリックして、
- Field name: title, Type String
- Field name: paragraph, Type String
を入力します。
- 入力が終わったら画面右上の「Save and Deploy」をクリックします。
- 「Deploy」をクリックします。
- 画面のように表示されたらデプロイ終了です。
- 画面左メニューの「Content」をクリックし、続けて「Auto-geenerate seed data」をクリックし、ダミーデータを作成します。
- 画像を参考に、「How many rows ...」は 5
- 「Add constraint」をクリックし、title, paragraph にそれぞれ設定をして、「Generate data」をクリックします。
- 画像のようにデータが作成されていることを確認します。(ランダムに生成されるため、データの内容は一致しません)
- 画面左メニューの「UI Library」をクリックし、「Components」から Figma で作成した「NewsItem」をクリックし、「Configure」をクリックして編集画面にアクセスします。
- 画面左のツリー表示のメニューを展開し「Title」をクリックし、画面左に表示される「Set text label」をクリックします。
- news の news.title を選択します。
- 画像のような表示になっていれば OK です。
- 続けて同じように Paragraph の設定もします。
- news の news.paragraph を選択します。
- 画面のような表示にします。
- 続けて画面右上の「Create collection」をクリックします。
- 「NewsItemCollection」と入力して「Create」をクリックします。
