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

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

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

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

  • 前提として、AWSFigmaGitHub のアカウントが必要
  • 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 という汎用コンポーネント群をベースにインラインスタイルで実装されています。

ItemCard
/***************************************************************************
 * 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>
  );
}

おわりに

Amplify Studio で Figma から React コンポーネントを生成してみました。Amplify Studio 上でインポートしたコンポーネントに対して props の追加もできます。UI 部分も AWS サービスに統合されることでよりシームレスな開発が可能になりそうです。

ただ、プロジェクト内にコード生成した際に、生成に失敗するコンポーネントもあって、エラーからは何が原因かわからず調査中です(僕のやり方が間違っている可能性も大いにありますが)。

以上、お読みいただきありがとうございました。

この機会に、オンラインで気軽に面談してみませんか?

現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。