콘텐츠로 건너뛰기

Figma와 React로 자동화된 디자인 시스템 구축하기

  • 테크

📌 개요

  • 디자인 변경에 따른 비효율 해소 디자인 변경 시 수작업으로 수정해야 하는 불편함과 시간 낭비를 줄이기 위함
  • 디자인과 개발 간 불일치 해결 디자인 의도를 정확히 구현하고, 협업 과정에서 발생하는 오류와 중복 작업을 방지하기 위해 도입
  • 효율적인 작업 환경 구축 스타일 관리와 UI 구현을 체계화하여, 작업 과정을 간소화하고 생산성을 높이기 위함

📌 프로세스

📌 자세히 보기

⚙️Figma 디자인 시스템 업데이트

1. Tokens Studio for Figma 플러그인을 이용해서 디자인 토큰 구현

2. GitHubTokens Studio for Figma 연동
  1. Settings > Add new sync provider에서 GitHub 선택
  2. Sync to GitHub에 사진과 같이 정보 입력
  3. 연동이 성공적으로 되었을 경우 Push to GitHub라는 창에서 최초 커밋 메세지를 입력한 후 Push Change를 눌러 설정한 경로에 디자인 토큰 JSON파일 생성

*GitHub Access Token을 우선 발급‼️

⚙️Style Dictionary설치 & 설정 파일 생성

  • 설치: npm install style-dictionary
  • 설정 파일 생성: 루트 경로에 style-dictionary.config.json 파일 생성

✨디자인 토큰 JSON파일내에서 참조값을 읽어내지 못하는 오류가 발생한다면 resolveReferences를 true로 설정해 임의로 참조 설정을 조정해줍니다.

⚙️GitHub Action 설정

Tokens Studio for Figma에서 변경 내용을 GitHub에 Push할 때 자동으로 디자인 토큰 JSON파일을 변환하는 작업을 진행

.github/workflows/000.yml 파일 생성
  • npm run token-build는 package.json 파일에서 등록된 명령어를 실행
    • 디자인 토큰 json파일을 변환하는 작업을 실행

⚙️GitHub Action 설정

  1. 앞 작업들이 모두 성공적으로 진행될 경우 React에서 사용하기 편한 JS파일 생성

2. 해당 JS파일과 Styled-Component를 이용해서 공통 컴포넌트를 생성

📌 기대 효과

1. 디자인 시스템과 코드의 동기화

  • 디자인 변경 사항의 실시간 반영: Tokens Studio에서 관리되는 Figma 디자인 토큰을 GitHub Actions을 통해 자동으로 적용 가능

2. 개발 프로세스 자동화 및 생산성 향상

  • 반복 작업을 줄여 시간 절약작업 정확도를 극대화

3. 유지보수성과 확장성의 극대화

  • 디자인 변경 관리 용이: dark.json, light.json 등 토큰 세트를 기반으로 다크 모드다양한 테마 지원이 간단하게 구현 가능
  • 컴포넌트 재사용성 증가: styled-components를 활용해 버튼, 카드 등 UI 컴포넌트를 토큰 기반으로 설계하여 일관된 디자인 보장
  • 디자인 가이드 준수와 개발 속도 향상

4. 협업 효율성 향상

  • 디자이너와 개발자의 원활한 협업:
    • 디자인 변경 사항이 GitHub Actions를 통해 자동으로 PR로 반영되기 때문에, 디자이너는 개발 환경에 대한 고민 없이 디자인 작업에 집중 가능
    • 결과: 협업 프로세스가 효율적으로 개선되고, 팀 전체의 생산성이 증가
  • 디자인 팀과 개발 팀 간의 의사소통 오류와 데이터 불일치 문제 감소

5. 일관된 사용자 경험(UX) 제공

  • 디자인 표준화로 UX 향상: 모든 UI 요소가 동일한 토큰을 기반으로 정의되기 때문에, 애플리케이션 전반에서 일관된 사용자 경험(UX)을 제공
    • 예시: 버튼 간 여백, 컬러 팔레트, 경계선 등을 일관된 기준으로 적용
  • 다국어 및 다양한 플랫폼 지원 준비:
    • 토큰 기반의 스타일링은 다양한 언어, 플랫폼별 디자인 차이를 유연하게 지원할 수 있도록 확장성 제공

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다