# Claude로 Figma 아이콘 만들기 — MCP 연동 실전기

**배경**

디자인 시스템 작업을 하다 보면 로고 파일을 받아서 아이콘 규격에 맞게 다듬어야 할 때가 있다.

이번에는 MariaDB 로고를 우리 Design System 아이콘으로 만들면서 Claude의 Figma MCP로 아이콘 만들기를 실전에 써봤다. 

**과정**

우리 디자인 시스템에는 기술 스택 로고 아이콘들이 있다.

.NET, Erlang, Ruby, MS SQL 같은 것들인데, 모두 아래 규칙을 따른다.

- 크기: 36 × 36px

- 색상: 단색 #222D44

- 네이밍: 케밥 표기법 logo-[이름]-o/f

여기에 MariaDB를 추가해야 했고, 원본 SVG 파일(로고 전체)에서 아이콘 버전을 만들어야 했다.

0단계 — 아이콘 가이드를 MD 파일로 정리하기

작업 전에 팀 아이콘 제작 가이드를 Claude에게 텍스트로 붙여넣고 마크다운 파일로 변환해달라고 했다. 흩어져 있던 규칙들을 표와 코드블록으로 깔끔하게 정리해줘서 이후 작업 후 참고 문서로 쓰면 된다.

가이드 문서를 Claude에게 미리 공유해두면 이후 "기존 규칙에 맞게 만들어줘"라는 한 마디로 컨텍스트를 전달할 수 있어서 편하다.

1단계 — 원본 SVG에서 마스코트 추출

2단계 — Figma MCP 연결

Claude에 Figma MCP가 연결되어 있으면 현재 선택한 프레임 정보를 바로 읽어올 수 있다.

3단계 — 삽질: 노드를 못 찾는 문제

fileKey를 넘기고 아래처럼 코드를 실행했는데 계속 실패했다. 여기서 토큰이 많이 낭비되었다;;

4단계 — 아이콘 삽입

페이지 이동 문제를 해결하고 나니 나머지는 순조로웠다.

처음에는 마스코트 삽입 밖에 안해줘서 워드마크(텍스트 SVG)는 추가로 프레임 하단에 배치했다.

**결과 및 회고**

최종적으로 36×36 프레임 안에 마스코트 + 워드마크가 모두 들어간 MariaDB 아이콘이 완성됐다. 디자인 가이드 기준(단색, 36px, 케밥 네이밍)도 맞췄다.

토큰이 꽤 많이 들지만 이제 번거로운 아이콘 작업에 시간을 할애하지 않을 수 있어서 너무 편하다.!!

다른 아이콘들도 만들어봐야지

For the site tree, see the [root Markdown](https://slashpage.com/yj-archive.md).