🎨 이제 AI가 피그마에 직접 그립니다 (설치법)

피그마 시안을 캡처해서 AI한테 붙여넣고 계셨죠. AI가 그림을 못 그리는 게 아니라, 캔버스에 손이 안 닿았던 거예요. 캔버스에 직접 그리는 도구 하나, 아이콘을 찾아 꽂는 도구 하나, 움직이게 만드는 도구 하나입니다.

아래 명령어를 복사해서 붙여넣으면 돼요.

⚠️ 공통 주의: 도구 모두 터미널(CLI) 에서 설치해요. 데스크탑 앱(Claude Desktop)의 Code 탭에서는 /plugin·mcp add 명령어가 막혀 있어서("isn't available in this environment"), 최초 설치는 터미널에서 해야 합니다.

---

① Figwright MCP (무료) — 피그마 캔버스에 직접 그려요

출처: https://github.com/awdr74100/figwright

시안을 캡처해서 붙여넣던 일을 없애요.
프레임을 선택하고 "리액트로 짜줘" 하면 내 프로젝트에 이미 있는 컴포넌트·토큰·아이콘을 재사용해서 코드가 나오고, 반대로 "이 설명대로 피그마에 만들어줘" 하면 캔버스에 프레임·텍스트·오토레이아웃·변수가 실제로 그려집니다. 읽기 전용이 아니라 양방향이에요. MCP 도구가 112개 붙습니다(읽기·쓰기·그라운딩).

작동 방식은 이래요. MCP 서버가 내 컴퓨터에서 돌고, 그 서버가 피그마 플러그인과 로컬 웹소켓으로 연결됩니다. 그래서 인터넷 어디로도 파일이 나가지 않아요.

설치 1 — MCP 서버 등록 (한 줄)

claude mcp add figwright -- npx -y @figwright/mcp@latest

설치 2 — 피그마 플러그인 (이건 수동이에요)

플러그인이 아직 피그마 커뮤니티에 안 올라와 있어서 릴리스에서 직접 받아야 해요.

1) GitHub Releases 최신판에서 플러그인 zip을 받아 압축을 풉니다.
2) 피그마 데스크탑 앱에서 메뉴 → Plugins → Development → Import plugin from manifest… 를 누르고, 푼 폴더의 manifest.json 을 고릅니다.
3) Plugins → Development → Figwright 로 플러그인을 켜면 Connected 가 뜹니다. 클로드한테 "ping 해봐" 하면 연결 확인 끝.

설치 3 — 스킬 (선택)

npx skills add awdr74100/figwright/skills

깔아두면 클로드가 알아서 적절한 순간에 Figwright를 집어 듭니다. (스킬만 깔면 소용없어요 — MCP 서버가 연결돼 있어야 합니다.)

이렇게 쓰면 돼요

• "이 프레임 리액트 컴포넌트로 짜줘" — 선택한 프레임을 내 스택에 맞는 코드로
• "이 설명대로 피그마에 가격표 화면 만들어줘" — 파일에 있는 컴포넌트·스타일을 재사용해서 그림
• "시안 뭐가 바뀌었는지 찾아서 그 부분 코드만 고쳐줘" — design_diff 로 변경분만
• 아이콘·토큰·컴포넌트를 코드베이스와 이어주는 icon_map · token_map · component_map 도 있어요

💡 피그마 공식 MCP랑 뭐가 다른가요: 공식 MCP도 지금은 캔버스에 쓸 수 있어요(원격 서버는 모든 플랜·시트에서 되고, 데스크탑 서버는 유료 플랜의 Dev·Full 시트 전용). 다만 피그마가 문서에 "앞으로 사용량 기반 유료 기능이 될 예정이고 지금은 베타라 무료" 라고 적어뒀습니다. Figwright는 MIT 오픈소스라 그 계산에서 자유롭고, 결정적으로 내 컴퓨터에 깔린 폰트를 쓸 수 있어요 — 플러그인이 데스크탑 앱 안에서 돌기 때문입니다. (제가 이 시리즈 카드를 Pretendard·goorm Sans Code로 만드는데, 원격 커넥터로는 그 폰트를 못 불러와서 텍스트를 못 채웠어요. 로컬 플러그인으로 가야 풀립니다.)

⚠️ 정직한 한계: 아직 어린 프로젝트예요 — 2026년 6월에 시작했고 npm은 0.3.0, 별 395개입니다. 플러그인이 커뮤니티 마켓에 없어서 위처럼 수동으로 임포트해야 하고, 개발용 플러그인 임포트는 피그마 데스크탑 앱에서만 됩니다. 그리고 플러그인 창을 켜둔 파일에만 손댈 수 있어요(닫으면 연결이 끊깁니다). Node가 필요합니다.

---

② better-icons CLI (무료) — 아이콘 20만 개에서 찾아 꽂아줘요

출처: https://github.com/better-auth/better-icons

AI가 아이콘을 어설프게 그려내던 일을 없애요.
Lucide·Heroicons·Material 같은 150개 이상 아이콘 세트, 20만 개 넘는 아이콘을 검색해서 가져옵니다. 채팅창에 SVG를 길게 토해내는 대신 내 프로젝트의 아이콘 파일에 바로 써줘서 토큰도 아껴요. 리액트·뷰·스벨트·솔리드·순수 SVG로 뽑을 수 있습니다.

설치 (한 줄 · 자동 등록)

npx better-icons setup

깔려 있는 AI 클라이언트를 찾아서 설정까지 해줍니다 — Claude Code, Cursor, OpenCode, Windsurf, VS Code(Copilot), Antigravity.

터미널에서 직접 찾아보고 싶으면:

npx better-icons search arrow --limit 10
npx better-icons get lucide:home > icon.svg

이렇게 쓰면 돼요

• "화살표 아이콘 찾아서 넣어줘"
• "이 버튼에 어울리는 아이콘 골라줘"
• "아이콘 스타일 한 세트로 통일해줘" — 같은 아이콘을 여러 컬렉션에서 비교해줘요
• 자주 쓰는 컬렉션을 기억해뒀다가 다음 검색에서 먼저 보여줍니다

💡 ①의 Figwright와 붙여 쓰면 좋아요. 피그마에 화면을 그리게 할 때 아이콘만 엉성해지는 일이 줄어듭니다.

⚠️ 정직한 한계: 업데이트가 좀 멈춰 있어요 — npm은 2026년 1월의 1.0.4가 마지막이고 레포도 4월 이후 조용합니다(별 1.2k, MIT). 지금 도는 데는 문제 없지만 활발히 크는 도구는 아니에요. 그리고 아이콘 각 컬렉션의 라이선스는 따로입니다 — 상업적으로 쓸 거면 그 세트 라이선스를 확인하세요. Node가 필요합니다.

---

③ text-to-lottie SKILL (무료) — 말로 시키면 움직이는 파일이 나와요

출처: https://github.com/diffusionstudio/lottie

애프터이펙트를 열지 않고 로티(Lottie) 를 만들어요.
로티는 웹·앱에 얹는 가벼운 벡터 애니메이션 포맷이라, 나온 JSON을 그대로 웹에 넣거나 애프터이펙트로 가져가 다듬을 수 있습니다. 설치하면 미리보기 플레이어가 같이 깔려서, AI가 고치는 즉시 화면에서 돌아가는 걸 보면서 다듬을 수 있어요. Diffusion Studio(YC F24)가 만든 MIT 오픈소스(5k★)입니다.

설치 (한 줄)

npx skills add diffusionstudio/lottie

이렇게 쓰면 돼요

• "이 SVG 로고를 선이 그려지듯 나타나게 해줘"
• "로딩 애니메이션 만들어줘 — 60fps, 2초, 무한 반복"
• "배경 투명하게 로티로 뽑아줘"
• 웹에 얹을 땐 lottie-web, 앱은 React Native Skia나 iOS의 Lottie 라이브러리로 재생하면 돼요

💡 결과가 확 좋아지는 요령 (레포가 직접 권하는 것): ⑴ SVG나 스크린샷 같은 실제 소스를 같이 주기 ⑵ ease-in·ease-out 같은 모션 용어로 말하기 ⑶ 카메라 워크(푸시·팬·줌)를 지시하기 ⑷ FPS와 길이를 숫자로 박기.

⚠️ 정직한 한계: 기본 출력은 조절 가능한 값이 배경색 정도만 열려 있어요 — 다른 속성을 나중에 바꾸고 싶으면 "이것도 컨트롤로 빼줘" 라고 미리 말해야 합니다. 그리고 결과 품질이 프롬프트와 원본 소스에 크게 좌우돼요(맨땅에 "멋있게"는 잘 안 나옵니다). Node가 필요합니다.

---

세 도구를 한 줄로 정리하면 이래요.

도구	분류	비용	무엇을 하나
Figwright	MCP	무료	피그마 캔버스에 직접 그리고, 시안을 코드로
better-icons	CLI	무료	아이콘을 찾아서 꽂아줌 (20만 개)
text-to-lottie	SKILL	무료	말로 시키면 움직이는 파일(로티)이 나옴

부담되면 ② better-icons부터 하세요. npx better-icons setup 한 줄로 끝나고 바로 체감됩니다.
얼굴은 ① Figwright예요. 대신 피그마 플러그인을 수동으로 넣어야 하니, 시간 있을 때 붙이세요.
AI가 그림을 못 그리는 게 아니라, 캔버스에 손이 안 닿았던 거예요. 필요하면 찾는 게 아니라,
있는 줄 알아야 찾을 수 있는 것들이라 정리해봤어요.
설치하다 막히면 인스타 DM으로 편하게 물어보세요 👀

@oliveves.ai