피그마 플러그인을 통한 개발 생산성 끌어올리기

간단 소개

피그마 플러그인을 개발하여 tailwindcss 스타일을 자동 생성, 개발 생산성을 향상시키고 디자인 시스템을 효율적으로 관리합니다.

AI Summary

피그마 플러그인 개발 동기 및 목표
- styled-components의 런타임 오버헤드 문제와 LLM을 활용한 생산성 향상을 위해 tailwindcss로 전환 결정
- 피그마에서 바로 tailwind 클래스를 생성하는 플러그인 개발 필요성 인식
피그마 플러그인 개발 과정
- 디자인 시스템에 맞는 정규식을 활용하여 디자인 토큰 및 프로퍼티 정보 추출
- 피그마 API를 활용하여 노드의 CSS 속성, 스타일 정보 획득 및 Auto Layout, 컴포넌트, CSS 정보 처리
- AutoLayoutMixin을 활용하여 레이아웃 속성을 tailwind 클래스로 매핑, 컴포넌트 코드 자동 생성, 색상/패딩/그림자/테두리 스타일 추출 및 적용
플러그인 결과 및 효과
- UI 컴포넌트 개발 속도 향상 및 워크플로우 개선
- 디자인 시스템의 중요성 재확인 및 지속적인 플러그인 개선 계획