AI가 이해할 수 있는 피그마 디자인 시스템 설계하기

AI가 읽고 이해할 수 있는 디자인 시스템 만들기

*원문을 번역한 글입니다.

*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.

인공지능(AI)이 디자인 워크플로의 필수적인 부분이 되고 있습니다. 이제 도구들은 Figma 파일을 읽고, UI 레이아웃을 생성하며, 심지어 디자인을 코드로 변환할 수도 있습니다.

하지만 한계가 있습니다.

오늘날 대부분의 디자인 시스템은 오직 사람만을 위해 만들어졌기 때문입니다. 시각적으로는 잘 정리되어 있을지 몰라도, 기계가 보기에는 구조적으로 불분명한 상태입니다. AI의 입장에서 보면 많은 피그마 파일들은 그저 프레임과 사각형, 그룹들이 무작위로 뒤섞인 집합체에 불과합니다.

AI가 디자인 과정에서 진정한 협업 파트너가 되길 원한다면, 우리의 디자인 시스템도 진화해야 합니다.

단순한 비주얼 라이브러리를 넘어 구조화된 시스템으로 거듭나야 합니다.

이 글에서는 디자이너와 엔지니어 모두에게 직관적인 경험을 유지하면서도,

AI가 이해할 수 있는 Figma 디자인 시스템을 설계하는 실질적인 방법을 살펴보겠습니다.

AI가 읽을 수 있는 디자인 시스템이 중요한 이유

기존의 디자인 시스템은 팀이 일관성을 유지하고 컴포넌트를 재사용하는 데 도움을 줍니다.

하지만 AI 툴은 구조와 의미를 함께 전달할 수 있는 추가적인 요소를 필요로 합니다.

디자인 시스템이 제대로 구조화되어 있다면, AI 도구는 다음과 같은 일을 할 수 있습니다:

기존 컴포넌트를 활용한 UI 레이아웃 생성

디자인을 실제 서비스 적용 가능한(Production-ready) 코드로 변환

디자인 과정에서 적절한 컴포넌트 추천

디자인 의도와 제약 사항 이해

이러한 구조가 없다면, AI는 단순한 도형과 레이어만 인식합니다.

하지만 구조가 갖춰지면, AI는 비로소 요소들 간의 관계망으로 이루어진 시스템을 보게 됩니다.

1. 명확한 네이밍 규칙(Naming Convention)으로 시작하기

네이밍은 AI가 읽을 수 있는 가장 중요한 신호 중 하나입니다. 컴포넌트가 예측 가능한 패턴을 따를 때, 기계는 각 요소가 서로 어떻게 연결되는지 이해할 수 있습니다.

단순한 계층 구조만으로도 충분합니다:

Category / Component / Variant / State / Size

예시:

Button / Primary / Default / Medium
Button / Primary / Hover / Medium
Button / Secondary / Disabled / Medium
Input / Text / Error / Default

더 나은 네이밍을 위한 팁:

Pri나 Btn 같은 약어 사용 지양하기

/ 와 같은 일관된 구분자 사용하기

계층 구조를 예측 가능하게 유지하기

네이밍이 일정한 패턴을 따르면 AI는 컴포넌트의 계열(Families)과 변형을 쉽게 인식할 수 있습니다.

2. 토큰 중심의 디자인 시스템 구축하기

디자인 토큰은 디자인 시스템의 데이터 레이어 역할을 합니다.

색상, 간격(Spacing), 타이포그래피와 같은 시각적 속성을 구조화된 형태로 표현합니다.

컴포넌트 내부에 값을 직접 입력(Hardcoding)하는 대신 토큰을 사용하세요.

토큰 예시:

color.primary.500
spacing.16
radius.medium
font.body.medium

시멘틱 토큰은 목적을 표현하기 때문에 더욱 유용합니다.

color.background.primary
color.text.secondary
color.button.primary.background

이렇게 하면 AI는 단순히 값이 무엇인지뿐만 아니라, 왜 존재하는지도 이해할 수 있습니다

토큰 관리에 도움이 되는 툴:

Figma Variables

Tokens Studio

Style Dictionary

3. 여러 개의 컴포넌트 대신 '컴포넌트 속성(Properties)' 활용하기.

디자인 시스템 구축 시 흔히 하는 실수는 모든 변형(Variation)마다 별개의 컴포넌트를 만드는 것입니다.

예를 들어:

Button Primary

Button Secondary

Button Large

Button Small

이는 시스템을 금방 복잡하고 무겁게 만듭니다.

대신 피그마의 Component properties 기능을 활용하세요.

버튼의 속성 예시:

Variant: Primary | Secondary | Ghost
Size: Small | Medium | Large
State: Default | Hover | Disabled | Loading
Icon: True | False

이러한 구조를 갖추면 AI는 단순히 시각적인 차이를 넘어, 해당 컴포넌트가 작동하는 로직까지 이해할 수 있습니다.

4. Auto Layout을 전반적으로 활용하기

Auto Layout은 디자이너와 기계 모두에게 요소가 어떻게 동작하는지를 알려줍니다.

정의하자면 다음과 같습니다.

패딩(Padding)

요소 간 간격(Spacing)

정렬(Alignment)

반응형 동작

레이아웃 정의 예시:

Padding: spacing.12 spacing.16
Gap: spacing.8
Radius: radius.medium

Auto Layout이 없으면, AI는 요소를 정적인 상태로 인식합니다.

Auto Layout이 적용되면, 요소의 구조와 동작 방식이 드러납니다.

5. 기계가 읽을 수 있는 문서화(Documentation) 추가하기

디자인 시스템은 단순한 시각 요소뿐 아니라, 의도까지 포함하고 있습니다.

컴포넌트, 스타일, 토큰에 대한 설명을 추가하면 AI 도구가 어떻게 사용되어야 하는지 이해하는 데 도움이 됩니다

구성 요소 설명 예시:

Component: Button

목적:
인터페이스에서 주요 동작을 유발하는 트리거입니다.

사용 규칙:
- 섹션당 기본 버튼은 하나만 사용
- 보조 버튼은 기본 동작을 보조
- 어두운 배경에서는 버튼이 보이지 않도록 함

접근성:
최소 높이: 40px
최소 명암비: 4.5:1

이렇게 하면 디자인 시스템은 단순한 컴포넌트 라이브러리를 넘어, 하나의 지식 베이스로 확장됩니다

6. 파일 구조를 명확하게 정리하기

깔끔한 파일 구조는 동료 디자이너뿐만 아니라 AI에게도 훨씬 수월한 탐색 환경을 제공합니다.

페이지 구조 예시:

00 Foundations
Colors
Typography
Spacing
Radius
Elevation

01 Tokens
Semantic Tokens
Dark Mode Tokens

02 Components
Buttons
Inputs
Cards
Navigation

03 Patterns
Forms
Lists
Modals

04 Templates
Screens

05 Documentation

이러한 계층 구조는 파운데이션(Foundations), 컴포넌트, 그리고 사용 패턴(Usage patterns)을 명확하게 구분해 줍니다.

7. 컴포넌트와 토큰 연결(Mapping)하기

컴포넌트는 가공되지 않은 원시값(Raw values) 대신 반드시 토큰을 참조해야 합니다.

버튼에 대한 매핑 예시:

background → color.button.primary.background
text → color.button.primary.text
padding → spacing.16
radius → radius.medium

AI가 UI를 생성하거나 디자인을 코드로 변환할 때, 이러한 참조 관계는 디자인의 일관성을 완벽하게 보장해 줍니다.

8. 의미 있는 레이어 네이밍 사용하기

레이어 이름은 대부분의 팀이 생각하는 것보다 훨씬 중요합니다

다음과 같은 이름은 피하세요:

Rectangle 23
Frame 124
Group 17

대신 의미 기반(semantic)의 네이밍을 사용하세요:

Button Container
Button Label
Button Icon
Input Field
Input Label
Input Helper Text

의미 있는 레이어 이름은 AI가 UI 구조를 해석하기 쉽게 만들어 줍니다.

9. 사용 규칙을 문서화하기

디자인 시스템에는 디자이너는 직관적으로 이해하지만, 기계는 이해하지 못하는 규칙들이 포함되어 있는 경우가 많습니다

이 규칙들을 명확하게 명시하십시오.

예시:

Primary 버튼은 섹션 당 한 번만 표시되어야 합니다 .

최소 터치 영역: 44px.
Input label은 항상 입력 필드 위에 표시되어야 합니다.
양식에서 아이콘은 레이블 없이 사용해서는 안 됩니다.
Icons should not be used without labels in forms.

이 규칙들은 단순히 시각적으로 맞는 UI가 아니라, 실제로 사용 가능한 인터페이스를 생성하도록 돕습니다

10. 디자인 시스템을 코드와 연결하기

디자인 토큰이 엔지니어링 시스템과 직접 연결될 때 AI 워크플로우는 강력한 시너지를 냅니다.

토큰 매핑 예시:

color.primary.500 → #4F46E5
spacing.16 → 16px
radius.medium → 8px

이러한 토큰은 JSON 형식으로 내보내 개발 프레임워크에서 사용할 수 있습니다.

토큰 구조 예시:

{
" color ": {
"primary": {
" 500 ": "#4F46E5"
}
},
"spacing": {
" 16 ": "16px"
}
}

디자인과 코드가 동일한 토큰 구조를 공유하면, AI는 그 사이의 간극을 훨씬 더 효과적으로 메울 수 있습니다.

미래: AI 네이티브 디자인 시스템

디자인 시스템은 단순한 컴포넌트 라이브러리를 넘어 진화하고 있습니다.

이제 디자인 시스템은 AI 기반 디자인, 자동화된 UI 생성, 디자인-코드 워크플로우를 가능하게 하는 구조화된 인터페이스 플랫폼으로 발전하고 있습니다

AI 지원 설계 시스템은 일반적으로 네 가지 계층으로 구성됩니다:

디자인 레이어
Figma에서 구축된 디자인 레이어 구성 요소 및 레이아웃

토큰 레이어
시각적 속성을 정의하는 구조화된 토큰

논리 레이어
구성 요소의 속성 및 상호 작용 규칙

지식 레이어
문서화 및 사용 제약 조건

이러한 계층들이 함께 작동할 때, 디자인 시스템은 디자이너, 엔지니어 및 지능형 시스템이 이해할 수 있는 형태로 변환됩니다 .

마지막으로

AI는 디자인 시스템을 대체하지 않을 것입니다. 오히려 디자인 시스템의 중요성을 더욱 높일 것입니다.

AI는 시스템이 구조화되고 예측 가능하며 의미 있는 상태 일 때 가장 잘 작동합니다 .

토큰, 일관된 네이킹 규칙, 컴포넌트 프로퍼티, 명확한 문서화 및 강력한 파일 구성을 활용하면 팀의 확장성을 확보할 뿐만 아니라 기계도 이해할 수 있는 디자인 시스템을 구축할 수 있습니다.

미래의 디자인 시스템은 단순히 제품의 외형을 정의하는 것을 넘어, 인터페이스가 어떻게 생성되고 확장되며, 사람과 AI 모두에게 어떻게 이해되는지를 정의하게 될 것입니다

---

원문 출처: https://www.designsystemscollective.com/designing-a-figma-design-system-that-ai-can-understand-d4434f7601b5

DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.