figma 내보내기 다운로드 - figma 내보내기 소스 코드 다운로드

피그마 수출

기타 소스코드

v2.0.1

다운로드

figma 수출

figma-export는 Figma, FigJam 및 Figma Slides 파일을 Figma의 독점적인 .fig / .jam / .deck 형식으로 로컬 데스크탑으로 대량 내보내기 위한 CLI 도구입니다. figma-export는 팀, 프로젝트, 심지어 초안별 다운로드도 지원합니다.

이 도구는 Figma의 REST API와 Playwright를 활용하여 Figma 파일 검색 및 다운로드를 자동화합니다.

요구사항

노드(v20.15.x)
npm(v10.7.x)

다른 버전도 작동할 수 있지만 공식적으로 테스트되지는 않았습니다.

Figma 사용자 프로필 설정을 통해 생성할 수 있는 Figma 액세스 토큰도 필요합니다.

설치

저장소를 복제하거나 최신 릴리스를 다운로드하세요.
cd 저장소에 넣습니다.
npm install 실행

용법

환경 변수

저장소 루트에 .env 파일을 만듭니다.

FIGMA_EMAIL= " [email protected] "
FIGMA_PASSWORD= " hunter2 "
FIGMA_ACCESS_TOKEN= " figd_abcdefghijklmnopqrstuvwxyz "
DOWNLOAD_PATH= " /Users/anonymous/Downloads " # Absolute path where files will be downloaded to
WAIT_TIMEOUT=10000 # Time in ms to wait between downloads

SSO를 사용하여 Figma에 로그인하는 경우 수동으로 비밀번호를 설정하거나(wiki 참조) , FIGMA_EMAIL 및 FIGMA_PASSWORD 대신 FIGMA_AUTH_COOKIE 통해 Figma 인증 세션 쿠키를 제공할 수 있습니다.

FIGMA_AUTH_COOKIE= " my-auth-cookie-value "
FIGMA_ACCESS_TOKEN= " figd_abcdefghijklmnopqrstuvwxyz "
DOWNLOAD_PATH= " /Users/anonymous/Downloads "
WAIT_TIMEOUT=10000

FIGMA_AUTH_COOKIE 의 값은 __Host-figma.authn 쿠키의 값이어야 합니다. 이 값을 얻는 방법은 위키를 참조하세요.

files.json 생성 중

files.json 계정 내에서 다운로드할 Figma 파일을 결정합니다.

팁

Drafts는 Figma의 숨겨진 프로젝트이므로 figma-export를 사용하여 완전히 다운로드할 수 있습니다. 초안 프로젝트 ID를 얻는 방법에 대해 알아보려면 위키를 확인하세요.

files.json 생성하려면 기본 제공 명령 중 하나를 사용하는 것이 좋습니다.

npm run get-team-files {team_ids ...} - 지정된 팀 ID 내의 모든 프로젝트에 대한 모든 파일을 가져옵니다(공백으로 구분)
- 예: npm run get-team-files 12345 67890
npm run get-project-files {project_ids ...} - 지정된 프로젝트 ID에 대한 모든 파일을 가져옵니다(공백으로 구분)
- 예: npm run get-project-files 12345 67890

Figma 팀 ID를 찾으려면 Figma 홈으로 이동하여 왼쪽 사이드바에서 팀을 마우스 오른쪽 버튼으로 클릭한 다음 링크 복사 를 클릭하세요. 복사한 URL의 마지막 부분에는 팀 ID( https://www.figma.com/files/team/1234567890 가 포함됩니다.

프로젝트 ID를 찾으려면 팀의 홈으로 이동하여 프로젝트를 마우스 오른쪽 버튼으로 클릭한 다음 링크 복사 를 클릭하세요. 복사한 URL의 마지막 세그먼트에는 프로젝트 ID( https://www.figma.com/files/project/1234567890 가 포함됩니다.

이 구조를 따르는 한 이 파일을 수동으로 생성할 수 있습니다.

[
  {
    "name" : String,
    "id" : String,
    "team_id" : String?,
    "files" : [
      {
        "key" : String,
        "name" : String
      },
      ...
    ]
  },
  ...
]

이는 Figma의 GET 프로젝트 파일 엔드포인트 반환 값에서 수정된 구조입니다.

다운로드 시작

files.json 생성한 후에는 npm run start 실행하여 다운로드를 시작할 수 있습니다. 각 다운로드 상태는 콘솔에 표시됩니다.

각 파일은 프로젝트 이름과 ID로 명명된 폴더의 지정된 DOWNLOAD_PATH 에 다운로드됩니다. 각 파일은 파일명과 ID(키)로 저장됩니다. 폴더 구조는 다음과 같습니다.

 Project A (12345)/
├── File X (123).fig
└── File Y (456).fig
Project B (67890)/
└── File Z (789).fig

get-team-files 실행한 경우 files.json 팀 ID에 대한 참조도 있으므로 프로젝트는 팀 ID 이름을 딴 폴더에 배치됩니다. 이 경우 폴더 구조는 다음과 같습니다.

 1029384756/
├── Project A (12345)/
│   ├── File X (123).fig
│   └── File Y (456).fig
└── Project B (67890)/
    └── File Z (789).fig
5647382910/
└── Project C (45678)/
    └── File W (012).fig

병렬 다운로드

병렬 다운로드는 기본적으로 비활성화되어 있습니다. 이를 활성화하려면 playwright.config.ts 에서 다음 속성을 업데이트하세요.

 export default defineConfig ( {
  ...
  fullyParallel : true ,
  workers : 3 , // The maximum number of parallel downloads
  ...
} ) ;

실패한 다운로드를 다시 시도하는 중

다운로드가 실패한 경우 npm run retry 명령을 사용하여 실패한 다운로드 만 다시 실행해 볼 수 있습니다.

여러 가지 이유로 인해 다운로드가 실패할 수 있지만 일반적으로 이는 Playwright 시간 초과에 도달했기 때문입니다. playwright.config.ts 에서 timeout 구성을 업데이트하여 이 시간 초과를 늘릴 수 있습니다.

명령

npm run 통해 다음 명령을 사용할 수 있습니다.

명령	설명
`get-team-files`	Figma 팀 ID에서 `files.json` 생성합니다.
`get-project-files`	Figma 프로젝트 ID에서 `files.json` 생성합니다.
`start`	다운로드 시작
`retry`	마지막 실행에서 실패한 다운로드를 다시 시도합니다.
`dry-run`	다운로드할 파일을 나열합니다.
`report`	마지막 실행에 대한 HTML 보고서 표시

언제든지 ctrl+c 눌러 명령을 중지할 수 있습니다.

알려진 문제

2단계 인증은 지원되지 않습니다(2단계 인증을 일시적으로 비활성화하는 것이 좋습니다).
파일을 다운로드하려면 파일에 대한 편집자 액세스 권한이 있어야 합니다.
일부 다운로드는 시간이 오래 걸릴 수 있습니다(큰 파일 크기, 느린 인터넷 연결 등). 이로 인해 Playwright 시간 초과가 발생하여 다운로드가 실패할 수 있습니다( playwright.config.ts 에서 timeout 늘리는 것이 좋습니다).
다운로드한 파일 수에 따라 Figma가 조절되는지 확실하지 않으므로 속도 제한이 발생할 수 있습니다( WAIT_TIMEOUT 사용 제안).

확장하다

추가 정보