figma-export-assets
Version:
Script to generate and download assets from a Figma file
253 lines (252 loc) • 7.6 kB
TypeScript
/**
* @typedef {Object} Config
* @property {string} figmaPersonalToken - Personal access token for the Figma API.
* @property {string} fileId - The ID of the Figma file to export assets from.
* @property {string} page - The name of the page to export assets from.
* @property {string} assetsPath - The path to save the exported assets.
* @property {string} [format='svg'] - The format of the exported assets.
* @property {number} [scale=1] - The scale at which to export assets.
* @property {boolean} [exportVariants=true] - Whether to export variants of the assets.
* @property {string} [frame] - The name of the frame to export assets from.
* @property {number} [depth] - Maximum number of nested levels to traverse in the Figma file.
* See [Figma API docs](https://developers.figma.com/docs/rest-api/file-endpoints/#get-files-endpoint)
* for more details.
* @property {number} [batchSize=100] - The number of assets to export in each batch.
* @property {number} [concurrencyLimit=5] - The maximum number of concurrent requests.
* @property {boolean} [skipExistingFiles=false] - Whether to skip existing files.
*/
/**
* @typedef {Object} Asset
* @property {string} id - The ID of the asset.
* @property {string} name - The name of the asset.
* @property {string} [url] - The URL of the asset image.
* @property {string} [assetsPath] - The path to save the asset.
*/
export default class FigmaExporter {
/**
* Creates a FigmaExporter.
* @param {Config} config
*
* @property {Array<Asset>} assets - The array of assets to be exported.
*
* @example
* const exporter = new FigmaExporter({
*
* // Optional
* baseURL: 'https://api.figma.com/v1',
* format: 'svg',
* scale: 1,
* exportVariants: true,
*
* // Required
* figmaPersonalToken: 'your-personal-token',
* fileId: 'your-file-id',
* page: 'your-page-name',
* assetsPath: 'path/to/assets',
*
* // Optional
* frame: 'your-frame-name'
* });
*/
constructor(config: Config);
config: {
/**
* - Personal access token for the Figma API.
*/
figmaPersonalToken: string;
/**
* - The ID of the Figma file to export assets from.
*/
fileId: string;
/**
* - The name of the page to export assets from.
*/
page: string;
/**
* - The path to save the exported assets.
*/
assetsPath: string;
/**
* - The format of the exported assets.
*/
format: string;
/**
* - The scale at which to export assets.
*/
scale: number;
/**
* - Whether to export variants of the assets.
*/
exportVariants: boolean;
/**
* - The name of the frame to export assets from.
*/
frame?: string;
/**
* - Maximum number of nested levels to traverse in the Figma file.
* See [Figma API docs](https://developers.figma.com/docs/rest-api/file-endpoints/#get-files-endpoint)
* for more details.
*/
depth?: number;
/**
* - The number of assets to export in each batch.
*/
batchSize: number;
/**
* - The maximum number of concurrent requests.
*/
concurrencyLimit: number;
/**
* - Whether to skip existing files.
*/
skipExistingFiles?: boolean;
baseURL: string;
};
assets: any[];
/**
* Makes a `GET` request to the Figma API
*
* @private
* @param {string} endpoint - API endpoint
* @param {Object} [params] - Query parameters
* @returns {Promise<any>} Parsed JSON response
*/
private figmaGet;
/**
* Sets the assets by fetching them from the Figma API.
*
* @returns {Promise<FigmaExporter>} The FigmaExporter instance.
*/
setAssets(): Promise<FigmaExporter>;
processAssets(config?: {
/**
* - Personal access token for the Figma API.
*/
figmaPersonalToken: string;
/**
* - The ID of the Figma file to export assets from.
*/
fileId: string;
/**
* - The name of the page to export assets from.
*/
page: string;
/**
* - The path to save the exported assets.
*/
assetsPath: string;
/**
* - The format of the exported assets.
*/
format: string;
/**
* - The scale at which to export assets.
*/
scale: number;
/**
* - Whether to export variants of the assets.
*/
exportVariants: boolean;
/**
* - The name of the frame to export assets from.
*/
frame?: string;
/**
* - Maximum number of nested levels to traverse in the Figma file.
* See [Figma API docs](https://developers.figma.com/docs/rest-api/file-endpoints/#get-files-endpoint)
* for more details.
*/
depth?: number;
/**
* - The number of assets to export in each batch.
*/
batchSize: number;
/**
* - The maximum number of concurrent requests.
*/
concurrencyLimit: number;
/**
* - Whether to skip existing files.
*/
skipExistingFiles?: boolean;
baseURL: string;
}, assets?: any[]): Promise<void>;
/**
* Creates assets by asking the Figma API for the assets and saving them to the specified path.
*
* @param {function} [assetTransformFn] - Callback function to transform the asset names.
* @param {Object} [configOverrides] - Overrides for the default configuration.
* @returns {Promise<FigmaExporter>} The FigmaExporter instance.
*/
createAssets(assetTransformFn?: Function, configOverrides?: any): Promise<FigmaExporter>;
}
export type Config = {
/**
* - Personal access token for the Figma API.
*/
figmaPersonalToken: string;
/**
* - The ID of the Figma file to export assets from.
*/
fileId: string;
/**
* - The name of the page to export assets from.
*/
page: string;
/**
* - The path to save the exported assets.
*/
assetsPath: string;
/**
* - The format of the exported assets.
*/
format?: string;
/**
* - The scale at which to export assets.
*/
scale?: number;
/**
* - Whether to export variants of the assets.
*/
exportVariants?: boolean;
/**
* - The name of the frame to export assets from.
*/
frame?: string;
/**
* - Maximum number of nested levels to traverse in the Figma file.
* See [Figma API docs](https://developers.figma.com/docs/rest-api/file-endpoints/#get-files-endpoint)
* for more details.
*/
depth?: number;
/**
* - The number of assets to export in each batch.
*/
batchSize?: number;
/**
* - The maximum number of concurrent requests.
*/
concurrencyLimit?: number;
/**
* - Whether to skip existing files.
*/
skipExistingFiles?: boolean;
};
export type Asset = {
/**
* - The ID of the asset.
*/
id: string;
/**
* - The name of the asset.
*/
name: string;
/**
* - The URL of the asset image.
*/
url?: string;
/**
* - The path to save the asset.
*/
assetsPath?: string;
};