figmex

    1.0.3 • Public • Published

    figmex

    Generate development-ready theme JSON / SCSS/ LESS files from Figma Styles

    • Parse Styles from a Figma file ID
    • Works with Styled System and other CSS-in-JS setups
    • Generetes JSON, ans css compactible with different preprocessors (scss, less, etc.)
    • Built with figma-api
    npm i figmex

    Getting Started

    1. Install figmex as a dev dependency in your project
    2. Get a personal access token for the Figma API
    3. Create a .env file with your access token
    • FIGMA_TOKEN=<personal-access-token>
    • Alternatively add an environment variable for FIGMA_TOKEN
    1. Add an npm run script: figmex <figma-file-id> (see params for output)
    2. Run the script to create a theme.json and styles file based on Figma Styles

    Now figmex can export styles from files in strict format, for example please check: https://www.figma.com/file/Z4RWc6X1BN5UlM6myQtt1d/tokens-Copy?node-id=0%3A1 make sure that page and artboard names are the same. In further releases I will add support to export from figma project styles.

    Options

    Options can be passed as CLI flags or included in a figmex object in your package.json

    • --out-dir, -d: output directory (default current working directory), default './styles'
    • --format, -f: include additional metadata from the Figma API, default 'less'
    • --metadata: include additional metadata from the Figma API

    Based on Brent Jackson's figma-theme

    Install

    npm i figmex

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    40.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • shauchenka