完成図

Card一覧を表示するだけのなにか。

Figmaファイルの準備

最初にFigmaファイルを準備しておきます。
といっても、AWS Amplify UI Kit なるものが用意されているので、こちらを自分のFigmaアカウントにコピーするだけです。

MyComponentsのページを見てみると、プリビルドされたコンポーネントがありますね。今回はこれらの中から適当なコンポーネントを使おうと思います。
本記事では行いませんが、もちろん自分でイチからFigmaコンポーネントを作ることも可能です。

AWS Amplify Studioの起動

AWS Amplifyのページにいきましょう。

新しいアプリケーション　>　アプリケーションをビルドを選択します。
次にアプリケーションの名前を求められるので、任意の名前をつけてください。
名前を入力してデプロイボタンをクリックすると、アプリのデプロイが始まります。

少し待つとデプロイが完了し、すべてのアプリから、上記のような画面に飛べるようになります。
私は「SampleProject」となっていますが、各々で入力したアプリケーションの名前が表示されます。

Backend environmentsのタブからStuidoを起動するをクリックしてください。そうするとAmplify Studioを起動できます。

モデルの作成

次にデータモデルを作っていきます。

今回は、AWS Amplify UI Kitから上記のコンポーネント(TallCard)を一覧に並べたアプリケーションを作ろうと思うので、Cardというモデルを作成し、Name、Img、Priceというフィールドを作ります。

DataからAdd modelをクリックして上記のようなモデルを作ります。
モデルを定義したら右上のSave and Deoloyをクリックして、デプロイを行います。モデルのデプロイには少し時間がかかるので気長に待ちましょう。

モデルのデプロイが完了したらシードデータを作成します。
Contentに移動しActionからAuto-generate dataを選択します。

データをいくつ作成されるか聞かれるので、本記事では5つにします。
Imgに関しては画像のパスを指定する必要があるので、各々で修正してください。

画像のパスを修正後は上記のようになりました。

Figmaを同期する

UI LibraryからFigmaの同期を行います。
Figmaのリンクは自分のFigmaファイルのShareから取得できます。

リンクを入力できたらContinueをクリックして、Sync width Figmaを行います。
途中でAcceptするかどうかを聞かれますが、今回はすべてAcceptします。

すべてAcceptしているので、すべてのFigmaコンポーネントを同期できました。

ComponentsからTallCardを選択し、データと紐付けを行います。
TallCardを選択したら、Configureをクリックしてください。

Element Treeから任意の要素を選択します。
Component propertiesに任意のNameとCardのTypeを入力します。
Child propertiesは要素ごとに対応する値を紐付けてください。

紐付けが完了したら、Create Collectionをクリックし、Cardsという名前をで作成します。

するとComponetnsにCardsが追加されているので、Configureから設定を行います。

ここは自由に設定してください。
本記事では3行のグリッドで、Priceの値でソートする設定にしています。

Reactアプリの作成

コンポーネントを作れたので、今度はReactプロジェクトの作成を行います。
create-react-app を使います。

$ npx create-react-app sample-app
$ cd sample-app

次にコンポーネントをReactプロジェクトにするまでの設定を行います。
先ほど作ったCardsコンポーネントから</> Get component codeをクリックしてください。
以下の手順が表示されるので、この手順に従って作業を行います。

shell

$ npm install -g @aws-amplify/cli
$ npm install aws-amplify @aws-amplify/ui-react

インストールを終えたら src/index.js を以下のように修正します。
CSSは適宜修正してください。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import { AmplifyProvider } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AmplifyProvider>
      <App />
    </AmplifyProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ここまで対応したら、Use this componentのタブを選択します。

ここでも手順に沿って、作業を続けます。

shell

$ amplify pull --appId [appId] --envName staging

pullが終わったら実際にコンポーネントを使ってみます。

src/App.js

import { Cards } from './ui-components';

function App() {
  return (
    <div className="App">
      <h1 style={{ textAlign: 'center' }}>Card一覧</h1>
      <Cards />
    </div>
  );
}

export default App;

src/App.js を上記のように書き換えたらnpm run startで開発サーバーを立ち上げでみましょう。

Amplify Studioで作成したコンポーネント(Cards)が反映されています！

デプロイしてみる

Reactアプリをビルドしておきます。

shell

$ npm run build

AWS Amplifyのページに戻りましょう。

Hosting environmentsから任意の選択肢を選んでください。
本来ならGitプロバイダーを選ぶべきだと思いますが、本記事ではホスティングを試したいだけなので、Gitプロバイダーなしでデプロイを選択します。

先ほどのビルド成果物をドラッグアンドドロップでアップロードします。保存してデプロイをクリックすれば、デプロイが開始されます。

デプロイが完了したらDomainにアクセスしてみましょう。

ローカルで立ち上げた画面と同じ画面になっていれば完成です！

おわりに

FigmaからReactアプリを作ってみるということでした。
デザインデータを作る技術は必要なものの、驚くほど簡単にReactアプリを作ることができました。
どこまで複雑なものに対応できるのかはわかりませんが、うまく活用することでシームレスで迅速な開発が可能になりそうですね。
ぜひ、試してみてください!

参考

https://docs.amplify.aws/console/
https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/