피그마 튜터와 함께 시작하는 디자인 시스템 자동화(w. Claude Code & Figma MCP)
AI로 딸깍, 수정은 하루 종일...
언제까지 프로덕트에 쓰지도 못하는
결과물만 뽑아내실 건가요?
AI 시대, 디자이너의 생존은 여기서 갈립니다.
단순히 툴을 다루는 속도가 아니라,
일관성과 생산성을 통제하는
디자인 시스템 자동화!
디자이너들이 선택할 수 밖에 없는
최적의 디자인 시스템
자동화 조합
AI 시대, 디자이너의 핵심 경쟁력은 바로!
AI로 생성한 화면을 디자인 시스템에 맞춰,
실제 디자인에 녹여내는 능력입니다.
그래서 준비했습니다.
Figma MCP x Claude Code 조합으로 끝내는
디자인 시스템 자동화
6가지 핵심 포인트!
안녕하세요.
피그마 튜터 하이서입니다. "우리 디자인 시스템을, 프로덕션에서 실제로 쓸 수 있는 수준으로 일관되게 뽑아낼 수 있을까요?"
현장의 디자이너분들과 이야기를 나누다 보면 위와 비슷한 고민을 자주 듣습니다.
AI로 화면은 빠르게 만들 수 있지만, 그게 우리 서비스의 디자인 시스템과
맞물려 돌아가느냐는 전혀 다른 문제라는 것을요. 개발자와 협업이 가능한 품질로
넘어가는 순간 기대만큼의 결과가 나오지 않아 답답함을 느끼셨던 분들이 많으실 겁니다.
저 역시 같은 벽에 부딪히며 여러 시행착오를 거쳤고, 그 과정에서
'이 방법은 현업에서 바로 쓸 수 있겠다' 싶은 것들을 하나씩 정리해왔습니다.
이번 강의에는 그 과정에서 얻은 실용적인 노하우를 최대한 솔직하게 담았습니다.
- Claude Code를 실무에 적용하기 위한 디자인 시스템 코드화 및 확장 전략
- 개발팀과 협업하며 프로덕션 수준의 코드로 뽑아내는 구체적인 워크플로우
- QA 단계까지 고려한 체계적인 진행 프로세스
변화의 속도가 빠를수록, 막연한 불안보다는 손에 잡히는 실마리 하나가 더 필요하다고 생각합니다. 이 강의가 지금 디자이너로서 무엇을 준비해야 할지 고민하시는 분들께 작은 방향키가 되어드릴 수 있다면 더없이 기쁘겠습니다.
피그마 튜터 하이서입니다. "우리 디자인 시스템을, 프로덕션에서 실제로 쓸 수 있는 수준으로 일관되게 뽑아낼 수 있을까요?"
현장의 디자이너분들과 이야기를 나누다 보면 위와 비슷한 고민을 자주 듣습니다.
AI로 화면은 빠르게 만들 수 있지만, 그게 우리 서비스의 디자인 시스템과
맞물려 돌아가느냐는 전혀 다른 문제라는 것을요. 개발자와 협업이 가능한 품질로
넘어가는 순간 기대만큼의 결과가 나오지 않아 답답함을 느끼셨던 분들이 많으실 겁니다.
저 역시 같은 벽에 부딪히며 여러 시행착오를 거쳤고, 그 과정에서
'이 방법은 현업에서 바로 쓸 수 있겠다' 싶은 것들을 하나씩 정리해왔습니다.
이번 강의에는 그 과정에서 얻은 실용적인 노하우를 최대한 솔직하게 담았습니다.
- Claude Code를 실무에 적용하기 위한 디자인 시스템 코드화 및 확장 전략
- 개발팀과 협업하며 프로덕션 수준의 코드로 뽑아내는 구체적인 워크플로우
- QA 단계까지 고려한 체계적인 진행 프로세스
변화의 속도가 빠를수록, 막연한 불안보다는 손에 잡히는 실마리 하나가 더 필요하다고 생각합니다. 이 강의가 지금 디자이너로서 무엇을 준비해야 할지 고민하시는 분들께 작은 방향키가 되어드릴 수 있다면 더없이 기쁘겠습니다.
피그마 튜터님의 강의 미리보기
디자인/Figma 활용 분야에서 압도적 인사이트와 높은 강의 퀄리티로
꾸준히 찬사를 받고 있는
피그마 튜터님의 강의
커리큘럼 상세 소개
AI 생성물과 디자인 시스템 사이 병목을
해결하는 핵심 6가지 학습 포인트
디자인 시스템과 Claude Code, Figma MCP로 AI 디자인 생성물을
디자이너가 의도한 방향대로 활용하는 방법을 학습합니다.
STEP 1
AI 시대, 디자인 시스템이 필요한 이유
AI 시대, 디자인 시스템이 필요한 이유
① AI 바이브 디자인의 한계점 학습
② 디자인 시스템 유무에 따른 디자인 유지 보수 효율 차이점 학습
③ 피그마 핵심 디자인 시스템 요소 4종 학습
② 디자인 시스템 유무에 따른 디자인 유지 보수 효율 차이점 학습
③ 피그마 핵심 디자인 시스템 요소 4종 학습
STEP 2
Figma MCP & Claude Code로
디자인 시스템 구성하기
Figma MCP & Claude Code로
디자인 시스템 구성하기
① Claude Code 설치 및 환경 설정
② Figma MCP 서버 연결
③ Claude.md와 Agent 설정
④ 디자인 시스템과 AI를 활용한 디자인 코드 생성
② Figma MCP 서버 연결
③ Claude.md와 Agent 설정
④ 디자인 시스템과 AI를 활용한 디자인 코드 생성
STEP 3
서비스 페이지와 디자인 시스템
쇼케이스 페이지 만들기
서비스 페이지와 디자인 시스템
쇼케이스 페이지 만들기
① Claude.md로 디자인 규칙 작성
② 컴포넌트 매핑
③ 구성 요소 정리
④ 쇼케이스 페이지 생성
⑤ Figma MCP로 서비스 페이지 생성
⑥ 신규 컴포넌트 추가 & 레퍼런스 활용 방법 학습
② 컴포넌트 매핑
③ 구성 요소 정리
④ 쇼케이스 페이지 생성
⑤ Figma MCP로 서비스 페이지 생성
⑥ 신규 컴포넌트 추가 & 레퍼런스 활용 방법 학습
STEP 4
디자인과 코드 간극을 줄이는 QA 진행하기
디자인과 코드 간극을 줄이는 QA 진행하기
① Figma Devmode 학습
② Figma Devmode에 MCP 활용해서 디자인 QA 진행
③ Figma MCP로 수정 사항 주석달기
② Figma Devmode에 MCP 활용해서 디자인 QA 진행
③ Figma MCP로 수정 사항 주석달기
STEP 5
데이터의 흐름을 포함하여 사용자를
인식하는 디자인 시스템 만들기
데이터의 흐름을 포함하여 사용자를
인식하는 디자인 시스템 만들기
① API의 개념과 실제 연동, 사례 소개,
설정 방법 학습
② Supabase의 인터페이스 학습과 환경변수 등록 방법 학습
③ 유저가 입력한 데이터 받아보기
④ 로그인 연동하기
② Supabase의 인터페이스 학습과 환경변수 등록 방법 학습
③ 유저가 입력한 데이터 받아보기
④ 로그인 연동하기
STEP +α
깃허브 필수기능 이해하기
깃허브 필수기능 이해하기
① Git과 Github 개념 학습
② Github 인터페이스 살펴보기
③ Github에서 사용하는 용어와 주요 기능 학습
④ Github에 작업물 업로드 하는 방법 학습
⑤ 협업 시 여러 사람이 작업물을 관리하는 방법 학습
⑥ Velcel 활용해서 배포하는 방법 학습
② Github 인터페이스 살펴보기
③ Github에서 사용하는 용어와 주요 기능 학습
④ Github에 작업물 업로드 하는 방법 학습
⑤ 협업 시 여러 사람이 작업물을 관리하는 방법 학습
⑥ Velcel 활용해서 배포하는 방법 학습
STEP 1
AI 시대,
디자인 시스템이 필요한 이유
AI 기반의 바이브 디자인을 실무에서 활용하지 못 하는 이유와
디자인 시스템 설계를 위한 기초 구성 요소를 학습합니다.
필수 개념
디자인 시스템을 배워야 하는 이유
디자인 시스템의 유무에 따라 바뀌는 코드 품질, 유지 보수 효율 체감이 어떻게 달라지는지 학습합니다.
프로젝트 실습
AI에게 디자인을 이해시키기 위한 미니 디자인 시스템 제작
피그마 핵심 4가지 디자인 시스템 요소를 연결해서 하나의 디자인 시스템으로 통합하는 방법을 학습합니다.
Project 1
컴포넌트 생성 (피그마 → 코드 관점)
컴포넌트 생성 (피그마 → 코드 관점)
피그마에서 컴포넌트를 만들고 이 컴포넌트가 코드에서 어떤 구조로
변환되는지 학습합니다.
변환되는지 학습합니다.
Project 2
컴포넌트를 유연하게 만드는 프로퍼티 설정
컴포넌트를 유연하게 만드는 프로퍼티 설정
Boolean, Variant, Text, Instance Swap
4가지 프로퍼티를 설정하는 방법을 학습합니다.
4가지 프로퍼티를 설정하는 방법을 학습합니다.
Project 3
피그마 베리어블로 코드의 디자인 토큰 변환
피그마 베리어블로 코드의 디자인 토큰 변환
피그마 베리어블로 색상, 수치, 문자열을 정의하고
컬렉션으로 구조화하는 방법을 학습합니다.
컬렉션으로 구조화하는 방법을 학습합니다.
Project 4
텍스트·색상·이펙트 일관성에 기반한 스타일 등록
텍스트·색상·이펙트 일관성에 기반한 스타일 등록
텍스트·색상·이펙트 스타일을 등록하고 AI 코드 생성 시
일관된 기준으로 작동하는 방법을 학습합니다.
일관된 기준으로 작동하는 방법을 학습합니다.
Project 5
통합 디자인시스템 제작
통합 디자인시스템 제작
컴포넌트, 프로퍼티, 베리어블, 스타일을 하나의 디자인 시스템으로
통합하여 각 요소 별 상호 관계를 학습합니다.
통합하여 각 요소 별 상호 관계를 학습합니다.
STEP 2
Figma MCP & Claude Code로
디자인 시스템 구성
Figma로 구성한 디자인 시스템을
코드로 옮기는 과정을 학습합니다.
필수 개념
Figma MCP와 Claude Code의 각 역할 및 시너지 학습
Figma MCP와 Claude Claude를 활용하여 디자인 시스템을 ‘코드’로 옮기는 과정을 학습합니다.
Point 1
Claude Code에 Figma MCP 서버 등록하고
인증, 연결 확인하는 방법 학습
Claude Code에 Figma MCP 서버 등록하고
인증, 연결 확인하는 방법 학습
Claude Code가 설정해 둔 범위 내에서 디자인 결과물을 만들어낼 수 있도록
규칙과 역할을 설정하는 방법을 학습합니다.
규칙과 역할을 설정하는 방법을 학습합니다.
Point 2
Figma Code Connect로 일관된
코드 품질 만드는 방법 학습
Figma Code Connect로 일관된
코드 품질 만드는 방법 학습
피그마 디자인을 AI에게 효과적으로 학습사키는 방법을 학습하고,
실제 컴포넌트와 토큰 코드를 만들어봅니다.
실제 컴포넌트와 토큰 코드를 만들어봅니다.
프로젝트 실습
Figma와 Claude Code를 연결한 디자인 코드 생성
폴더, 구조, Claude.md 등을 세팅하여 규칙과 역할을 설정하고 이를 적용한 디자인 코드를 생성합니다.
Project 1
Claude.md, Agents 디자인 시스템의 규칙과 역할 설정
Claude.md, Agents 디자인 시스템의 규칙과 역할 설정
Claude Code가 설정해 둔 범위 내에서 디자인 결과물을
만들어낼 수 있도록 규칙과 역할을 설정하는 방법을 학습합니다.
만들어낼 수 있도록 규칙과 역할을 설정하는 방법을 학습합니다.
Project 2
디자인 시스템을 활용한 디자인 코드 생성
디자인 시스템을 활용한 디자인 코드 생성
피그마 디자인을 AI에게 효과적으로 학습사키는 방법을 학습하고,
실제 컴포넌트와 토큰 코드를 만들어봅니다.
실제 컴포넌트와 토큰 코드를 만들어봅니다.
STEP 3
서비스 페이지와 디자인 시스템
쇼케이스 페이지 만들기
컴포넌트 매핑, 자동 스캔, 신규 컴포넌트 추가 등 디자인 시스템을
실제 화면으로 구현하는 방법을 학습합니다.
프로젝트 실습
서비스 페이지와 디자인 쇼케이스 페이지로 게시글 페이지 구성
컴포넌트 재사용, AI 생성 가이드라인 등 사전 설정 기준을 AI가 충족하며 디자인을 생성하는지 학습합니다.
Project 1
서비스 페이지 디자인 분석과 컴포넌트 매핑
서비스 페이지 디자인 분석과 컴포넌트 매핑
피그마 메인 페이지 디자인을 보며 어떤 컴포넌트가
어느 영역에 사용되는지 구조를 파악하며 매핑합니다.
어느 영역에 사용되는지 구조를 파악하며 매핑합니다.
Project 2
토큰·컴포넌트 자동 스캔으로 쇼케이스 페이지 생성
토큰·컴포넌트 자동 스캔으로 쇼케이스 페이지 생성
AI가 디자인 시스템의 토큰과 컴포넌트를 자동으로 스캔하여
쇼케이스 페이지를 생성합니다.
쇼케이스 페이지를 생성합니다.
Project 3
Figma MCP로 서비스 페이지 생성
Figma MCP로 서비스 페이지 생성
Figma MCP를 활용해 디자인 파일의 메인 페이지를
코드로 변환하는 실습을 진행합니다.
코드로 변환하는 실습을 진행합니다.
Project 4
게시글 페이지 전체 구성 및 신규 컴포넌트 추가
게시글 페이지 전체 구성 및 신규 컴포넌트 추가
게시글 페이지에 필요한 레이아웃을 구성하고,
기존 시스템에 없는 신규 컴포넌트를 추가하는 실습을 진행합니다.
기존 시스템에 없는 신규 컴포넌트를 추가하는 실습을 진행합니다.
STEP 4
디자인과 코드 간극을
줄이는 QA 진행하기
Figma Dev Mode와 Figma MCP로 구현된 코드와 사전에 구성한
디자인의 차이를 AI와 함께 점검하는 방법을 학습합니다.
필수 개념
디자인 자동화 시스템 품질을 유지하기 위한 QA 검토
디자이너가 기존에 남기던 텍스트 피드백에서 발생할 수 있는 오류를 줄이면서, 생성한 디자인의 품질을 높이는 방법을 학습합니다
Point 1
Figma Dev mode 배우기
Figma Dev mode 배우기
Figma Dev Mode의 주요 기능을 살펴보고,
피그마에서 디자인이 어떤방식으로 코드로 구현되는 지 학습합니다.
피그마에서 디자인이 어떤방식으로 코드로 구현되는 지 학습합니다.
Point 2
Figma Dev mode MCP로 디자인 QA 진행하기
Figma Dev mode MCP로 디자인 QA 진행하기
AI로 완성한 디자인 결과물과 피그마 내 디자인 간
QA를 MCP를 활용해서 진행하는 방법을 학습합니다.
QA를 MCP를 활용해서 진행하는 방법을 학습합니다.
Point 3
Figma MCP로 수정사항 주석달기
Figma MCP로 수정사항 주석달기
수정사항 Annotation을 Figma MCP를 활용히여
자동화 하는 방법을 학습합니다.
자동화 하는 방법을 학습합니다.
STEP 5
데이터의 흐름을 포함하여 사용자를
인식하는 디자인 시스템 구성
Supabase로 실제 데이터베이스를 연결하여 유저 입력 데이터를 받아보고,
로그인까지 연동해 데이터를 반영하는 서비스로 확장합니다.
필수 개념
동작하는 서비스 운영에 필요한 데이터와, 인증 흐름을 다루는 방법 학습
로딩 스켈레톤 컴포넌트, UserMenu 등 '실제로 필요한 컴포넌트'를 시스템에 포함시키는 방법을 학습합니다
Point 1
API의 개념과 실제 연동, 사례 소개, 설정 방법
API의 개념과 실제 연동, 사례 소개, 설정 방법
API 기본 개념과 실제 연동 설정법을 실제 서비스 사례와 함께 학습합니다.
Point 2
Supabase 인터페이스 익히기 및 환경변수 등록
Supabase 인터페이스 익히기 및 환경변수 등록
프로젝트 생성부터 환경변수 등록까지 데이터 레이어 세팅 방법을 학습합니다.
프로젝트 실습
데이터 연결 및 로그인 연동
제작했던 서비스 페이지에서 실제 사용자 데이터를 인식하는 방법을 학습합니다
Project 1
유저가 입력한 데이터 받아보기
유저가 입력한 데이터 받아보기
게시판 폼 입력값을 Supabase 테이블에 저장하고
다시 불러와 화면에 표시하는 방법을 학습합니다.
다시 불러와 화면에 표시하는 방법을 학습합니다.
Project 2
로그인 연동하기
로그인 연동하기
Supabase Auth로 이메일·소셜 로그인을 구현하고,
로그인 사용자 전용 페이지를 만들어봅니다.
로그인 사용자 전용 페이지를 만들어봅니다.
STEP + α
안정적인 디자인 시스템을 유지하기 위한
Git·Github 활용법 학습
디자인 시스템이 끊임 없이 변화하는 과정 속 페이지가 어떤 영향을 받았는지
추적하기 위한 Git·Github 활용법을 학습합니다.
필수 개념과 프로젝트 실습
내가 만든 디자인 시스템을 실제 서비스로 배포하기
버전 관리의 기본 개념과 Github 주요 용어를 배우면서 실제 동작하는 서비스를 만들어봅니다.
6가지 주요 개념 학습을 배우면서
‘조직 단위’로 운영 가능한
디자인 시스템 구성 방법을 학습합니다.
브랜치 전략과 Vercel 자동 배포를 통해
실시간 동작하는 방법까지 함께 학습합니다.
잠깐!
이번 강의에 국내 디자인 탑 커뮤니티
운영진들이 함께 한다는 소문이?
이 강의를 함께 진행하게 될 든든한 지원군!
국내 TOP 디자인 커뮤니티 피그마피디아
멤버 3인이 이번 강의에 함께
강사님으로 참여합니다.
TOOL
본 강의에서 사용하는
툴 안내드립니다.
① Figma 데스크톱 앱(Dev Mode MCP 활성화 필요),
Figma 라이브러리, Figma Code Connect
② Claude Code CLI (터미널 기반 AI 코딩 에이전트), Claude.md, Claude Agents, Claude Skills
③ MCP 서버 2종 : 공식 Figma Dev Mode MCP, 커뮤니티 Talk to Figma MCP
④ Claude Design
⑤ 프론트엔드 스택 : HTML, CSS, JS, React 중 프로젝트에 맞게 선택
➅ Supabase(DB + Auth, .env 기반 환경 변수)
➆ Github + Vercel(버전 관리 + 배포)
➇ Node.js 18 + Claude Code 구동
본 강의에서 사용하는
툴 안내드립니다.
① Figma 데스크톱 앱(Dev Mode MCP 활성화 필요),
Figma 라이브러리, Figma Code Connect
② Claude Code CLI (터미널 기반 AI 코딩 에이전트), Claude.md, Claude Agents, Claude Skills
③ MCP 서버 2종 : 공식 Figma Dev Mode MCP, 커뮤니티 Talk to Figma MCP
④ Claude Design
⑤ 프론트엔드 스택 : HTML, CSS, JS, React 중 프로젝트에 맞게 선택
➅ Supabase(DB + Auth, .env 기반 환경 변수)
➆ Github + Vercel(버전 관리 + 배포)
➇ Node.js 18 + Claude Code 구동
실습 중 에러가 나거나 궁금한 점이 있다면?
질의응답 채널을 통해 빠르게 강사님들께 질문하세요!
* 강사님께서 직접 질문에 답변해주시는 기간은 2026년 6월 5일 ~ 2029년 4월 26일까지 운영됩니다.
* 강사님이 현업 중 답변 하시기에 답변까지 영업일 기준 7일 내외 시간이 소요될 수 있습니다.
* 강의와 무관한 질문에 대해서는 답변이 필수로 제공되지 않습니다.
Q&A
Question 1
강의 커리큘럼 내 주제와 내용은
어떤 기준으로 잡으셨나요?
강의 커리큘럼 내 주제와 내용은
어떤 기준으로 잡으셨나요?
AI 도입으로 빠르게 변화하는 환경 속에서 UXUI 디자이너가 "디자인만 하던 단계"에서 "내 디자인을 직접 살아 있는 서비스로 만드는 단계"까지 한 번에 갈 수 있도록, 실무에서 실제로 일어나는 워크플로우 순서대로 커리큘럼을 구성하였습니다.
Question 2
강의에서 배우는 내용들이
실무에서 어떻게 활용되고 있나요?
강의에서 배우는 내용들이
실무에서 어떻게 활용되고 있나요?
디자인 시스템 + Figma MCP + Claude Code 조합은 이미 빠르게 움직이는 IT 팀들이 도입을 시도 중인 워크플로우입니다. 디자이너가 토큰·컴포넌트를 정리해두면, 같은 시스템을 AI가 학습해 코드 일관성을 자동으로 유지하고, 디자인 변경이 코드에도 즉시
반영됩니다.
활용되는 대표 4가지 실무 활용 분야
- 디자인 시스템 운영 효율화 : 토큰·컴포넌트 단일 소스를 코드까지 연결
- 디자이너가 직접 프로토타입을 코드 수준으로 검증
- 디자인-개발 핸드오프 시간 단축
- QA 단계에서 디자인 vs 구현 차이를 MCP로 자동 점검
활용되는 대표 4가지 실무 활용 분야
- 디자인 시스템 운영 효율화 : 토큰·컴포넌트 단일 소스를 코드까지 연결
- 디자이너가 직접 프로토타입을 코드 수준으로 검증
- 디자인-개발 핸드오프 시간 단축
- QA 단계에서 디자인 vs 구현 차이를 MCP로 자동 점검
Question 3
강의 커리큘럼을 학습하면서
어떤 것들을 배울 수 있나요?
강의 커리큘럼을 학습하면서
어떤 것들을 배울 수 있나요?
- 피그마에서 4종 핵심 요소(컴포넌트 / 프로퍼티 / 베리어블 / 스타일)로
나만의 미니 디자인 시스템 제작
- Claude Code 설치·초기화, Claude.md / Skills/ Claude Agents 직접 작성·운영
- Figma MCP 서버 등록·인증, Code Connect로 컴포넌트–코드 매핑
- 디자인 시스템을 그대로 반영한 쇼케이스 페이지 자동 생성 (Claude Design과 결과 비교)
- Figma MCP로 메인 페이지 + 게시글 페이지 코드화, 신규 컴포넌트로 시스템 확장
- Supabase로 데이터 입력 / 저장 / 조회 + 로그인 인증 연동
- GitHub에 결과물 올리고 Vercel로 실제 URL 배포
- Figma Dev Mode MCP로 디자인 ↔ 코드 QA, 수정 사항을 Figma 주석으로 자동화
- Claude Code 설치·초기화, Claude.md / Skills/ Claude Agents 직접 작성·운영
- Figma MCP 서버 등록·인증, Code Connect로 컴포넌트–코드 매핑
- 디자인 시스템을 그대로 반영한 쇼케이스 페이지 자동 생성 (Claude Design과 결과 비교)
- Figma MCP로 메인 페이지 + 게시글 페이지 코드화, 신규 컴포넌트로 시스템 확장
- Supabase로 데이터 입력 / 저장 / 조회 + 로그인 인증 연동
- GitHub에 결과물 올리고 Vercel로 실제 URL 배포
- Figma Dev Mode MCP로 디자인 ↔ 코드 QA, 수정 사항을 Figma 주석으로 자동화