인증 방식
🔐 OAuth 2.0
요금
무료 (Figma 플랜에 포함)
Base URL
api.figma.com/v1
태그
Figma, 디자인
서비스 소개
Figma REST API를 사용하면 Figma 파일의 디자인 정보(컴포넌트, 색상, 폰트, 레이어), 댓글, 이미지 내보내기 등을 프로그래밍 방식으로 접근할 수 있습니다. 디자인 토큰 자동 추출, 에셋 자동 내보내기, 디자인-코드 동기화 등 디자인-개발 워크플로우 자동화에 활용됩니다.
🚀 시작하기
- 1
Personal Access Token 발급
Figma → 계정 설정 → Security → Personal access tokens → Generate
- 2
File Key 확인
Figma 파일 URL에서 figma.com/file/[FILE_KEY]/... 추출
💡 코드 예제
JavaScriptJavaScript (파일·컴포넌트)
const FIGMA_TOKEN = process.env.FIGMA_ACCESS_TOKEN!
async function getFigmaFile(fileKey: string) {
const res = await fetch(`https://api.figma.com/v1/files/${fileKey}`, {
headers: { 'X-Figma-Token': FIGMA_TOKEN },
})
return res.json()
}
async function exportImages(fileKey: string, nodeIds: string[], format = 'svg') {
const ids = nodeIds.join(',')
const res = await fetch(
`https://api.figma.com/v1/images/${fileKey}?ids=${ids}&format=${format}`,
{ headers: { 'X-Figma-Token': FIGMA_TOKEN } }
)
return (await res.json()).images
}