디자인 워크플로 확립

[RanolP]

문제 상황

• 오픈 소스 프로젝트임을 고려할 때, 디자인 파일 대신 소스 코드를 진실의 원천으로 두어야 함
  • 그러나 Figma로 빠른 프로토타이핑의 이점을 취하고 싶음
• 디자인 및 프론트엔드 개발 관련 워크플로가 부재하거나 미비함

개선 방향

• 오픈 소스 프로덕트 디자인 시안 제시를 편리하게 할 수 있도록 개선[1]

할 일 목록

분류	설명
🟨 1순위	Figma 시안을 디자이너 개개인이 fork한 후 디자인 제시하는 워크플로 확립하기
🟨 1순위	Storybook Story/HTML을 Figma 시안으로 불러오는 방법 찾기 (Builder.io 솔루션이 좋아보임)
🟦 2순위	Storybook Story/HTML을 Figma 시안으로 자동 sync하기

[1]:

• 디자인 시작 워크플로
  • 새 디자인을 제시하는 경우 (기존 디자인 없음)
    1. Figma로 초기 디자인 작업
    2. 디자인 확정
  • 기존 디자인을 수정하는 경우
    1. 코드 기반으로 생성된 Figma 파일 디자이너가 가져오기
    2. 추가 디자인 작업
    3. 디자인 확정
• 이후 공통 워크플로
  1. 코드로 변경 (이때부터 SSOT가 코드)
  2. 코드를 디자인 시안으로 백포트 (자동화 희망)