사용 가이드로 건너뛰기
Figma Generate Library작성자 OpenAI

Figma Generate Library 스킬.

토큰 모델에서 시작해, 통제된 순서로 재사용 가능한 컴포넌트를 만듭니다.

  • Figma
  • 디자인 시스템
  • 컴포넌트 라이브러리
소스 검토 · Figma Generate LibrarySKILL.md
작업 Figma 결과물 • Figma 변수 컬렉션, 시맨틱 별칭, 텍스트 또는 효과 스타일 • 통제된 베리언트 세트를 갖춘 문서화된 재사용 컴포넌트 • 상태 기록부와 최종 바인딩, 네이밍, 시각 검토 시작하기 전에 편집 가능한 파일 접근 권한이 있는 Figma MCP, 저장소 접근 권한, 함께 쓰는 figma-use 스킬과 헬퍼 참고 자료가 필요합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시가 아님

01 기능 소개

코드 기반에서 Figma 라이브러리 구축하기

컴포넌트에 앞서 Figma 변수와 스타일을 구축하며, 저장된 상태 기록과 각 단계의 승인을 거칩니다.

소스 기반 워크플로실행 벤치마크가 아님

작업 방식

Figma Generate Library는 한 번에 화면을 생성하는 도구가 아니라 여러 단계로 이루어진 디자인 시스템 워크플로입니다. 코드, 기존 Figma 파일, 구독 중인 라이브러리를 비교한 뒤 작성에 앞서 토큰과 컴포넌트 범위를 확정합니다. 변수와 스타일이 컴포넌트보다 먼저 만들어지므로 시각 속성을 일관된 기반에 바인딩할 수 있습니다.

소스는 장시간 작업의 상태 관리에 특히 주의를 기울입니다. 생성된 ID, 결정적 이름, 저장된 기록부 덕분에 노드를 중복 생성하지 않고 작업을 재개할 수 있습니다. 컴포넌트 작업에는 베리언트 레이아웃, 텍스트 및 불리언 속성, 아이콘 교체, 문서화가 포함됩니다. 특히 코드와 Figma가 일치하지 않을 때는 사람의 확인 단계가 워크플로의 일부이며, 스킬이 어느 시스템을 기준으로 삼을지 임의로 정하지 않습니다.

예상 결과물

  • Figma 변수 컬렉션, 시맨틱 별칭, 텍스트 또는 효과 스타일
  • 통제된 베리언트 세트를 갖춘 문서화된 재사용 컴포넌트
  • 상태 기록부와 최종 바인딩, 네이밍, 시각 검토
예시 브리프 보기

브리프에서 검토까지

  1. 01
    탐색 및 범위 확정

    코드와 Figma 자산을 조사하고, 라이브러리를 검색하며, 생성 전에 초기 토큰과 컴포넌트 세트를 정확히 합의합니다.

  2. 02
    기반 만들기

    프리미티브 및 시맨틱 변수, 모드, 스코프, 코드 구문을 만든 뒤 타이포그래피와 효과를 만듭니다. 기반 승인을 받은 다음 페이지 구조와 기반 문서를 만들고, 컴포넌트를 시작하기 전에 별도로 승인을 받습니다.

  3. 03
    컴포넌트 단계적 구축

    변수 바인딩, 속성, 문서를 갖춘 컴포넌트를 한 번에 하나씩 만듭니다. 구조와 모양을 검증하고 스크린샷을 보여 준 뒤 승인을 받고 다음 컴포넌트를 시작합니다.

  4. 04
    조정 및 감사

    추측하거나 광범위하게 정리하지 않고, 기록된 ID를 사용해 네이밍, 해결되지 않은 바인딩, 선택적인 Code Connect 매핑을 검토합니다.

02 활용 상황

사용 시점

편집 가능한 파일 접근 권한이 있는 Figma MCP, 저장소 접근 권한, 함께 쓰는 figma-use 스킬과 헬퍼 참고 자료가 필요합니다.

적합한 경우

  • 코드와 라이브러리 정렬구현된 토큰과 컴포넌트에 유지보수 가능한 Figma 대응물이 필요할 때 유용합니다.
  • 통제된 라이브러리 보수일부 자산은 재사용하고, 일부는 래핑하며, 소수는 다시 만드는 격차 분석에 적합합니다.

확인할 한계

  • 단일 호출 생성기가 아님소스는 단계별 작업과 승인 체크포인트를 명시적으로 요구합니다. 대규모 컴포넌트 라이브러리를 한 번의 작업으로 안전하게 만들 수 있는 것처럼 소개해서는 안 됩니다.
  • 충돌에는 책임자의 결정이 필요함코드와 Figma가 다를 때는 어떤 값이나 컴포넌트 계약을 우선할지 제품 또는 디자인 책임자가 결정해야 합니다.

준비할 입력

  • 코드 및 Figma 인벤토리기존 토큰 규칙을 포함해 저장소와 편집 가능한 대상 파일을 제공하세요.
  • 초기 범위첫 사용 가능 버전에 필요한 토큰 컬렉션, 모드, 컴포넌트 계열을 명시하세요.
  • 검토 책임자기반, 컴포넌트, 기존 시스템 간 충돌을 누가 승인할 수 있는지 정하세요.

03 핵심 결정

중요한 결정

  1. 시맨틱 별칭

    소스는 컴포넌트 전반에 원시 값을 중복하지 않고, 원시 프리미티브와 모드를 인식하는 시맨틱 토큰을 분리합니다.

  2. 재개 가능한 생성

    저장된 노드 기록부와 결정적 네이밍 덕분에 중단된 라이브러리 작업을 중복 생성 없이 더 쉽게 재개할 수 있습니다.

04 예시 브리프

집중된 브리프 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

헬퍼 스크립트와 단계별 참고 자료를 포함한 큐레이션 폴더 전체를 사용하세요. 이 베타 자료에는 Figma 개발자 약관이 적용됩니다. Figma 쓰기와 라이브러리 게시는 별도로 승인된 작업으로 취급하세요.

업스트림 소스 파일
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

편집 가능한 파일 접근 권한이 있는 Figma MCP, 저장소 접근 권한, 함께 쓰는 figma-use 스킬과 헬퍼 참고 자료가 필요합니다.

하나의 결과물로 시작하기

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
figma-generate-library를 사용해 우리 코드베이스에 맞는 작은 라이브러리를 계획해 줘: 라이트/다크 모드의 컬러 토큰, 간격, 타이포그래피, Button, Input. 읽기 전용 탐색으로 시작하고 코드와 Figma 간 충돌을 보여 줘. 쓰기 전에 범위 승인을 기다리고, 기반을 먼저 만들고, 각 컴포넌트를 독립적으로 검토하고 재개할 수 있도록 상태 기록부를 유지해 줘.

결과 점검

실제 출력물을 다음의 관찰 가능한 기준과 대조해 확인하세요.

  • 시맨틱 변수는 프리미티브를 참조하며 의도한 모드와 스코프를 가집니다.
  • 컴포넌트 베리언트와 아이콘 교체가 불필요한 조합 없이 합의된 계약과 일치합니다.
  • 기록된 ID, 스크린샷, 바인딩 검사가 완료된 모든 단계를 뒷받침합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 스킬이 번들로 제공된다거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함된다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
OpenAI
저장소
openai/skills
라이선스
Figma 약관
검토한 스냅숏
2026-10-07 · 49f948faa925
편집 소스 요약
컴포넌트에 앞서 Figma 변수와 스타일을 구축하며, 저장된 상태 기록과 각 단계의 승인을 거칩니다.

링크된 소스를 바탕으로 OpenDesign이 직접 작성한 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

화면 생성과 어떻게 다른가요?

토큰 컬렉션, 베리언트, 문서화를 포함해 화면이 사용하는 재사용 가능한 기반과 컴포넌트를 구축합니다.

캔버스 쓰기를 병렬로 실행할 수 있나요?

소스는 상태와 반환된 노드 ID의 신뢰성을 유지하기 위해 Figma 변경을 순차적으로 수행하도록 명시적으로 요구합니다.

기존 라이브러리를 자동으로 대체하나요?

아니요. 생성에 앞서 탐색과 범위 승인이 이루어지며, 재사용 전략은 가져오기나 새 컴포넌트보다 기존 로컬 자산을 우선합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md