StudioでReactアプリを作成してみました。96.0.3手順Figma無料アカウント作成Figmaのサイトにアクセスします。free」をクリックします。お好きな方法でSignUpしてください。step」をクリックしました。free」をクリックします。myself」をクリックしました。以上でFigmaのアカウント作成は完了です。CLIのインストールnpmコマンドでインストールします。@aws-amplify/cliawsアカウントの設定をします。configureブラウザが起動してAWSのログイン画面が表示されます。アカウントでログインしてコンソールに戻ってEnterします。continueリージョンの選択が表示されるので、東京リージョンの場合はap-northeast-1を選択してEnterします。choices)そのままEnterするとAWSにログインしたブラウザにIAMユーザを作成する画面が開きます。(amplify-l962z)必要な項目は入力されているので、そのままユーザを作成します。コンソールに戻ってEnterします。continue先ほど作成したIAMユーザのaccessKeyIdを入力してEnterします。[hidden]secretAccessKeyを入力してEnterします。[hidden]ローカルに保存するAWSプロファイルの名前を入力します。ユーザ名と同じ「amplify-l962z」にしておきます。CLIのインストールとアカウントの設定は完了です。Amplifyにアクセスします。Studioの「使用を開始する」をクリックします。deployment」をクリックします。待っていると出来上がります。「Studioを起動する」をクリックします。envelopmentでstagingを選択します。Studioが起動できました。Started」をクリックします。template」をクリックします。Figmaの画面が開くので「Duplicate」をクリックします。「Share」をクリックします。link」をクリックします。Studioに戻ってコピーしたURLを貼り付けます。「Continue」をクリックします。access」をクリックします。Figmaでデザインを新規作成して連携してみましたが、同様のエラーになりました。開発者ツールでコンソールログを確認するとJSエラーが発生しています。ブラウザをChromeからFireFoxに変更して同様の手順を実施すると連携できました。all」をクリックします。AmplifyStudioにFigmaのコンポーネントが連携できました。AmplifyStudioのコンポーネントにFigmaのコンポーネントが1対1で連携されています。model」をクリックします。deploy」をクリックします。「image_url」「test」「detail」の3項目を追加しています。「Deploy」をクリックします。待っていると完了します。data」をクリックします。data」をクリックします。generatorでランダム画像を生成してURLを更新します。データモデルができたのでUIコンポーネントと紐づけます。Library」の「CardA」を選択して「Configure」をクリックします。prop」をクリックして「Name」に「test」と入力、Typeに「Test」を選択します。prop」をクリックします。「Prop」に「src」を選択して「Value」に「test.image_url」を選択します。同様に2つのテキストにもデータモデルで作成した項目をそれぞれ紐づけます。FireFoxではプレビューに画像が表示されませんでした。ブラウザをChromeに変更して画面を確認できます。ローカルへの取り込みと動作確認ローカルでアプリケーションのフォルダを作成してcdします。appReactアプリケーションを初期化します。.インストールされていない場合は以下のメッセージが表示されます。「y」を入力してインストールします。pullコマンドをコピーして実行します。CLIのログイン許可を求められました。「yes」をクリックします。editorを選択します。Code」を選択しました。only)アプリケーションの種類を選択します。「javascript」を選択します。keys)androidflutteriosjavascript使用するフレームワークを選択します。「react」を選択します。keys)angularemberionicreactreact-nativevuenoneソースディレクトリを入力します。そのままenterします。(src)配布ディレクトリを入力します。そのままenterします。(build)ビルドコマンドを入力します。build」を入力します。build)スタートコマンドを入力します。start」を入力します。start)バックエンドを変更する予定があるか選択します。(Y/n)App.jsを編集します。CardAを表示するようにします。startエラーになりました。この下にも大量のエラーが出力されていますが、「@aws-amplify/ui-react」が見つからないようなのでインストールします。@aws-amplify/ui-reactもう一度起動してみます。エラーは無くなりCardAが表示されましたがデータが取得できていません。データを取得するためのjsxを実装します。amplifyのdatastoreからデータを取得してStateに保存します。取得したデータの件数分CardAを表示します。TestView;CardAはTestViewから出力するためApp.jsの「CardA」を「TestView」に変更します。App;データが表示されました。Studioへ連携したUIライブラリは「src/ui-components」に展開されています。ReactコンポーネントとTypeScriptの型定義が生成されています。Reactコンポーネントではデータモデルとの紐づけで行った「src={test?.image_url}」のように展開されていて、データが表示できるようになっています.データモデルで作成したデータ型は「src/models/schema.js」に定義されています。「src/models/index.js」でDataStoreから使用できるように実装されています。どちらもTypeScriptの型定義が生成されています。AppSyncでホストされています。データはDynamoDBに格納されています。StudioとFigmaを連携してReactのアプリケーションを動かしてみました。良いところ自動生成されたReactのコードも読める状態で、TypeScriptの型定義も自動生成されています。AppSyncと連携してGraphQLで行うことができます。考慮が必要なところ生成されたReactコンポーネントを変更しないように実装を行う必要があります。pullすると上書きされるのでファイルを更新しないように注意書きがあるためです。FigmaのコンポーネントとReactのコンポーネントが1対1になるので、UIの設計とReactコンポーネントの設計を一致させる必要があります。Studioの課題ではなく、Reactコンポーネントを自動生成するときの共通的な課題です。スカイアーチネットワークス株式会社AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。StudioでReactアプリを作成してみましたAmplifyAWSサーバレスこの記事が気に入ったらいいねしよう!最新記事をお届けします。ツイートシェアはてブ送るPocketfeedly1EC2インスタンスタグがメタデータサービスで利用可能になったので試してみたテレワークにおける業務ツール紹介:TimeCrowdとは?RECOMMENDこちらの記事も人気です。