Pink Bobblehead Bunny 2025 피그마 디자인시스템 업데이트
 

2025 피그마 디자인시스템 업데이트

Figma가 디자인 시스템 관리의 중심 플랫폼으로 진화하고 있다는 소식이 반갑게 들려왔습니다.
최근 공개된 업데이트는 단순한 기능 추가를 넘어,
“디자인 → 코드 → 배포”의 전체 워크플로우를 한층 유기적으로 연결하려는 Figma의 방향성을 잘 보여줍니다.
이번 글에서는 새롭게 공개된 주요 업데이트 내용을 정리해보겠습니다.


💎 1. 모드(Mode) 수량 확장 — 플랜별 기능 업그레이드

먼저 가장 눈에 띄는 변화는 모드 추가 수량의 확대입니다.
Figma는 이번 업데이트에서 요금제별 모드 제한을 대폭 완화했습니다.

요금제 기존 변경 후
Pro 4개 10개
Organization 4개 20개
Enterprise - 40개

디자인 시스템을 실제로 운영하다 보면, 테마(다크/라이트), 브랜딩, 지역별 컬러셋 등 다양한 변형이 필요합니다.
기존의 제한은 실무에서 상당히 불편한 제약이었죠.
이번 확장으로 인해, 팀 단위로 다양한 UI 모드와 테마를 동시에 관리할 수 있게 되면서
‘복잡한 시스템을 단일 라이브러리 안에서 제어하는 구조’가 훨씬 유연해졌습니다.


📂 2. Extended Collection — 에셋 관리 효율 극대화 (11월 출시 예정)

다음으로 발표된 기능은 Extended Collection입니다.
11월에 점진적으로 배포될 예정이며, 컬렉션 단위로 묶어 관리하는 기능입니다.

그동안 컴포넌트, 변수를 포함한 라이브러리 구조가 복잡해질수록
팀 간 공유나 변경 관리가 어려웠는데,
이제 컬렉션 단위로 그룹화 및 접근 제어를 할 수 있게 됩니다.
특히 대규모 조직에서 여러 디자인 시스템을 동시에 운영할 때
하나의 중앙 컬렉션을 기반으로 하위 시스템을 연결하기가 쉬워질 것으로 보입니다.

또한, 이번 업데이트에서는 컴포넌트/변수 불러오기 속도와 성능이 함께 최적화되어
대형 프로젝트에서도 로딩 속도나 렌더링 이슈가 개선될 것으로 기대됩니다.


💻 3. Code Connect UI 정식 출시 — 디자인과 코드의 실질적 연결

디자인과 개발의 가장 큰 간극을 줄이는 기능이 바로 Code Connect입니다.
이번에 드디어 UI 기반의 정식 버전이 공개되었습니다.

Code Connect는 말 그대로 Figma 디자인 시스템을 실제 코드베이스와 직접 연결할 수 있는 기능입니다.
이제 디자인에서 정의된 컴포넌트가 React나 다른 프레임워크 내 실제 코드 구성과 연결되어
변경 시 양쪽이 동기화되는 형태로 유지보수가 가능해집니다.

즉, “Figma가 개발 문서와 코드 브리지 역할을 한다”는 의미입니다.
이 기능이 활성화되면 디자이너는 코드 구조를 더 명확히 이해할 수 있고,
개발자는 디자인 변경사항을 빠르게 반영할 수 있게 됩니다.


🧱 4. Figma Make — 디자인 시스템의 코드 생성기 (얼리 액세스)

Figma가 새롭게 선보인 Make 기능은 “디자인을 코드로 변환하는 자동화 툴”이라 할 수 있습니다.

현재는 얼리 액세스(사전 신청 유저 전용) 상태지만, 이미 흥미로운 기능이 다수 공개되었습니다.

  • Figma Design 라이브러리를 Make로 가져와서,
    컴포넌트·스타일·변수를 React 기반 코드와 CSS 파일로 자동 변환 가능
  • 디자이너가 직접 디자인 시스템 키트를 코드 형태로 배포할 수 있는 구조

즉, “디자인 파일 → 컴포넌트 코드”로 바로 이어지는 파이프라인이 생긴 셈입니다.
개발자 없이도 프로토타입 수준을 넘어, 실제 코드 형태의 산출물을 만들 수 있는 시대가 열리고 있습니다.


🔌 5. Slots 기능 — 컴포넌트 유연성 극대화

이번 업데이트 중에서도 실무 디자이너들에게 가장 반가운 소식 중 하나는 Slots 기능입니다.
Slots는 인스턴스 내부에 다른 레이어나 컴포넌트를 추가할 수 있게 해주는 구조적 확장 기능입니다.

쉽게 말하면, 하나의 컴포넌트 슬롯 안에 텍스트, 이미지, 버튼 등 다양한 서브 컴포넌트를 자유롭게 교체하거나 추가할 수 있게 된 것입니다.
이전까지는 인스턴스를 편집하기 위해 ‘Detach’ 과정을 거쳐야 했지만, Slots 기능 덕분에 유연성과 재사용성이 크게 향상되었습니다.
이는 디자인 시스템의 유지보수성을 극대화하는 핵심 포인트라 할 수 있습니다.


🧩 6. 디자인 린트 기능 — 오류 감지 자동화 (얼리 액세스)

이제 Figma 내부에서 자체적으로 디자인 품질 검사가 가능해졌습니다.

새로 추가된 “디자인 린트(Design Lint)” 기능은 누락된 변수나 잘못된 연결을 자동으로 감지해줍니다.

기존에는 외부 플러그인을 통해서만 가능했던 작업이 이제 Figma 자체 기능으로 내장된 것이죠.
아직은 얼리 액세스 단계이지만, 대규모 팀에서 디자인 품질을 일정하게 유지하는 데 큰 도움이 될 것으로 보입니다.


⚙️ 7. npm 빌드 기능 — 개발 파이프라인으로의 확장

이번 업데이트에서 또 하나 주목할 부분은 npm 빌드 지원 기능입니다.
자체 디자인 시스템을 운영 중인 팀은 이제 npm 명령어를 통해 Figma에서 생성된 React 기반 코드를 바로 불러와 작업할 수 있게 됩니다.

즉, 디자인 시스템이 더 이상 “디자인 툴 안에만 존재하지 않고”, 코드 환경으로 직접 배포되는 방향으로 진화하고 있다는 뜻입니다.
이는 디자인 시스템을 실제 제품 코드와 완전히 통합하려는 Figma의 전략적 행보로 해석할 수 있습니다.


🧠 8. MCP 기능 정식 출시 — 디자인 코드의 ‘맥락’을 불러오다

마지막으로 소개할 기능은 MCP (Model Context Protocol)의 정식 출시입니다.
MCP는 간단히 말해, 디자인 시스템 코드의 “맥락(Context)”을 불러오고 해석하는 기능입니다.

즉, 단순히 시각적 결과물이 아니라 해당 컴포넌트가 어떤 구조, 어떤 변수, 어떤 코드 흐름과 연결되어 있는지를
AI 기반으로 파악하고 도와주는 기능입니다. 이로써 디자이너가 코드를 더 쉽게 이해하고,
개발자는 디자인 의도를 더 명확히 파악할 수 있게 됩니다.


🔎 마무리 — Figma, 디자인 시스템의 ‘플랫폼화’ 선언

이번 업데이트는 단순한 UI 개선이 아닙니다.
Figma가 디자인 시스템 플랫폼으로 진화하고 있다는 선언에 가깝습니다.

  • 디자인 자산을 ‘확장 가능한 구조’로 관리하는 Extended Collection
  • 디자인과 코드를 직접 연결하는 Code Connect / Make / npm build
  • 자동 검증 및 품질 관리 도구 Design Lint / MCP

이 모든 기능이 하나의 방향으로 수렴합니다.
즉, “디자인 시스템을 하나의 코드 생태계로 통합한다”는 비전입니다.

2025년 이후의 Figma는 단순한 협업 툴이 아니라, 디자인 시스템 운영의 허브로 자리 잡을 가능성이 높습니다.