Figma와 Storybook 연동은 디자인 시안과 개발 컴포넌트 간의 싱크를 맞추고 디자인-개발 협업 효율성을 극대화하는 효과적인 방법이다.
⚙️ Figma - Storybook 연동 순서
chromatic으로 storybook배포 → figma에서 플러그인 다운로드→ chromatic 계정 인증→ figma 컴포넌트와 연결
- Chromatic으로 Storybook 배포: Storybook을 웹에 배포하여 외부에서 접근 가능하도록 설정한다. (Chromatic 사용 권장, 아래 "Chromatic 배포 및 활용" 섹션 참고)
- Figma 플러그인 설치: Figma에서 "Storybook Connect" 플러그인을 설치한다.
- Figma Plugin 검색: "Storybook connect" 또는 "Chromatic" 검색 후 설치
- Chromatic Figma Plugin
- Chromatic 계정 인증: Figma 플러그인 실행 후 Chromatic 계정으로 로그인한다.
- Figma 컴포넌트와 Storybook 스토리 연결:
- Figma 디자인 컴포넌트 선택 후 플러그인 실행
- 배포된 Chromatic Storybook 링크 입력 및 연결
- Figma 컴포넌트와 Storybook 스토리 매핑
피그마 원하는 컴포는트 누르고 Plugin에서 Storybook connect 설치 후 열기
이렇게 링크연결하는 창이 뜨면
링크복사 붙여넣기
🎉 Figma - Storybook 연동 완료! 🎉
이제 Figma에서 디자인 컴포넌트를 선택하고 플러그인을 실행하면 연결된 Storybook 스토리를 바로 확인할 수 있습니다.
✅ Figma - Storybook 연동 효과
- 디자인 시안과 개발 컴포넌트 비교 용이: Figma에서 바로 Storybook 컴포넌트 확인 가능
- 디자인 변경 사항 즉시 개발 반영 확인: 디자인 수정 후 Storybook에서 변경 사항 빠르게 검증
- 디자인 - 개발 커뮤니케이션 효율 증대: 디자인 시안 기반으로 개발 논의 및 피드백 용이
- UI 일관성 유지 및 디자인 시스템 강화: Figma 디자인 시스템과 Storybook 컴포넌트 라이브러리 연동
💡 Figma - Storybook 연동 팁
- 컴포넌트 명명 규칙 통일: Figma 컴포넌트 이름과 Storybook 스토리 title 을 유사하게 설정하여 연결 및 관리 용이성 향상
- Chromatic 자동 배포 설정: GitHub 연동하여 코드 변경 시 자동으로 Storybook 배포되도록 설정 (최신 정보 유지)
방구석 개발자