Skip to content

bem/figma-extractor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f97885a · Nov 10, 2022

History

61 Commits
Aug 29, 2022
Nov 10, 2022
Aug 29, 2022
Aug 26, 2022
Sep 27, 2021
Sep 27, 2021
Sep 27, 2022
Aug 26, 2022
Aug 26, 2022
Aug 29, 2022
Aug 26, 2022

Repository files navigation

@figma-extractor

A set of packages for working with Figma frames

import * as fs from 'fs'
import * as path from 'path'

import { Extractor } from '@figma-extractor/core'
import { svgoOptimize } from '@figma-extractor/svgo-optimize'

const extractor = new Extractor({
  depth: 2,
})

const nodes = await extractor.extract({
    fileId: FILE_ID,
    nodeId: NODE_ID,
})

if (!fs.existsSync(ICONS_FOLDER)) {
    fs.mkdirSync(ICONS_FOLDER)
}

nodes
    .map((node) => svgoOptimize(node))
    .forEach((node) => {
        fs.writeFileSync(path.join(ICONS_FOLDER, `${node.parent!.name}.svg`), node.content)
    })

Example

To run example, clone the repo and install deps. Then set environment variable $FIGMA_TOKEN and finally execute npm run example

Or you can view source code here

Packages

Provides basic functionality of traversing nodes and downloading it's content

Small helper for parsing Figma component properties

Wrapper around svgo

Parses svg with babel and prepare for using inside JSX components

Writing your own package

@figma-extractor/parse-properties is a good example for a fresh start. Actually there are no restrictions of how your package should be organized, but mentioned aproach highly increases reusability