플러그인·모드중급공식
피그마 플러그인
Figma
피그마 디자인 파일에서 컴포넌트와 디자인 토큰을 읽어 코드로 옮겨요. 피그마 공식 MCP 서버와 작업용 스킬이 함께 들어 있어요.
- 난이도
- 중급 · 계정 로그인이나 간단한 설정이 조금 필요해요.
- 쓰는 곳
- 클로드 코드
- 만든 곳
- Figma (공식)
설치하기
- 1클로드 코드가 없다면 먼저 설치해요.
- 2명령을 복사해요.클로드 코드 입력창에 붙여넣기
/plugin install figma@claude-plugins-official - 3붙여넣고 Enter를 눌러요.클로드 코드를 켠 뒤, 대화 입력창에 붙여넣고 Enter를 누르세요.
- 4설치 끝! 이제 평소처럼 말로 일을 시키면 돼요.아래 '이렇게 말해 보세요'의 문장을 그대로 써 봐도 좋아요.
할 수 있는 일
- 디자인 파일과 컴포넌트 정보 읽기
- 색상, 간격 같은 디자인 토큰 가져오기
- 디자인을 실제 코드로 옮기기
이렇게 말해 보세요
이 피그마 프레임 링크를 보고 같은 화면을 React와 Tailwind로 만들어 줘.
플러그인 없이 연결하기
MCP 서버만 쓰고 싶다면 이렇게 추가할 수도 있어요. 피그마는 플러그인 설치를 권장해요.
claude mcp add --transport http figma https://mcp.figma.com/mcp
공식 마켓플레이스(claude-plugins-official)는 클로드 코드를 처음 켤 때 자동으로 등록돼서 설치 명령 한 줄이면 돼요.