AI로 피그마 디자인시스템 만들기

오늘은 AI를 활용해 피그마에서 사용할 디자인 시스템을 만드는 과정을 설명하고자 합니다. 여기서 사용할 AI는 피그마 MCP를 지원하는 클로드입니다.

---

디자인시스템을 만드는 목적

• 피그마를 활용한 프로젝트 수행 시, 기본적인 UI를 매번 새로 만들 필요 없이 빠르게 꺼내 쓸 수 있는 시스템을 구축하기 위함입니다. 
• 피그마에서 여러 에셋을 기본 제공하긴 하지만, 그 스타일 안에서 완전히 새로운 UI를 만들기엔 한계가 있습니다. 나만의 디자인 시스템을 구축해두면, 이후 필요한 UI가 생길 때마다 클로드 코드에 요청해 손쉽게 생성하고 관리할 수 있습니다.

---

만드는 순서

1. 클로드 코드 세팅
2. 피그마 MCP 연결 및 MCP 모드 활성화
3. 디자인 시스템 레퍼런스 탐색
4. 프롬프트 작성
5. 결과물 디테일 수정
6. 최종 에셋화

---

1. 클로드 코드 세팅(링크 참고)

https://m8n0v.tistory.com/11

클로드 코드 세팅법

 

---

2. 피그마 MCP 연결 및 MCP 모드 활성화(링크 참고)

https://m8n0v.tistory.com/12

피그마 MCP 연결 및 사용 방법

 

---

3. 디자인 시스템 레퍼런스 탐색

클로드가 디자인 시스템을 생성할 때, 참고할 레퍼런스가 있으면 결과물의 완성도가 훨씬 높아집니다. 아래 두 가지 툴을 활용해보세요.

 

🔗 getdesign.md 기업별 디자인 시스템을 정리해둔 사이트

 

1. 목록에서 원하는 디자인 시스템을 찾습니다.

   

2. Design.md 탭을 클릭한 후 내용을 복사합니다.

   

 

 

🔗 Google Stitch  프롬프트를 기반으로 디자인 시스템 기초를 설계해주는 AI 툴

 

1. 원하는 컨셉을 입력해 디자인을 생성합니다.

   

2. 생성된 디자인 시스템과 결과물을 확인합니다.

   

3. 디자인 시스템 MD 파일을 다운로드합니다.

   

 

 

---

4. 프롬프트 작성

제미나이(Gemini)를 활용해 클로드 코드에 전달할 프롬프트 초안을 생성합니다. 이때 프롬프트에는 디자인 시스템 설계 4단계의 내용이 반드시 포함되어야 합니다.

 

 

📌 참고) 디자인 시스템 설계 4단계

 

프롬프트 작성 가이드

 

1. 설계 목적과 제약 사항을 명시한다

• 방향성 이탈 방지: 디자인 시스템은 제작할 브랜드 성격에 따라 컴포넌트의 톤앤매너가 완전히 달라집니다. 목적을 명시해야 원하는 스타일을 정확하게 제안받을 수 있습니다. 제가 만들 디자인시스템의 경우 기획 단계에서 사용할 컴포넌트 생성에 목적이 있기 때문에 색상의 사용은 최소화해야 한다는 내용을 명시했습니다.
• 유효한 제약 조건 설정: "웹 전용 시스템이다", "다크 모드는 고려하지 않는다"와 같은 제약을 미리 명시해야, AI가 불필요한 코드나 에셋을 생성하는 리소스 낭비를 방지할 수 있습니다.

2. 사용할 도구와 최종 결과물 형식을 명시한다

어떤 도구(피그마 MCP 등)를 쓰는지, 결과물이 어떤 형태여야 하는지 명확히 지정합니다

.

3. 디자인 시스템 생성 시 필수 요소를 명시한다

• 핵심 컴포넌트 누락 방지: 필수 요소를 명시하지 않으면 버튼, 인풋 필드 등 중요한 컴포넌트를 빠뜨리고 넘어가는 경우가 발생합니다.
• 구조적 완성도 확보: 글로벌 컬러, 시맨틱 컬러, 타이포그래피 등 디자인 시스템의 뼈대가 되는 요소를 미리 지정해야 계층 구조가 탄탄하게 잡힙니다.

4. MD 파일을 첨부해 참고할 스타일을 학습시킨다

글로 백 번 설명하는 것보다, 잘 정리된 마크다운 가이드 하나를 학습시키는 것이 AI에게 훨씬 효과적인 시각적·구조적 가이드라인이 됩니다. 휴먼 에러를 줄이고 일관성을 높이는 데 핵심적인 단계입니다.

 

📝 요청 프롬프트 예시

애플 디자인 시스템을 참고해서 새로운 디자인 시스템을 설계하고 싶어(md 파일 첨부). 설계 목적은 여러 프로젝트의 기획 단계에서 범용적으로 사용할 수 있는 모바일 UI 거버넌스를 만들어 기초적인 컴포넌트 제작 시간을 최소화하기 위함이야. 최소한의 색상만 사용해야 해(검정, 회색, 흰색, 경고 시 빨간색). 클로드 MCP 피그마를 통해 만들 거고, 최종 결과물은 피그마로 나와야 해. 이 디자인 시스템에는 기본 컴포넌트 요소(인풋, 버튼, 배지, 라디오 버튼, 체크박스, 드롭다운 등)가 반드시 포함되어야 해. 클로드 코드에 요청할 프롬프트를 만들어줘.

 

📋 생성된 프롬프트

현재 연결된 피그마(Figma)에 애플의 디자인 철학을 계승한 [범용 모바일 UI 디자인 시스템]을 구축해줘(md 파일 첨부). 이 시스템의 목적은 기획 단계에서 빠르게 사용할 수 있는 '모바일 UI 거버넌스'를 만드는 것이며, 아래의 제약 사항과 가이드를 엄격히 준수해줘.

1. 디자인 원칙 (Apple-Inspired) Typography: 'Inter' 폰트를 사용하되, 헤드라인은 자간을 -0.02em으로 설정해 'Apple Tight' 느낌을 줄 것. 본문은 17px (Line-height 1.47)을 기본으로 함. Elevation: 그림자 사용을 지양하고, 면의 분할(흰색 vs 연회색)과 1px Hairline(#E0E0E0)만으로 계층을 구분할 것   … 

2. 컬러 팔레트 (Minimalist) Primary/Text: #1D1D1F (Near Black) Background: #FFFFFF (Pure White) Secondary Surface: #F5F5F7 (Parchment/Light Grey)  …

3. 필수 생성 컴포넌트 (모바일 최적화) 각 컴포넌트는 Auto Layout을 적용해 피그마 컴포넌트로 등록할 것. Buttons: Primary (Black 배경 / White 텍스트 / 8px 라운딩 / 높이 48px) …
 

4. 피그마 구성 요청 'Style Guide' 페이지: 컬러와 타이포그래피 스타일을 Local Styles로 등록. 'Components' 페이지: 위 항목들을 Variants를 포함한 Main Component로 생성. 'Kitchen Sink' 프레임: 생성된 모든 컴포넌트를 한눈에 볼 수 있도록 배치   …

준비가 되었으면, 먼저 컬러와 타이포그래피 스타일부터 생성을 시작해줘. 아이콘은 직접 생성하지 말고, 모두 같은 사이즈의 검은 사각형으로 대체해서 넣어줘

 

작업 요청 시 클로드가 피그마에 직접 작업을 진행하는 단계를 확인할 수 있다.

 

---

 

5. 결과물 디테일 수정

클로드가 디자인시스템 단계별로 페이지를 나누어 생성해줍니다

 

프롬프트로 생성된 결과물을 받은 후, 아래 항목들을 중심으로 검수하고 추가 요청을 진행합니다.

• 추가 컴포넌트 요청: Progress Bar, Slider, Tooltip 등 초기 생성에서 빠진 UI 요소 추가
• Auto Layout 정상 적용 여부 확인
• 레이어 겹침 현상 및 정렬 오류 조정
• 반응형 설정: 모바일 프레임에 컴포넌트 삽입 시 반응형으로 조절 가능하도록 설정

자연어로 수정 요청해도 찰떡같이 알아듣고 수정해주는 클로드

 

 

오토레이아웃 반응형 설정은 직접 세팅이 필요합니다.

 

---

6. 최종 에셋화

컴포넌트 생성이 끝나면 단순한 도형과 프레임 모음 상태에 불과합니다. 이를 실제로 재사용 가능한 형태로 쓰려면 에셋화 과정이 필요합니다. 에셋화란 컴포넌트에 색상, 간격, 크기 등의 값을 토큰(Token) 으로 정의하고, 피그마 라이브러리에 등록해 어느 파일에서든 불러 쓸 수 있는 상태로 만드는 작업입니다. 이 과정을 거쳐야 비로소 "디자인시스템을 쓴다"는 의미가 생기며, 추후 스타일 변경 시에도 토큰 값 하나만 수정하면 연결된 모든 컴포넌트에 일괄 반영되어 유지보수에 쓰이는 시간을 크게 줄일 수 있습니다.

• 참고할 피그마 무료 에셋 링크를 첨부해, 해당 에셋의 토큰 규칙을 기반으로 에셋화를 요청합니다. (무료 UI KIT 활용 추천)

에셋화된 컴포넌트

 

첨부한 레퍼런스 토근 위계에 맞게 설계된 모습

 

---

 

디자인시스템 활용하기

결과물

디자인시스템 에셋만을 활용해 만든 화면

 

 

디자인시스템 생성과 더불어 피그마 메이크를 통해 프롬프트만으로 UI 생성을 자동화해보고자, 만들어진 디자인시스템을 메이크의 디자인 키트로 넣어 만들어 보았으나, 디자인 시스템의 에셋의 스타일을 참고하는 정도이지 완벽하게 규칙을 따르거나 에셋을 사용하여 만들어주진 않았습니다. 

만들어진 디자인시스템을 피그마메이크의 키트로 첨부해 만든 화면

 

 

그럼에도 활용하는 방법: 피그마 메이크로 생성된 UI를, 클로드 MCP를 통해 만들어진 에셋으로 교체 요청하는 방식으로 활용할 수 있습니다.

클로드가 기존 UI를 에셋을 활용한 화면으로 변경해준 결과물

 

---

클로드로 피그마 디자인시스템을 만들며 배운 점

1. 단계적으로 요청하기

한 번에 모두 요청하기보다 기반을 충분히 설명한 후 하나씩 추가하는 방식이 결과물의 완성도를 높입니다. ① 파운데이션 및 컴포넌트 설계 → ② Auto Layout 적용 → ③ 에셋화 순으로 진행하세요.

 

2. 아이콘은 미리 준비하기

클로드는 아이콘을 직접 그리지 못합니다. 억지로 생성을 시도하면 레이어가 뭉개지거나 레이아웃이 틀어진 형태로 결과물이 나오는 문제가 발생합니다. 이를 방지하기 위해 프롬프트 단계에서 아이콘을 직접 생성하지 말고 동일한 크기의 검은 사각형 더미로 대체하도록 명시하는 것이 좋습니다. 이후 원하는 아이콘 셋을 피그마에 미리 배치해두고, 더미 위치에 교체해달라고 요청하는 방식이 가장 효율적입니다.

 

3. 에셋화 작업에서 레퍼런스는 필수

단순한 명령만으로는 정교한 토큰 위계를 잡기 어렵습니다. 일관성 있는 깊이를 유지할 수 있도록, 구체적인 레퍼런스를 반드시 명시해주어야 합니다.

 

4. 정렬 오류 / 레이어 겹침 / 반응형은 반드시 검수

정렬이 틀어지거나 레이어가 겹치고, 반응형 설정이 누락되는 등 구조적인 한계가 존재합니다. 실무자가 결과물을 직접 검수하고 디테일을 다듬는 과정은 현재로서는 필수입니다.