제13호:

빠르게 변화하는 AI 시대에는 디자인 시스템이 품질과 일관성을 유지하는 기반이 된다. Figma는 디자인 시스템을 사람뿐 아니라 AI도 활용할 수 있도록 확장하고, Figma Make와 MCP 서버를 통해 디자인·코드·협업의 연결을 강화하고 있다. 또한 AI 도구가 작업을 정확히 이해하도록 파일 구조와 디자인 맥락을 명확하게 관리해야 한다고 강조한다.

AI 시대의 디자인 시스템

• 디자인 시스템은 팀의 취향, 품질 기준, 디자인 의도를 반복적으로 확장하는 장치다.
• AI가 디자인과 코드를 생성하는 환경에서는 잘 정리된 시스템이 결과물의 품질과 일관성을 높인다.
• Schema by Figma 2025에서는 디자인 시스템을 AI 워크플로에 연결하는 방법을 소개했다.
• Figma Make에 디자인 시스템의 맥락을 반영하고, MCP 서버를 통해 에이전트형 코딩 작업에서도 디자인 기준을 활용할 수 있도록 했다.
• 목표는 AI가 임의의 결과를 만드는 것이 아니라, 팀의 컴포넌트·스타일·규칙에 맞는 결과를 생성하도록 하는 것이다.

Figma Make로 새로운 작업 방식 만들기

• Figma Make를 활용하면 디자이너가 기존의 시각적 디자인 작업을 넘어 코드 기반 프로토타입과 제품 아이디어를 빠르게 만들 수 있다.
• 디자인팀은 제품 로드맵을 다시 구성하거나, 반복적으로 사용할 시작 템플릿을 만드는 등 새로운 방식으로 도구를 활용하고 있다.
• Maven Clinic, Pendo, ServiceNow, LinkedIn 등의 사례가 소개된다.
• 프롬프트를 통해 아이디어를 발전시키면서 디자인, 코드, 협업 사이의 전환 비용을 줄일 수 있다.
• 결과적으로 디자인 시스템은 완성된 화면을 관리하는 데 그치지 않고, 새로운 제품 경험을 탐색하는 출발점이 된다.

AI가 이해할 수 있는 디자인 맥락

• AI 코딩 도구가 일상적인 개발 과정에 포함되면서 디자인 파일의 구조와 설명이 더욱 중요해졌다.
• 개발자와 AI가 디자인 의도를 정확히 파악할 수 있도록 다음 요소를 명확하게 관리해야 한다.
  • 파일과 페이지의 체계적인 구성
  • 의미가 드러나는 레이어와 컴포넌트 이름
  • 디자인 결정에 대한 주석과 설명
  • 디자인 시스템의 사용 규칙
  • 화면 간 관계와 필요한 상태 정보
• 시각적으로 보기 좋은 파일만으로는 충분하지 않으며, 다른 사람이 작업 의도를 추론할 수 있는 맥락 정보가 필요하다.
• 명확한 맥락은 에이전트형 코딩 도구가 디자인을 코드로 변환할 때 정확도와 효율성을 높인다.

디자인 시스템 관련 학습 자료

• Figma는 Schema 2025를 준비하며 디자인 시스템의 기초부터 AI 기반 자동화까지 기존 콘텐츠를 정리했다.
• 디자인 시스템을 처음 도입하는 팀은 기본 개념과 운영 원칙부터 학습할 수 있다.
• 변화가 큰 환경에서 디자인 리더가 팀의 회복력과 적응력을 높이는 방법도 함께 제안한다.
• 디자인 시스템은 단순한 UI 컴포넌트 모음이 아니라, 팀의 협업 방식과 제품 품질을 지탱하는 조직적 기반으로 다뤄진다.

실무에서는 컴포넌트와 토큰을 정리하는 데서 멈추지 말고, 파일 구조·명명 규칙·주석·사용 지침까지 문서화하는 것이 좋다. 이렇게 구축한 디자인 시스템을 Figma Make나 AI 코딩 도구와 연결하면 빠른 생성 속도와 일관된 품질을 함께 확보할 수 있다.