클로드 딸깍에 피그마 파일이 바뀐다

요즘 AI로 디자인 작업하시는 분들 많으시죠.
이제는 단순히 보고 분석하는 수준을 넘어서, 피그마 파일 자체를 직접 바꾸는 흐름까지 나오고 있어요.
이번에 정리한 내용도 그런 변화들을 한 번에 볼 수 있게 모아둔 내용입니다.

읽기 전용에서 읽기 & 쓰기로

이전에는 디자인 보고 분석만 해주거나, 변수 연결은 수작업으로만 가능하거나, 수정 시 별도 플러그인 필요했다면
이제는 프레임, 컴포넌트, 변수를 직접 생성 / 수정 / 삭제, 하드코딩 색상, 변수 일괄 자동교체 공식 지원, 추가 설치 없이 바로 사용 등 많은 것들이 가능해졌어요. 현재 클로드는 베타 기간 무료이니, 지금이 테스트할 최적의 타이밍이에요!
구체적으로 어떤 것들을 곧바로 실무에 적용할 수 있는지 알려드릴게요!

1. 캔버스에 직접 쓰기: use_figma

AI가 Figma Plugin API로 JavaScript를 실행해서 캔버스의 모든 요소를 만들고 수정할 수 있어요.
아래와 같은 상황일 때 한번 사용해 보세요!

✓ 컴포넌트 이름 오타 일괄 수정
✓ 색상 변수 일괄 교체
✓ 프레임 구조 자동 정리

2. 피그마 → 코드 자동 변환: get_design_context

선택한 프레임의 구조, 색상, 간격을 분석해서 React, Vue, HTML 등 원하는 코드로 바꿔줘요.
아래와 같은 상황일 때 한번 사용해 보세요!

✓ 컴포넌트 이름 오타 일괄 수정
✓ 색상 변수 일괄 교체
✓ 프레임 구조 자동 정리

3. 디자인 시스템 검색: search_design_system

연결된 라이브러리에서 컴포넌트, 변수, 스타일을 텍스트로 검색해서 AI가 기존 에셋을 재사용해요.
아래와 같은 상황일 때 한번 사용해 보세요!

✓ 새 화면 만들 때 기존 컴포넌트부터 검색
✓ AI가 이미 있는 걸 새로 만드는 실수 방지

4. 웹페이지 → 피그마 디자인 캡처: generate_figma_design

실제 작동하는 웹앱이나 사이트의 화면을 피그마에서 편집 가능한 디자인 레이어로 변환해요.
아래와 같은 상황일 때 한번 사용해 보세요!

✓ 기존 웹서비스를 피그마에서 리디자인할 때
✓ 경쟁사 UI를 피그마에서 분석하고 싶을 때

참고) 현재 Codex, Claude Code(리모트 서버)에서만 사용 가능

5. 다이어그램 자동 생성: generate_diagram

텍스트 설명이나 Mermaid 문법으로 FigJam에 플로우차트, 시퀀스 다이어그램을 만들어요.
아래와 같은 상황일 때 한번 사용해 보세요!

✓ 기획 회의 전 플로우 정리
✓ 개발 전 아키텍처 시각화

아래 링크에서 피그마 자동화 프롬프트 9종세트 받아보세요!