ブログ記事一覧>
AWS AmplifyとFigmaを連携させて、簡単にReactコンポーネントを生成する

AWS AmplifyとFigmaを連携させて、簡単にReactコンポーネントを生成する

公開日 2021年12月28日(火)

Amplify Studioの起動

AWSのコンソールからAmplifyを起動する

https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/renebrandel/amplify-homes

AWSのコンソールからGithubに接続を押す

接続が完了したら、サービスロールを新規作成して、保存してデプロイをクリック(すでにロールがあれば、それを選択する)

続行をクリック

デプロイが完了したら、Backend environmentのタブからStudioを起動するをクリック

データモデルの定義

後程作成するUIコンポーネントとデータをバインドすることができる(このツールを使いこなすには、データモデルの使い方をしっかり理解する必要がありそう...)

Amplify StudioサイドメニューのDataを選択し、「Add model」をクリックして、モデルを定義し、「Save and deploy」をクリック

(図は、データモデルが作成された後の一覧です。)

データモデルの各フィールドには、ランダムなサンプルデータを登録することが可能。サイドメニューのContentをクリックして開いた後、Auto-generate seed dataボタンをクリックして、データベースにランダムなサンプルデータを生成するためのダイアログを開きます

この時、自動生成するデータの意味を正しく反映させるため、住所であることを制約として設定します。
ダイアログ内では、生成数を5に設定し、Add constraintをクリックして、Field Nameでaddress, Range/settingでStreet addressを選択し、最後にGenerate Dataをクリックしてランダムデータを生成します。

image_urlフィールドに画像のURLを挿入(適当なurlでOK)

ここまでで、FigmaとAmplify Studioの間でコンポーネントを同期するための準備は完了です。

Figmaでデザインを用意し、AWSに取り込む

1からFigmaでデザインを作成してもよいのですが、今回は時間短縮のため、Amplify Studioの提供するFigmaファイルをクローンします

Figmaのページで、AWS Amplify UI Kitを検索し、選択

Pageから “Primitive“ を選択します。プリビルドされたコンポーネントを探す場合は、”My Components“を選択します。

今回は、プリビルドされた “CardC” を利用します。上部に画像が、下部にいくつかのテキスト要素を配置した自動レイアウトをサポートしたコンポーネントを利用します。

Amplify Studioに戻り、Figmaファイルのリンクを貼りつけて、Figmaファイル内の全てのFigmaコンポーネントをインポートします。

個別のコンポーネントを選択してインポートするか、右上のAccept Allボタンを使い、全てのコンポーネントをインポートします。

UIコンポーネントをモデルと紐付ける

コンポーネントをデータモデルと紐付けてみましょう。コンポーネントを選択し、Configureをクリックします。

このUIコンポーネントエディターでは、コンポーネントのプロパティとそれに紐づくコンポーネントのUI要素を紐づけることができます。

Add propを選択

このアプリケーションでは、“home“プロパティを新しく追加して、Typeを”Home“とします。ここでは、先ほど定義しておいたデータモデルが選択できるようになっています。

データモデルとコンポーネントの画像を紐付けるために、Elements treeからimageを選択し、子要素からsrcを選択し、‘home.image_url’を紐付けます。そうすると、コンポーネント上の要素(今回だと画像)が選択した内容に差しかわる

同様に、テキストを住所に紐づけたり、金額に関してはデータモデルをテキストを組み合わせる構文を使うこともできます。

また、コンポーネントのスケールが様々なデータに対応しているかどうか確認するためには、Suffle preview dataをクリックしてください。Amplify Studioが表示に利用するデータをシャッフルした上で、コンポーネントにライブデータを入力してくれます

コレクション

UI Libraryから繰り返しアイテムの、リスト(コンポーネントの集まり)を作成することができるようですが、今回は割愛します...

UIコンポーネントをReactAppに取り込む

Forkしたリポジトリクローンする

git clone git@github.com:<GITHUB_USERNAME>/amplify-homes.git
cd amplify-homes/

Amplify プロジェクトを初めてローカルでセットアップする場合は、次のコマンドを実行して Amplify CLI をインストールする必要があります

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

すべてのnpm依存関係をローカルにインストールする

npm install

Studio上で、Get component codeをクリック

ダイアログの手順で実行する。まずはUI コンポーネントをアプリのコードベースにプルします。

エディターやら使用フレームワークやらいろいろ聞かれるので、順次選択

? Choose your default editor: (Use arrow keys)
> Visual Studio Code
Android Studio
Xcode (Mac OS only)
Atom Editor
Sublime Text
IntelliJ IDEA
Vim (via Terminal, Mac OS only)
(Move up and down to reveal more choices)

? Choose the type of app that you're building
android
flutter
ios
> javascript

? What javascript framework are you using (Use arrow keys)
angular
ember
ionic
> react
react-native
vue
none

? Source Directory Path: (src)

? Distribution Directory Path: (build)

? Build Command: (npm.cmd run-script build)

? Start Command: (npm.cmd run-script start)

? Do you plan on modifying this backend? Yes
/ Fetching updates to backend environment: devm from the cloud.

amplify pull後、React のコードベースにいくつかの重要なファイルが追加される

「ui-components/」には、Figma ファイルのすべての UI コンポーネントが React コードとして含まれています
「models/」にはデータモデルのローカル表現操作を行える処理が含まれており、DataStore で使用してアプリデータのフェッチ、更新、サブスクライブを行うことができます。
「aws-exports.js」は、API エンドポイント、API キー、Amazon Cognito ユーザープール ID など、バックエンド接続の詳細をすべて定義します。

UI コンポーネントをアプリに追加する。App.js に移動し、UI コンポーネントをインポートします。次に、それらを render 関数に配置します。App.js ファイルは次のようになります。

src\App.js

import './App.css';
import { CardC } from './ui-components';

function App() {
  return (
    <div className="App">
        <CardC />
    </div>
  );
}

export default App;

開発用サーバー起動

npm run start // ここでエラーが出る場合はnode_modulesディレクトリがあるか確認し、なければnpm installを再度実行してからyarn startする

ブラウザでhttp://localhost:3000/が開き、作成したコンポーネントが表示されていればOK以上です。

とても便利だとは思うのですが、個人的には作成したコンポーネントのpropsの書き方が若干癖があるなと思いました...

<Flex
      padding="0px 0px 0px 0px"
      backgroundColor="rgba(255,255,255,1)"
      gap="0"
      width="320px"
      position="relative"
      justifyContent="center"
      direction="column"
      {...rest}
      {...getOverrideProps(overrides, "Flex")}
    >
      <Image
        padding="0px 0px 0px 0px"
        alignSelf="stretch"
        shrink="0"

amplifyを使いこなすには、前述のデータモデルや各コンポーネントのpropsの構成等をしっかり理解しておく必要があると感じました。

まとめ

いかがでしたでしょうか。本記事では、AWS AmplifyとFigmaを連携させて、Reactコンポーネントを生成する方法について紹介しています。簡単な操作だけでFigmaで作成したデザインをReactのコンポーネントとして生成できて便利なのでぜひ参考にしてみてください