피그마 유료버젼을 사용중인데 어떻게 내가만든 프로그램과 호완을 시키지?

피그마 유료 버전을 사용 중이시라면, **Personal Access Token(개인 액세스 토큰)**을 발급받아 REST API를 통해 고객님의 프로그램과 피그마를 안전하게 연동할 수 있습니다.

유료 플랜(Professional, Organization 등)이라고 해서 연동 방식이 근본적으로 다르진 않지만, 팀 라이브러리나 변수(Variables) 같은 고급 데이터에 접근할 수 있는 권한이 더 넓습니다.

다음은 가장 일반적인 연동 절차인 4단계 가이드입니다.

1단계: API 인증키(Token) 발급

내 프로그램이 “나”임을 증명하는 열쇠를 만드는 과정입니다.

1. 피그마 실행 후 좌측 상단 메인 메뉴(홈 아이콘) 클릭

2. Settings (설정) 클릭

3. Security (보안) 탭으로 이동

4. Personal access tokens 섹션에서 ‘Generate new token’ 클릭

5. 토큰 이름(예: MyProgram_Connect)과 유효 기간, 권한(Scopes)을 설정

   • 초기 테스트용이라면 권한을 넉넉하게(File content 등 체크) 주셔도 됩니다.

6. 생성된 토큰 문자열 복사 (이 창을 닫으면 다시 볼 수 없으므로 안전한 곳에 메모하세요!)

2단계: 연동 구조 잡기 (REST API)

피그마는 HTTP 요청을 통해 데이터를 주고받습니다. 고객님이 만든 프로그램(Python, Node.js, 웹사이트 등)에서 피그마 서버로 “이 파일 정보 줘”라고 요청을 보내는 방식입니다.

• 요청 주소(Endpoint): https://api.figma.com/v1/files/[FILE_KEY]

• 헤더(Header): X-Figma-Token: [발급받은_토큰]

FILE_KEY란?
피그마 파일 URL의 중간에 있는 문자열입니다.
예: figma.com/file/abc12345/MyDesign -> **abc12345**가 키입니다.

3단계: 실제 코드 연동 예시

가장 많이 쓰이는 Python과 Node.js로 간단한 예시를 보여드립니다. 이 코드를 프로그램에 삽입하면 피그마 파일의 모든 텍스트, 색상, 레이어 정보를 JSON 형태로 가져옵니다.

A. Python (데이터 분석, 백엔드용)

import requests

FILE_KEY = '여기에_파일_키_입력'
TOKEN = '여기에_토큰_입력'

url = f'https://api.figma.com/v1/files/{FILE_KEY}'
headers = {'X-Figma-Token': TOKEN}

response = requests.get(url, headers=headers)
data = response.json()

# 예: 파일 이름 출력
print(f"파일 이름: {data['name']}")
# data 변수 안에 모든 디자인 정보가 들어있습니다.

B. Node.js (웹 서비스, 프론트엔드용)

const axios = require('axios');

const FILE_KEY = '여기에_파일_키_입력';
const TOKEN = '여기에_토큰_입력';

async function getFigmaData() {
  try {
    const response = await axios.get(`https://api.figma.com/v1/files/${FILE_KEY}`, {
      headers: { 'X-Figma-Token': TOKEN }
    });
    console.log("파일 이름:", response.data.name);
  } catch (error) {
    console.error("연동 실패:", error);
  }
}

getFigmaData();

4단계: 실시간 동기화 (고급, 유료 플랜 활용)

단순히 가져오는 것을 넘어, 피그마에서 수정이 일어날 때마다 프로그램에 자동으로 반영하고 싶다면 **Webhooks(웹훅)**을 사용합니다.

• Webhooks: 피그마 파일이 업데이트되면 고객님의 서버로 “변경됨!” 알림을 쏴주는 기능입니다.

• 유료 팀 플랜에서는 팀 단위의 웹훅 설정이 가능하여 관리가 더 수월합니다.

팁: 호환성을 높이려면?

만약 “디자인 시스템을 코드로 자동 변환”하는 것이 목표라면, 피그마 API에서 넘어오는 **Raw Data(JSON)**는 너무 방대합니다.
이럴 때는 피그마 데이터를 쉽게 가공해주는 라이브러리를 사용하시는 것을 추천합니다.

• Python: FigmaPy

• Node.js: figma-js

어떤 언어(프로그램)로 연동을 준비 중이신가요? (예: Python, C#, 웹사이트 등) 알려주시면 해당 환경에 딱 맞는 코드를 짜드릴 수 있습니다.