Figma MCP 활용 가이드

안녕하세요, 피피팀 비비✨입니다

Figma MCP 업데이트 이후 AI로 좀 더 자유롭게 피그마 작업할 수 있게 되었죠.

오늘은 Claude에서 직접 수정 가능한 Figma 활용 스킬을 정리해왔어요.

📍figma-use ✓ 모든 캔버스 쓰기 작업의 기반이 되는 핵심 스킬 ✓ Figma 파일 위에서 직접 컴포넌트 생성, 텍스트 수정, 디자인 시스템 파일을 수정해야 할 때 사용

/Figma-use  (피그마 파일 링크) 이 파일에 새로 생성된 컴포넌트 추가해줘. 

📍figma-generate-design ✓ 실행 중인 앱 화면을 Figma 캔버스로 바로 변환 ✓ AI로 먼저 구현한 컴포넌트나 화면을 피그마에 공유하거나 디자인 생성할 때 사용

/figma-generate-design 지금 화면 속 랜딩페이지를 (피그마 파일 링크) 이 캔버스에 생성해줘

📍figma-generate-library ✓ 코드베이스를 읽어서 디자인 시스템 페이지를 자동 구축 ✓ 코드는 있는데 Figma 라이브러리가 없거나 토큰 시스템을 처음부터 구축할 때 사용

/figma-generate-library 우리 코드 분석해서 피그마에 디자인 시스템 만들어줘. 라이트/다크 테마 포함해줘.

📍Claude 모바일 앱으로 사용 ✓ 터미널 없이 Claude 모바일 앱에서 간단하게 Figma 작업을 처리하고 싶을 때 사용 ✓ FigJam 다이어그램 생성, Figma 파일 접근

단순히 디자인을 읽는 것을 넘어 이제 프롬프트 한 줄로 피그마를 직접 편집하는 시대가 되었어요.

함께 확인하고 작업해보시는 것을 추천드립니다!