핵심 요약
SK플래닛이 Framelink Figma MCP를 활용해 피그마 노드를 코드로 자동 생성하는 워크플로를 소개했습니다.
주요 특징
- 피그마 노드 URL 정보를 프롬프트에 포함해 UI를 코드로 전환
- Cursor 에디터, GitHub Copilot 등 코딩 에이전트와 Figma를 MCP로 연결
- MCP 설정 예시: npx -y figma-developer-mcp --figma-api-key=토큰 --stdio
- MCP Tools에서 초록불로 활성화되면 동작 확인
- 디자인 시안 기반 컴포넌트와 스토리북 구현에 활용
적용 고려사항
- 피그마 액세스 토큰 필요(읽기 전용 권한으로 발급)
- MCP 서버 등록 및 활성화 여부 확인 필요
- 프롬프트에 피그마 노드 정보를 포함하고 Dev Mode 사용 시 노드 선택 용이
