[ Storybook for Designer ] Storybook과 Figma 연결하기

Storybook는 여러 플랫폼에서 UI 컴포넌트를 개발, 테스트 및 문서화하기 위한 오픈 소스 도구입니다.

Storybook을 사용하여 다음과 같은 작업을 할 수 있습니다:

• 서로 다른 플랫폼과 기기에서 사용할 수 있는 코드 기반의 컴포넌트를 만듭니다.
• 디자이너, 엔지니어 및 프로덕트 매니저와 함께 작업합니다.
• 전체 어플리케이션을 실행하지 않고도 상호작용 가능한 개발 환경에서 컴포넌트를 쇼케이스 합니다.
• 컴포넌트 구현에 대한 다양한 사용 사례 및 예제를 보여줍니다.
• 프로토타이핑, 테스트 및 문서화를 위한 애드온을 설치합니다.

Storybook과 Figma를 연결하면 디자인을 Storybook에서 볼 수 있으며, Figma에서 story를 볼 수 있습니다.

 

Storybook의 디자인 애드온은 코드 기반의 컴포넌트와 함께 Figma 파일을 임베드할 수 있도록 해줍니다. 반면 Figma와 Storybook 플러그인은 디자인 컴포넌트와 함께 story를 임베드 할 수 있습니다.

 

Storybook에 대해 자세히 알아보려면 문서와 튜토리얼을 참조하세요.

 

About the Storybook plugin

Figma Storybook 플러그인은 Figma에서 컴포넌트 story를 임베드 할 수 있도록 해줍니다. 이를 통해 Figma 파일에서 Storybook의 라이브 구현을 교차 참조할 수 있습니다. 이 플러그인은 Storybook embeds와 Storybook 팀이 만든 배포 도구인 Chromatic으로 구동됩니다.

 

Figma에 Storybook을 임베드하기 전에 다음이 필요합니다:

• Chromatic에 Storybook 프로젝트가 배포되어 있어야 합니다.
• Figma에서 편집 권한이 있어야 합니다.
• Chromatic의 공동 작업자로 등록되어 있어야 합니다.

Figma와 Storybook을 연결하려면 Figma 애드온을 설치해야 합니다.

 

Embed Storybook in Figma

Figma를 Storybook에 연결하려면:

 

플러그인 설치

1. Storybook plugin in the Figma Community으로 갑니다.
2. Install을 클릭합니다.

 

In Storybook

1. Chromatic에 가입합니다.
2. Chromatic에 배포되어있는 Storybook의 story로 갑니다.
3. address bar에 있는 story URL을 복사합니다.

 

In Figma

1. Figma 파일을 엽니다.
2. Figma에서 Storybook 플러그인을 실행합니다.
3. Storybook 플러그인에서는 Figma 컴포넌트, 변형 및 인스턴스에 story를 링크할 수 있습니다. 이에 맞게, 연결할 Figma 컴포넌트를 선택합니다.
4. 플러그인 modal에 URL을 붙여넣기 합니다.
5. Link story를 클릭합니다.
6. Figma에서는 오른쪽 사이드바에 story에 대한 링크를 표시합니다. 컴포넌트가 연결된 경우 해당 컴포넌의 모든 인스턴스에 링크가 표시됩니다.

5. Click  Link story

 

Open a story in Figma

1. Figma에서 이전에 story에 연결한 컴포넌트를 선택합니다.
2. 오른쪽 사이드바에서 view story를 클릭합니다.
3. 또는 Storybook 플러그인을 실행합니다.

Open a story in Figma

 

Embed Figma in Storybook

Storybook의 디자인 애드온은 Figma 파일과 프로토타입을 Storybook에 포함시킬 수 있도록 합니다. Figma Live Embeds로 구동됩니다. 공유 설정에 관계없이 Figma 파일을 Storybook에 포함시킬 수 있습니다. 팀 내에서 비공개 파일을 공유하거나 전 세계와 공개 파일을 공유할 수 있습니다.

 

협력자는 팀 또는 조직 권한에 따라 포함된 내용을 상호작용 할 수 있습니다.

 

1.애드온을 설치합니다:

npm install --save-dev storybook-addon-adesigns
# yarn add -D storybook-addon-designs

2. .storybook/main.js 파일에 애드온을 등록합니다:

// .storybook/main.js
module.exports = { addons: ['storybook-addon-designs']
}

만약 Storybook@5.0.x 버전을 사용한다면, 아래의 모듈로 대신하여 사용하세요.

// .storybook/main.js
import 'storybook-addon-designs/register'

자세한 정보를 원한다면, Figma addon readme Github을 확인하세요.

 

Copy the Figma URL

story에 포함할 file 또는 frame의 URL을 복사합니다.

1. Figma 파일을 엽니다.
2. Share(공유) 버튼을 클릭합니다.
3. Copy link 버튼을 클릭합니다. Figma 웹 앱을 사용하는 경우 브라우저의 주소 표시줄에서 URL을 복사합니다.

내장한 특정 Frame을 선택할 수도 있습니다. 공유 modal에서 선택한 Frame에 Link를 선택합니다.

 

Paste the Figma URL in Storybook

매개 변수를 사용하여 Figma 파일 및 frame을 story에 연결합니다.

 

1. story 파일을 엽니다. (대부분의 경우 *.stories.js처럼 이름이 지정됨)

2. design 이라는 이름의 story 매개변수를 추가합니다:

export const myStory = () => <Button>Hello, World!</Button>myStory.story = {
parameters: {
	design: {
    	type: 'figma',
        url: ''
    }
  }
}

3. URL field에 복사한 URL을 붙여넣기 합니다.

 

 

Open a Figma file in Storybook

1. Storybook을 엽니다.
2. 애드온 패널의 Design 탭을 엽니다.
3. 내장된 Figma 파일을 클릭하여 엽니다.

Open a Figma file in Storybook

 

 

공식 사이트

https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma