Zenn
😽

AWS Amplify Studio(プレビュー版)を触ってみた 【デザインからReactコンポーネントを自動生成】

2021/12/15に公開
AWS
Figma
React
Amplify
tech

執筆の経緯

2021年12月3日、社内Slackにて以下の記事が話題になる。

めちゃくちゃ便利そう！しかし、発表されたばかりということもありあまり情報が転がっていない...

「なら自分で触って社内に共有しよう！」

ということで使い方の大まかな手順と、触ってみて感じたに良いところ、悪いところをまとめてみました。

Amplify Studioとは

Amplify Studioは、Figmaで作成されたデザインをReactのコンポーネントコードに自動的に変換してくれる開発環境のこと。

要は、デザインをもとに自動でコードが生成されますよというもの。

Amplify Studioの導入手順

1. Amplify Studioのプロジェクトを作成

初めてAmplifyプロジェクトを作成する場合は以下の画面になるので使用を開始するを選択。

プロジェクトの名前を決めたらConfirm deploymentを選択。(後から変更可能)

数分後セットアップが完了すると以下の画面になるのでStudioを起動するを選択。

2. FigmaとAmplify Studioを連携

今回はAmplifyがデモ用に用意してくれたデザインを用いて進めます。

Amplify Studioを起動後、UI Library → Get startedを選択。

モーダルが出現するので、①のUse our Figma templateを選択。

Figmaに遷移するので右上のDuplicateを選択。

するとFigmaのプロジェクトが開かれるのでURLをコピー。

コピーしてきたFigmaのURLをペースト＆Continueを選択。

Figmaとの連携が終わるとFigmaでコンポーネントとして定義されているパーツが表示され、それぞれAmplify Studioに取り込むかどうかが聞かれる。
今回はひとまず右上のAccept allを選択する。

3. データの流し込み

データモデルを作成することでコンポーネントに流し込みたいpropsを定義できます。
今回はサンプルとして画像のpropsを受け渡します。

UI Libraryから好きなコンポーネントを選択 →右上のConfigureを選択。

画像を選択(左カラム) → Propsを設定(右カラム)
設定が完了したら右上のCreate collectionを選択。

ひとまずこのまま保存。

4. UI LibraryをReactアプリケーションに取り込む(amplify pull)

まずはcreate-react-appにてReactアプリを用意。

$ npx create-react-app studio-demo

Reactアプリが用意できたらAmplify Studio画面右上よりLocal setup instructionsを選択。
Amplify CLIをまだインストールしていない場合はView Amplify CLI installation instructionsに沿ってCLIをインストール。

無事amplify pullが成功すると/src/ui-componentsにFigmaから自動生成されたコンポーネントが流れこんでくる。

5. 自動生成されたコンポーネントを画面に表示する

必要なライブラリのインストール。

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

以下を/src/index.jsにインポート。

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);

STEP3で定義したimageUrl propがHeroLayout1コンポーネントへ渡せるようになっているので画像URLを流し込みます。
好きなコンポーネントを設置すると...

src/index.jsx
ReactDOM.render(
  <React.StrictMode>
    <AmplifyProvider>
      <NavBar />
      <HeroLayout1 imageUrl="https://picsum.photos/1440/1128" />
      <FeaturesText2x2 />
      <MarketingPricing />
      <Features2x2 />
      <MarketingFooter />
    </AmplifyProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

それっぽいページの完成！
デモはこちら

触ってみた感想

良かった点

  • HTML & CSSを記述することなくピクセルパーフェクトなコンポーネントが自動生成されるのでマークアップの作業工数が大幅に削減できそう。
  • Figmaからデザインを取り込む際、変更箇所の差分が表示されるのでデザインの変更を追いやすい。

悪かった点

  • Figma上でどういうLayoutを組むとどういうCSSが吐き出されるかを完璧に理解する必要がありそう。だが、情報が少ない。
    • Component, Primitive, Auto Layoutこの辺がキーワードになってきそう。
  • デザインの変更によりスタイル崩れが発生得るのでデザイナーとフロントエンドエンジニアが共存している世界線では運用が難しそう。
  • コンポーネントをアプリケーションに取り込むたび上書かれてしまうので自動生成されたコンポーネントを直接編集できない。
    • 公式によると取り込んだコンポーネントをコピペして別コンポーネントとして管理しておけばできるよとのことだがそういうことではない。

まとめ

  • Figmaで完璧なデザインを組むところが大きな課題となりそう。
  • ロジックとの結合が難しいことからアプリケーションの土台として運用するにはまだまだ難しそう。Storybook的なカタログやモックを吐き出す役割としては使えそう。
  • とてもロマンを感じる

参考

Discussion