[Next] Storybook으로 UI 컴포넌트 문서화하기 (4) - Figma 연동하기

안녕하세요. J4J입니다.

 

이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 마지막인 figma 연동하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

이전 글

 

[Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정

[Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용

[Next] Storybook으로 UI 컴포넌트 문서화하기 (3) - Path Alias 사용

 

 

반응형

 

 

Figma 연동하는 이유

 

일반적으로 개발되는 서비스 및 storybook에 표현되는 다양한 컴포넌트 UI들은 개발자가 직접 디자인을 하여 구현된 것이 아닌 디자이너와 협업을 통해 만들어진 결과물일 것입니다.

 

그러다 보니 자연스럽게 행해지는 플로우는 디자이너가 figma와 같은 디자인 툴에 서비스에 사용될 UI를 그려주고 퍼블리셔가 그려진 디자인에 맞게 css 작업을 진행하게 됩니다.

 

css 작업이 완료된 결과물은 storybook에 보이게 될 텐데 storybook에 최종적으로 보이는 컴포넌트 UI가 figma와 동일하게 작업이 이루어진 것인지 확인 절차가 필요합니다.

 

그래서 figma도 접속하고 storybook도 접속하여 각 컴포넌트에 맞는 디자인들을 찾아가며 비교를 할 것입니다.

 

 

 

storybook과 figma를 연동하면 연동 이후부터는 figma의 접속 없이도 storybook에서 figma에 그려진 UI가 무엇인지 바로 확인할 수 있습니다.

 

지속적으로 figma와 storybook를 각각 접속하여 비교해보는 불필요함도 제거할 수 있고 storybook에서 바로 확인이 가능하기에 더 효율적인 UI 작업이 가능해집니다.

 

 

 

 

Storybook Figma 연동 방법

 

figma를 연동하기 위해 figma에 샘플 페이지를 작성하여 storybook에 보이는 컴포넌트와 동일하게 UI가 보이도록 다음과 같이 만들어 봤습니다.

 

figma sample

 

 

 

위처럼 연동할 figma 페이지가 존재한다면 다음과 같이 설정하여 figma를 storybook에 연동해 보도록 하겠습니다.

 

 

 

 

[ 1. 패키지 설치 ]

 

$ npm install -D @storybook/addon-designs

 

 

 

[ 2. storybook 설정에 addon 추가 ]

 

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
    // storybook에 사용되는 추가 기능 설정
    addons: [
        '@storybook/addon-designs', // storybook에 design 속성 기능 제공 (figma 등 활용 가능)
    ],
};

export default config;

 

 

 

[ 3. storybook UI에 figma 링크 추가 ]

 

이전 글에서 만들어 두었던 button stories에 다음과 같이 parameters에 figma 페이지 url을 추가하면 됩니다.

 

// Button.stories.tsx
import Button from '@/components/molecules/button/Button';
import { Meta, StoryObj } from '@storybook/react';

const meta = {
    title: 'Molecules/Button',
    component: Button,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    args: {
        type: 'button',
    },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Color: Story = {
    args: {
        children: 'color',
        color: 'primary',
    },
    parameters: {
        // figma 연동
        design: {
            type: 'figma',
            url: 'figma page link url을 추가하세요',
        },
    },
};

 

 

 

 

Figma 연동 적용 확인

 

figma를 연동하기 이전에는 원래 다음과 같이 storybook에 design 이라는 탭이 존재하지 않습니다.

 

figma 연동 적용 전

 

 

 

 

하지만 연동을 한 이후부터 design 탭이라는 것이 존재하게 되고 figma 연동을 한 컴포넌트라면 다음과 같이 figma에 보여야 할 화면이 storybook에 같이 표현되는 것을 확인할 수 있습니다.

 

figma 연동 적용 후

 

 

 

 

 

 

 

 

이상으로 storybook으로 UI 컴포넌트 문서화하기 마지막인 figma 연동하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.