@lucas_flatwhite (lucas) 와.. 이제 AI 에이전트가 Figma 캔버스 위에서 직접 디자인 하는 시대!!
Figma가 놀라운 발표를 했네요. Claude Code로 바로요!
use_figma 라는 새로운 MCP 도구와 에이전트를 가르치는 스킬을 함께 공개했어요.
오픈 베타가 오늘부터 시작됩니다.
"오늘 Figma MCP 업데이트로, 제가 본 Claude Code 연동 중에서도 가장 강력한 통합 중 하나가 되었습니다. 이제 Claude Code를 사용해, 디자인 시스템의 전체 맥락을 이해한 상태로 Figma에서 디자인할 수 있습니다." - Thariq, Claude Code
↓
무엇이 달라졌나!!
기존 Figma MCP 서버는 주로 디자인을 코드로 변환하는 방향에 초점이 맞춰져 있었어요.
Figma에서 프레임을 선택하고, 그 디자인 컨텍스트를 AI 에이전트에게 전달해서 React, Vue, SwiftUI 같은 코드로 생성하는 흐름...
이번 업데이트의 핵심은 반대 방향이 열렸다는 것예요! AI 에이전트가 Figma 캔버스에 직접 쓸 수 있게 되었습니다...
use_figma 도구는 Figma의 범용 쓰기 도구예요. 이걸로 할 수 있는 일!
- 페이지, 프레임, 컴포넌트 생성 및 편집
- 변수와 스타일 생성 및 수정
- 텍스트, 이미지 배치
- 오토 레이아웃 설정
- Variants 구성
- Figma 파일 내 모든 오브젝트의 검사, 삭제, 수정
한마디로.. 디자이너가 Figma 위에서 하는 거의 모든 작업을 에이전트가 할 수 있게 된거라구요!!!
↓
Claude Code 에서 활용하는 법
claude mcp add --transport http figma https://mcp.figma.com/mcp
플러그인이 좋다구요?
claude plugin install figma@claude-plugins-official
플러그인을 설치하면 MCP 서버 설정뿐 아니라, 디자인 구현, Code Connect 설정, 디자인 시스템 규칙 생성 같은 일반적인 워크플로우를 위한 에이전트 스킬도 함께 번들됩니다!
그냥 아예 미쳤네요.. ![[tweet_2036450884293394832_0.jpg]]