📌 개요
- 디자인 변경에 따른 비효율 해소 디자인 변경 시 수작업으로 수정해야 하는 불편함과 시간 낭비를 줄이기 위함
- 디자인과 개발 간 불일치 해결 디자인 의도를 정확히 구현하고, 협업 과정에서 발생하는 오류와 중복 작업을 방지하기 위해 도입
- 효율적인 작업 환경 구축 스타일 관리와 UI 구현을 체계화하여, 작업 과정을 간소화하고 생산성을 높이기 위함
📌 프로세스
📌 자세히 보기
⚙️Figma 디자인 시스템 업데이트
1. Tokens Studio for Figma 플러그인을 이용해서 디자인 토큰 구현

2. GitHub와 Tokens Studio for Figma 연동
- Settings > Add new sync provider에서 GitHub 선택
- Sync to GitHub에 사진과 같이 정보 입력
- 연동이 성공적으로 되었을 경우 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 설정
- 앞 작업들이 모두 성공적으로 진행될 경우 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)을 제공
- 예시: 버튼 간 여백, 컬러 팔레트, 경계선 등을 일관된 기준으로 적용
- 다국어 및 다양한 플랫폼 지원 준비:
- 토큰 기반의 스타일링은 다양한 언어, 플랫폼별 디자인 차이를 유연하게 지원할 수 있도록 확장성 제공