CodeFig 2.0 출시
요약
CodeFig 2.0은 Figma용 JavaScript 러너 플러그인으로, 디자인 시스템의 변수, 스타일, 프라임티브 등을 프로그래밍 방식으로 관리할 수 있게 합니다. 이 라이브러리는 스크립트 변수를 UI 컴포넌트로 렌더링하는 '플러그인 샌드박스' 역할을 수행하며, 다양한 유틸리티와 기초 기능을 제공합니다.
핵심 포인트
- Figma 디자인 시스템 관리를 위한 강력한 JS 러너 플러그인입니다.
- 변수, 스타일, 프라임티브 등을 코드로 제어하여 반복 작업을 자동화할 수 있습니다.
- 로컬 저장소 및 JSON 내보내기/가져오기를 지원하며, 조직 단위 배포도 가능합니다.
또 하나의 '바이브' 코딩 플러그인입니다... CodeFig은 Figma용 Javascript 러너로, Variable, Style, Figma primitives 등 다양한 작업을 위한 광범위한 모듈식 라이브러리를 갖추고 있으며, 단순 코드 대신 내장 UI 라이브러리를 사용하여 스크립트 변수를 UI 컴포넌트로 렌더링합니다. 그래서 일종의 플러그인 샌드박스 역할을 합니다. 이 플러그인은 많은 포함된 스크립트를 제공하며, 사용자가 직접 만들 수도 있습니다. 스크립트는 로컬 저장소(사용자별)에 저장하거나, JSON으로 내보내기/가져오기가 가능하며, 보이지 않는 문자열 변수(CodeFig에서만 보이도록 설정 가능)로 저장하여 라이브러리를 통해 여러 사용자에게 배포할 수도 있습니다(Orgs를 위한 기능입니다). 현재 포함된 스크립트는 다음과 같습니다: 유틸리티 스크립트: 3D Transform Check 스타일 및 변수 바인딩 분리 스타일 및 변수 교체 로컬 스타일 내 변수 대체 스타일 또는 변수를 이용한 선택 스타일 또는 변수에 복사 또는 이동 변수 복제 변수 컬렉션 내보내기/가져오기 변수 색상을 컬렉션 변수에 맞추기 변수 이름 변경 변수 대체 선택 영역을 변수로 지정 변수 인스펙터 (WIP) 스타일 컬렉션 복제 로컬 스타일 재연결 스타일 이름 변경 스타일 렌더링 개요 스타일 대체 텍스트를 스타일로 변환 대소문자 변경 주석을 어노테이션으로 변환 프레임 또는 오토 레이아웃 선택 로컬 컴포넌트 인스턴스 재연결 불필요한 중첩 제거 요소 크기 조정 또는 리사이즈 디자인 시스템 기초: 색상 모서리 반경 그리드 간격 타이포그래피 라이브러리: Bezier CodeFigUI 컬러 램프 코어 라이브러리 기초 기초 개요 InfoPanel 선형 램프 수학 도우미 OKLCH 패턴 매칭 이름 변경 미리보기 대체 엔진 크기 모델 스타일 테스트 하네스 타입 스케일 변수 저는 이 플러그인을 오랫동안 (거의 1년 동안) 작업해 왔고, 매일 사용하고 있습니다. 저는 브랜드 디자이너와 제품 디자이너 사이의 역할을 하며, 반응형 레이아웃, UI 디자인 및 플로우 작업을 수행하며, 종종 다양한 그리드, 색상, 타이포그래피 등의 시스템을 다루는데, 이 플러그인은 이러한 요소들을 프로그래밍 방식으로 관리할 도구가 부족하다는 좌절감에서 탄생했습니다.
네, 에이전트로는 많은 것을 할 수 있고, 많은 경우에 에이전트가 훨씬 더 좋은 결과를 내지만, 반복적인 작업이나 운영(operations)의 경우에는 차라리 에이전트에게 스크립트를 만들도록 요청하는 편입니다. 제가 이것을 항상 사용하고 테스트하며 버그를 수정하기 때문에, 모든 스크립트는 복잡성이 있습니다. 아마도 더 많은 것이 있을 테니, 발견하면 저에게 핑을 주시거나 어딘가에 댓글을 남겨주세요. 감사합니다! 무료이며 Github와 Figma Marketplace에 /u/marxcie가 제출했습니다. [link] [comments]
AI 자동 생성 콘텐츠
본 콘텐츠는 r/FigmaDesign (top/week)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기