{"id":16585504,"url":"https://github.com/six7/figma-assets-generator","last_synced_at":"2025-10-03T13:11:40.140Z","repository":{"id":39613712,"uuid":"158398999","full_name":"six7/figma-assets-generator","owner":"six7","description":"Creates assets (SVG, JPG, PNG) from a figma document (e.g. a \"Icons\" page in one of your files) and places them locally in a folder.","archived":false,"fork":false,"pushed_at":"2023-01-09T11:09:52.000Z","size":712,"stargazers_count":93,"open_issues_count":10,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T12:52:34.353Z","etag":null,"topics":["figma","figma-api","figma-js","figmadesign","icons"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/six7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-20T14:05:37.000Z","updated_at":"2025-02-27T08:22:16.000Z","dependencies_parsed_at":"2023-02-08T10:01:57.239Z","dependency_job_id":null,"html_url":"https://github.com/six7/figma-assets-generator","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/six7%2Ffigma-assets-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/six7%2Ffigma-assets-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/six7%2Ffigma-assets-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/six7%2Ffigma-assets-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/six7","download_url":"https://codeload.github.com/six7/figma-assets-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253668095,"owners_count":21944981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma","figma-api","figma-js","figmadesign","icons"],"created_at":"2024-10-11T22:48:12.867Z","updated_at":"2025-10-03T13:11:40.037Z","avatar_url":"https://github.com/six7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Figma Assets Generator\n\nCreates assets (SVG, JPG, PNG) from a figma document (e.g. a \"Icons\" page in one of your files) and places them locally in a folder.\n\n## Usage\n\nIdeal use: create a script in your package.json and run the script whenever you need, however you could also run this programmatically.\n\n### Installation\n\n```\nnpm install --save-dev figma-assets-generator\n```\n\nor\n\n```\nyarn add -D figma-assets-generator\n```\n\n### Use as npm script\n\nProvide a `figma-assets-generator.json` file with the following configuration:\n\n```\n{\n  \"personalAccessToken\": \"YOUR_ACCESS_TOKEN\",  // required: your figma access token (you can provide this as FIGMA_TOKEN in a .env file)\n  \"fileId\": \"YOUR_FILE_IDE\", // required: file id where your icons document is stored\n  \"documentId\": \"123:456\", // required: node of your icons document, e.g. \"453:8089\"\n  \"fileExtension\": \"svg\", // optional: [\"svg\", \"jpg\", \"png\", \"pdf\"], default: svg\n  \"output\": \"assets/icons/svg\" // optional: folder (relative path from working directory) where icons will be saved to, defaults to \"assets\",\n  \"scale\": \"1\" // optional, values between 0.05 and 4 are possible, default: 1\n}\n```\n\nRun\n\n```\nnpx figma-assets-generator\n```\n\non the command line, or via `node_modules/.bin/figma_assets_generator`\n\nor create a new entry in `package.json` under `scripts`:\n\n```\n\"figma-generate\": \"figma-assets-generator\"\n```\n\n`// Todo:` If no figma-assets-generator.json file was provided a wild wizard appears!\n\n### Use within your \\*.js files\n\nInclude `figma-assets-generator` in your project, provide required options and call `getFigmaAssets(options)` whenever you want to pull and create icons.\n\n```\nconst { getFigmaAssets } = require(\"figma-assets-generator\")\n\nconst options = {\n  personalAccessToken: \"5316-049f89713-0134-46b5-b426-22d1251cbc6\",  // required: your figma access token (you can provide this as FIGMA_TOKEN in a .env file)\n  fileId: \"gAMN5xYfhC2BTVKnht3PAk43\", // required: file id where your icons document is stored\n  documentId: \"453:8089\", // required: node of your icons document, e.g. \"453:8089\"\n  fileExtension: \"svg\", // optional: [\"svg\", \"jpg\", \"png\"], default: svg\n  output: \"assets\" // optional: folder where icons will be saved to, defaults to \"icons\" (cannot have subdirectories, see #17)\n}\n\ngetFigmaAssets(options)\n```\n\n#### How do I get fileId and documentId ?\nTo get the fileId you need to open the document in your browser, the fileId is indicated in the address bar:\n\nhttps://www.figma.com/file/KiFw6W2QjnKqhA4hoWsrhQ/Untitled?node-id=0%3A123\n\nThe part after `/file/` would be the fileId (in this example `KiFw6W2QjnKqhA4hoWsrhQ`) and the documentId would be the part after `node-id=` (in this example `0%3A123` - however `%3A` is just HTML Encoding for `:` so the document id would be `0:123` \n\n## Caveats\n\nReplaces `/` and `.` in component names with `_`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsix7%2Ffigma-assets-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsix7%2Ffigma-assets-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsix7%2Ffigma-assets-generator/lists"}