플러스프로젝트 배경
1) 문제점 - Figma Variables에 정의된 디자인 값을 개발 코드로 직접 옮길 때 반복 작업이 발생함 - CSS, SCSS, TypeScript, Tailwind 등 사용 환경마다 별도의 변환 작업이 필요함 - 토큰명, 단위, 타입 처리 방식이 달라 디자인과 개발 결과가 불일치할 수 있음 - 비정상 숫자값이나 이름 충돌이 포함될 경우 잘못된 코드가 생성될 가능성이 있음 2) 프로젝트
프로젝트 성과
6개 포맷 동시 생성
입력 파일 하나를 기반으로 JSON, TypeScript, CSS, SCSS, Tailwind CSS, DTCG 파일을 한 번에 생성하도록 구현했습니다.
총 32개 자동화 테스트 구축
core, CLI, plugin 패키지의 정상 동작과 주요 엣지 케이스를 검증하는 총 32개의 테스트를 구축했습니다.
npm 0.1.3 정식 배포
GitHub Actions와 Trusted Publishing을 구성하여 figma-token 0.1.3을 npm latest 버전으로 배포했습니다.
비정상 토큰값 방어
NaN, Infinity, 빈 값, 이름 충돌과 컬렉션 오분류를 검증하고 잘못된 결과물이 생성되지 않도록 개선했습니다.
핵심 기능
디자인 토큰 6개 포맷 변환
입력 파일 하나로 JSON, TypeScript, CSS, SCSS, Tailwind CSS, DTCG 파일을 동시에 생성합니다.
진행 단계
요구사항 및 구조 설계
2026.07.
지원할 토큰 타입과 6개 출력 포맷을 정의하고 core, CLI, plugin 모노레포 구조를 설계했습니다.
프로젝트 상세
1) 포트폴리오 소개 : 서비스 카테고리(ex. 커머스, AI 등)와 메인 타깃(ex. 주부, 청소년) 등을 포함한 간략한 소개 - 예시 : 주부들을 위한 생활용품 커머스 개발 2) 작업 범위 : 개발에 참여한 범위 및 지원환경 - 예시) 서버 구축, Front-end 개발, 관리자 페이지 개발 등 - 예시) 반응형 웹, Android, iOS 등 3) 주요 업무 : 해당 서비스의 주요 기능
