[매력일자리 5주차 복습노트 및 솔직 후기] Claude로 Figma 디자인 시스템 자동 생성하기

핵심 요약

1. 그 규칙을 기반으로 스타일 가이드와 컴포넌트를 자동 생성하고, 필요한 토큰·변수만 추출하도록 제한할 수 있다.
2. 생성이 안 되면 대부분 MCP 서버 연결이나 Figma 플랜 권한 문제다.

매력일자리 프로그램에서 진행한 실습 중 하나를 정리한 글입니다. 주제는 "Claude(클로드)와 Figma를 연결해 디자인 시스템을 자동으로 만들 수 있는가"였습니다. 결론부터 말하면, 수작업으로 변수 하나하나 등록하던 일을 문서 규칙 하나로 대체하는 흐름이었어요. 다만 환경(플랜·권한)에 따라 되는 범위가 달라서, 그 경계를 아는 게 실습의 절반이었습니다.

이 글은 강의 내용 요약 + 실무 후기 + 분석 자료를 겸합니다. 같은 실습을 준비하는 분이라면 순서대로 읽으면 되고, 특정 막힌 지점만 궁금하다면 아래 목차에서 바로 이동하세요.

---

먼저, 핵심 용어부터 정리하면?

자동화 흐름을 이해하려면 등장하는 용어를 먼저 잡아두는 게 빠릅니다.

용어 한 줄 정의 실습에서의 역할

MCP (Model Context Protocol)	Claude와 외부 도구(Figma, Google Drive 등)를 연결하는 표준 방식	Claude가 Figma 파일에 접근·작업하게 해주는 통로
Figma MCP	MCP로 Claude와 Figma 작업 환경을 연결한 구성	"말로 시키면 Figma에 반영"의 핵심
Claude MD	Claude에게 작업 규칙을 알려주는 지침 문서	어떻게 생성할지 행동 규칙 정의
Design MD	디자인 시스템 값을 담은 설계 문서	무엇을 생성할지 내용·값 정의
디자인 토큰 / 변수(Variables)	컬러·스페이싱·라디우스·타이포 등을 구조화한 값	자동 생성의 최종 결과물
Personal Access Token	Figma API 연결에 쓰는 개인 인증 토큰	연결 권한의 열쇠
선택항목 링크 복사	선택한 목록을 복사하는 기능	추출한 값을 다른 작업으로 옮기는 통로

 

---

디자인 시스템을 만들기 전에 무엇부터 설정해야 할까?

먼저 "규칙과 설정 방식"을 정해야 합니다. 컬러를 칠하기 전에 팔레트를 정의하듯, 자동 생성을 시키기 전에 무엇을·어떻게 만들지 문서로 규칙을 박아두는 단계입니다. 이걸 건너뛰면 결과물이 매번 들쭉날쭉해집니다.

설정 방법은 크게 두 가지였습니다.

방법 방식 적합한 상황

empty 파일 방식	빈 파일을 두고 Claude에게 직접 설정을 요청	처음부터 내 규칙으로 짜고 싶을 때
MD 문서 수정 방식	미리 준비된 MD 문서의 규칙을 수정해 생성	검증된 템플릿을 빠르게 변형하고 싶을 때

 

실습에서는 주로 두 번째 방식, 즉 준비된Design MD 문서를 열어 내용을 수정하는 흐름을 썼습니다. 실무 팁 하나. 문서를 수정하기 전에 전체를 한 번 통독하는 걸 권합니다. 어떤 키가 어디서 쓰이는지 모른 채 일부만 고치면, 자동 생성 단계에서 값이 충돌하거나 누락됩니다.

그리고 강사가 강조한 포인트가 있었어요. 이 설정은 한 번 제대로 등록해두면 이후엔 에이전트처럼 반복 호출할 수 있다는 것. 즉 초기 세팅이 번거로운 건 맞지만, 그건 반복 업무를 줄이기 위한 사전 투자에 가깝습니다.

---

스타일 가이드와 컴포넌트를 정말 자동으로 생성할 수 있을까?

규칙(MD)이 갖춰지면 생성 자체는 됩니다. Claude가 Design MD의 값을 읽어 토큰 구조를 만들고, 그 구조를 Figma 변수·컴포넌트로 반영하는 흐름입니다. 다만 "어디까지 자동으로 반영되느냐"는 환경에 따라 갈립니다(이건 아래 권한 섹션에서 다룹니다).

전체 흐름을 단계로 정리하면 이렇습니다.

1. 참고할 디자인 예시·사이트를 정한다.
2. 해당 디자인 규칙을 담은 MD 파일을 확보한다(다운로드 또는 복사).
3. MD 파일을 작업 폴더에 넣는다.
4. Claude에서 그 파일을 불러오도록 지정한다.
5. "이 문서를 바탕으로 디자인 토큰을 생성하고 Figma 변수로 등록해줘"라고 요청한다.

여기서 디자이너가 주의할 지점은 5번입니다. 문서를 읽고 토큰 구조를 만드는 것까지는 잘 됩니다. 하지만 실제로 Figma 변수로 "쓰기 등록" 하는 단계에서 막히는 경우가 많았어요. 이게 다음 질문으로 이어집니다.

---

필요한 토큰·변수만 추출하려면 어떻게 제한할까?

추출 조건을 명시하면 됩니다. 전부 가져오면 색상 변수만 수백 개가 쏟아져 정리가 안 되니까, 필요한 것만 가져오도록 제한하는 게 실무에서 훨씬 유용합니다.

실습에서 언급된 제한 예시:

• 변수 출력 — 변수 값만 뽑아오기
• 토큰 추출 — 디자인 토큰만 구조화
• 불필요한 색상 정보 제외 — 안 쓰는 컬러는 애초에 안 가져오기

이 "제한"이 사실상 자동화의 품질을 결정합니다. 무제한으로 긁으면 결과물 정리에 드는 시간이 수작업보다 더 걸리기도 하거든요. 그래서 추출 범위를 좁히는 규칙을 먼저 적어두는 게 실속 있는 접근입니다.

---

Copy List Selection은 언제 쓰는 기능일까?

선택한 목록을 복사해 다른 작업으로 옮길 때 씁니다. 특정 항목을 선택한 뒤 클릭하면 Copy Paste 메뉴 안의 Copy List Selection 기능을 쓸 수 있고, 이걸로 선택한 내용을 복사해 이후 작업에 붙여넣어 활용합니다.

활용 시나리오를 그려보면 이렇습니다.

• 자동 생성된 토큰 중 일부만 골라 다른 파일·문서로 옮길 때
• 추출 결과를 개발팀에 그대로 전달할 때
• 다음 단계 요청의 입력값으로 재사용할 때

작지만, 자동 생성 → 선별 → 전달로 이어지는 흐름에서 "수동으로 다시 적는 일"을 없애주는 연결 고리입니다.

---

생성이 안 될 때는 어디를 확인해야 할까?

대부분 (1) MCP 서버 연결, (2) Figma 플랜 권한 둘 중 하나입니다. 작업이 잘 안 되면 안내된 위치로 이동해 중간 설정과 연결 상태를 점검하는 흐름이었고, 그 중심에 MCP 서버가 있었습니다.

점검 순서를 체크리스트로 정리했습니다.

순서 점검 항목 확인 방법

1	MCP / 플러그인 연결 상태	Plugins 목록에 Figma MCP·Figma Plugin이 보이는지
2	브라우저 권한 허용	Authorize(허용) 절차를 끝냈는지
3	Personal Access Token	Settings → Security → Personal Access Tokens에서 발급·복사했는지
4	토큰 스코프(권한)	Read만 있고 Variable write가 없지는 않은지
5	대상 파일 지정	Share 링크 또는 File Key를 정확히 넣었는지
6	설치 순서	단계를 섞지 않았는지(꼬였으면 처음부터가 더 빠름)

특히 4번 토큰 권한이 실습에서 가장 큰 벽이었습니다. 같은 절차를 따라도 계정 유형에 따라 결과가 달랐어요.

구분 무료 / 에듀 플랜 프로 플랜

MCP 연결	가능	가능
토큰 발급·MD 읽기	가능	가능
Variable 쓰기(자동 등록)	제한·차단되는 경우 많음	안정적
우회 방법	manifest.json + code.js 플러그인 방식	대체로 불필요
현실적 평가	번거롭고 불안정	작업 효율 높음

무료·에듀 플랜에서 Variable write가 막힐 때는, Claude가 manifest.json과 code.js를 만들어주는 플러그인 우회로 일부 작업을 살릴 수 있었습니다. 다만 매끄럽진 않습니다. 완전 자동화가 목표라면 프로 플랜 기반 세팅이 현실적이라는 게 실습의 결론이었어요.

---

실습하면서 느낀 점 (매력일자리 수강생 시점)

좋았던 점. 한 번 세팅하면 에이전트처럼 재사용한다는 구조도 실무 반복을 줄이는 방향과 맞습니다.

아쉬웠던 점. 환경 의존성이 큽니다. 플랜·권한·설치 순서 같은 변수 때문에, "되는 사람은 되고 안 되는 사람은 안 되는" 상황이 자주 생겼습니다. 강의 자료가 텍스트 위주일 때 따라가기 어렵다는 의견도 있었는데, 이런 설치형 실습일수록 막히는 지점별 스크린샷과 분기 안내가 있으면 좋겠다 싶었어요.

FAQ

Q. 생성이 안 될 때 가장 먼저 볼 곳은 어디인가요?
A. MCP 서버 연결 상태입니다. 그다음 토큰 스코프(Variable write 권한), 설치 순서를 점검하세요.

Q. empty 파일 방식과 MD 수정 방식 중 뭐가 낫나요?
A. 처음부터 내 규칙으로 짜려면 empty, 검증된 템플릿을 빠르게 변형하려면 MD 수정 방식이 낫습니다. 실습에서는 주로 MD 수정 방식을 썼습니다.

Q. Personal Access Token은 어디서 발급하나요?
A. Figma → Settings → Security → 하단 Personal Access Tokens에서 발급합니다. 생성 직후 다시 안 보일 수 있으니 즉시 복사하세요.

 

 

솔직후기

해당 글은 수업을 복습하면서 정리한건데 최근들어 수업을 들으면서 이해가 안되는부분도 많았어요. 그 중, 환경세팅이 가장 어려웠고 강사님도 수강생들의 환경이 각자 다 다르다보니 이 부분에서 많이 헤메시는게 보였어요. 이제 얼마 안남았는데 프로젝트를 2개나 해야되는 상황이 오게되었네요. 힘내서 프로젝트하고 포폴로 만들어야겠습니다. 한동안 엄청 바쁠듯 하네요.