Figma + Amplify Studio で React コンポーネントのコードを自動生成する

gaji-staff

2022.7.22

学びの共有

以下のチュートリアルを試して、実際にどんなコードが生成されるのか試してみました。

AWS Amplify Studio – 最小限のプログラミングでFigmaからフルスタックのReactアプリを実現

このチュートリアルの大まかな流れは以下のようになっています。

前提として、AWS・Figma・GitHub のアカウントが必要
GitHub のサンプルリポジトリをフォークして、フォークしたリポジトリをもとに Amplify アプリケーションをデプロイする（チュートリアル内にあるボタンから一発でできます）
アプリがデプロイできたら Amplify Console から Amplify Studio を起動する
デモ用に AWS Amplify UI Kit をコピーする（すでに Figma プロジェクトがある方はそれを使ってもかまいません）
Amplify Studio と Figma を連携して、Figma のコンポーネントを Amplify Studio へインポートする
ローカルでフォークしたリポジトリのプロジェクトを開き、amplify pull –appId <YOUR_APP_ID> –envName <YOUR_ENV> を実行する（Amplify CLI が必要です）
🎉 Figma コンポーネントが React コンポーネントのコードに変換されてプロジェクト内に生成される 🎉

最終的に以下のように React コンポーネントのファイルが生成されます。

生成された React コンポーネントのコードは以下のようになっていました。Chakra UI のレイアウトコンポーネントのように @aws-amplify/ui-react という汎用コンポーネント群をベースにインラインスタイルで実装されています。

/***************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

/* eslint-disable */
import React from "react";
import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import { Badge, Flex, Text } from "@aws-amplify/ui-react";
export default function ItemCard(props) {
  const { overrides: overridesProp, ...rest } = props;
  const overrides = { ...overridesProp };
  return (
    <Flex
      gap="16px"
      direction="column"
      width="320px"
      position="relative"
      padding="16px 16px 16px 16px"
      backgroundColor="rgba(255,255,255,1)"
      {...rest}
      {...getOverrideProps(overrides, "Flex")}
    >
      <Badge
        display="flex"
        gap="0"
        direction="column"
        width="fit-content"
        justifyContent="flex-start"
        alignItems="center"
        shrink="0"
        position="relative"
        borderRadius="32px"
        backgroundColor="rgba(239,240,240,1)"
        fontSize="12px"
        lineHeight="12px"
        fontFamily="Inter"
        fontWeight="400"
        color="rgba(13,26,38,1)"
        textAlign="left"
        size="small"
        variation="default"
        children="New"
        {...getOverrideProps(overrides, "Flex.Badge[0]")}
      ></Badge>
      <Flex
        gap="0"
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        shrink="0"
        alignSelf="stretch"
        objectFit="cover"
        position="relative"
        padding="0px 0px 0px 0px"
        {...getOverrideProps(overrides, "Flex.Flex[0]")}
      >
        <Flex
          gap="0"
          direction="column"
          shrink="0"
          height="44px"
          position="relative"
          padding="0px 0px 0px 0px"
          {...getOverrideProps(overrides, "Flex.Flex[0].Flex[0]")}
        >
          <Text
            fontFamily="Inter"
            fontSize="16px"
            fontWeight="700"
            color="rgba(13,26,38,1)"
            lineHeight="20px"
            textAlign="left"
            display="flex"
            direction="column"
            justifyContent="flex-start"
            shrink="0"
            position="relative"
            padding="0px 0px 0px 0px"
            whiteSpace="pre-wrap"
            children="T-Shirt"
            {...getOverrideProps(overrides, "Flex.Flex[0].Flex[0].Text[0]")}
          ></Text>
          <Text
            fontFamily="Inter"
            fontSize="16px"
            fontWeight="400"
            color="rgba(48,64,80,1)"
            lineHeight="24px"
            textAlign="left"
            display="flex"
            direction="column"
            justifyContent="flex-start"
            letterSpacing="0.01px"
            shrink="0"
            position="relative"
            padding="0px 0px 0px 0px"
            whiteSpace="pre-wrap"
            children="Classic Long Sleeve"
            {...getOverrideProps(overrides, "Flex.Flex[0].Flex[0].Text[1]")}
          ></Text>
        </Flex>
        <Text
          fontFamily="Inter"
          fontSize="16px"
          fontWeight="400"
          color="rgba(13,26,38,1)"
          lineHeight="20px"
          textAlign="right"
          display="flex"
          direction="column"
          justifyContent="flex-start"
          shrink="0"
          position="relative"
          padding="0px 0px 0px 0px"
          whiteSpace="pre-wrap"
          children="$99"
          {...getOverrideProps(overrides, "Flex.Flex[0].Text[0]")}
        ></Text>
      </Flex>
    </Flex>
  );
}