AWS Amplify Studio - Figma 디자인을 바로 리액트 컴포넌트로 만드는 법

AWS Amplify Studio는 Figma 디자인을 바로 리액트 컴포넌트로 변환해주는 기능을 제공한다. 이를 통해 개발자는 디자이너와의 협업을 보다 쉽고 빠르게 할 수 있다.

단계 1: Amplify Studio 설치하기

Amplify Studio를 사용하기 위해서는 먼저 설치가 필요하다. Amplify CLI를 설치하고, Amplify Studio를 초기화한다.

$ npm install -g @aws-amplify/cli
$ amplify configure
$ amplify init

단계 2: Figma 파일 가져오기

Amplify Studio에서 Figma 파일을 가져오기 위해서는 Figma API 토큰이 필요하다. Figma API 토큰을 발급받은 후, 다음 명령어를 실행한다.

$ amplify import figma

이후 Figma 파일의 URL과 토큰을 입력하면 Amplify Studio에서 파일을 가져올 수 있다.

Figma API 토큰 발급

Figma API 토큰을 발급받으려면 다음 순서를 따르면 된다.

1. Figma 웹사이트에 로그인한다.
2. Account Settings(계정 설정)으로 이동한다.
3. Create a new personal access token(새 개인 액세스 토큰 만들기)을 클릭한다.
4. 개인 액세스 토큰 이름을 입력하고, 필요한 권한을 선택한다.
5. Create Token(토큰 만들기)을 클릭한다.
6. 생성된 토큰을 안전한 장소에 보관한다.

이제 이 토큰을 Amplify Studio에서 사용할 수 있다.

단계 3: 디자인 컴포넌트 생성하기

Amplify Studio에서 Figma 파일을 가져오면, 리액트 컴포넌트로 변환하는 작업을 진행할 수 있다. 다음 명령어를 실행하여 변환 작업을 시작한다.

$ amplify add codegen

이후, GraphQL 코드 생성기를 선택한다. 그리고 Figma 파일에서 사용할 디자인 컴포넌트를 선택하여 생성 작업을 완료한다.

단계 4: 생성된 컴포넌트 사용하기

생성된 리액트 컴포넌트는 Amplify Studio에서 자동으로 생성된다. 이를 사용하기 위해서는 다음과 같은 코드를 작성하면 된다.

import { ComponentName } from './generated/components';

function App() {
  return (
    <div>
      <ComponentName />
    </div>
  );
}

위와 같은 방법으로 Figma 디자인을 리액트 컴포넌트로 변환하여 사용할 수 있다.

참고

AWS Amplify Studio — Figma 디자인을 바로 리액트 컴포넌트로 만드는 법(번역)

피그마 웹 소스 출력은 없나? 플러그인이 있을거 같은데?! 사용법