AWS Amplify Studio を使うと、Figma のデザインを基に、ほぼコードを書かず、自動で React を作成してくれます。

Figma のデザインを作成する。

Figma のデザインを作成するには、Figma のコミュニティ( https://www.figma.com/community/file/1047600760128127424 )から、AWS Amplify UI キットを取得します。

image2

まずは、Figma にログインします。

『Duplicate』ボタンをクリックします。

image3

Figma のデザインが生成されました。

image4

左サイドバーの『Examples』をクリックしてみると、

image5

商品画面が表示されました。

AWS Amplify Studio と Figma を連携する

Figma で作成したデザインを、Amplify Studio に連携します。

Figma の右上にある『Share』をクリックします。

image6

AWS Amplify Studio( https://aws.amazon.com/jp/amplify/studio/ )へアクセスします。

image7

『Get started for free』をクリックしましょう。

image8

左メニュの『UI library』をクリックします。

image9

『Deploy to AWS to get started』をクリックします。

image10

AWS にログインしましょう。

image11

『confirm deployment』をクリックします。

image12

設定が完了した後、『Studio を起動する』をクリックします。

image13

左メニューの『UI Library』をクリックします。

image14

『Get started』をクリックします。

image15

先程 Figma でコピーした URL を、Paste your Figma file link の下に貼り付けます。

image16

『continue』をクリックします。

image17

『Allow Access』をクリックします。

image18

画面右上の『Accept all』をクリックします。

image19

UI コンポーネントが出来上がりました。

image20

UI コンポーネントをローカルにセットアップする

先程 Amplify Studio で作成した UI コンポーネントをローカルにセットアップします。

Amplify CLI をインストールしていない場合は、ターミナルでnpm install --save aws-amplify @aws-amplify/ui-react を実行します。

プロジェクトを一から作成する場合、npx create-react-app 〇〇で、react を作成します。

Amplify CLI をインストール完了した後、AWS Amplify Studio の右上にある、『Local setup instructions』をクリックします。

image21

amplify pull から始まるコードをコピーします。

image22

プロジェクトのディレクトリを作成し、コピーしたコードを実行します。

image23

しばらくすると、ブラウザが開きログインしていいか聞かれるので、『Yes』をクリックします。

image24

ログインが完了しました。

image25

ターミナルに戻ります。

エディタを聞かれるので、Visual Studio Code にします。

image26

javascript にします。

image27

react にします。

image28

ソースディレクトリは、src にしたいので、そのままエンターキーを押します。

image29

そのあと聞かれることは、全てエンターキーを押します。

設定が完了しました。

image30

プロジェクトを開いてみると、

image31

amplifyフォルダとui-componentsフォルダが追加されました。

UI コンポーネントを使用する

実際に、UI コンポーネントを使用してみましょう。

まずは、プロジェクトのディレクトリのターミナルで、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)

AppAmplifyProviderでラップします。

<AmplifyProvider>
  <App />
</AmplifyProvider>

これで、ui-componentsの中身を使用する準備ができたので、実際に使用してみます。

App.jsx で、ui-componentsHeroLayout1を使ってみます。

import "./App.css"
import HeroLayout1 from "./ui-components/HeroLayout1"

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

export default App

npm run startでプロジェクトを起動すると、

image32

画面が表示されました。

Figma の HeroLayout1 の画像なしと同じデザインになりました。

image33

次回は、Figma のデザインを基に作成した React を修正します。

ブログ一覧