Last active
July 16, 2023 22:37
-
-
Save steveruizok/53a0da691089c908d7da555825494bf5 to your computer and use it in GitHub Desktop.
Get components and styles (as full nodes) from a Figma file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
async function getComponents(fileKey, token) { | |
// Get file | |
const file = await fetch(`https://api.figma.com/v1/files/${fileKey}`, { | |
headers: { "X-Figma-Token": token } | |
}).then((r) => r.json()) | |
if (file.err === undefined) { | |
// Get style ids | |
const styleIds = Object.keys(file.styles) | |
// Get component Ids | |
const componentIds = Object.keys(file.components) | |
// Get all those Ids together | |
const ids = [...styleIds, ...componentIds] | |
// Request all nodes for styles/components | |
const data = await fetch( | |
`https://api.figma.com/v1/files/${fileKey}/nodes?ids=${ids}`, | |
{ headers: { "X-Figma-Token": token } } | |
).then((d) => d.json()) | |
// Map out style nodes from data using style ids | |
const styles = styleIds.map((id) => data.nodes[id].document) | |
// Map out component nodes from data using component ids | |
const components = componentIds.map((id) => data.nodes[id].document) | |
return { components, styles, error: "" } | |
} else { | |
return { components: [], styles: [], error: file.err } | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment