Claude로 Figma 아이콘 만들기 — MCP 연동 실전기
YJ
Field Notes
카테고리
- 실무
- 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, 케밥 네이밍)도 맞췄다.
토큰이 꽤 많이 들지만 이제 번거로운 아이콘 작업에 시간을 할애하지 않을 수 있어서 너무 편하다.!!
다른 아이콘들도 만들어봐야지
「yj-archive」を購読
サイトを購読すると、新規投稿などの最新情報を通知やメールでいち早く受け取れます。
Slashpageに登録して「yj-archive」を購読しましょう！
Slashpageに登録して「yj-archive」を購読しましょう！
