Commands other than `components`

[vitch]

Firstly - thanks for this awesome tool!

I would like to extract effect styles and paint styles from my Figma files... We're already using this script to extract components so it would be awesome if we could also use it for that purpose.

I was wondering if there is any plan to handle commands other than components? If you don't have plans to add it yourself, would you be interested in a PR adding it? If so then do you have any suggestions on where to slot the functionality in?

[marcomontalbano]

Hi @vitch, thank you for taking interest in this project 😄 I've been thinking about what you suggested for a while now, but before starting to work on it I was waiting for people using this tool and their feedback. So, thank you for your feedback!

My idea was to export Figma styles as CSS Variables and LESS/SCSS for reuse. Is this the same you had in mind? Can you share with me a Figma File (just a demonstrative one) so that I can take inspiration on how people use Figma styles?

[vitch]

Hi @marcomontalbano - sorry for the slow reply!

Exporting as css variables with the option of less/sass makes sense to me. But it would be great to have an option of outputters like you do with the components.

In our specific case we would export to json. We already have a tailwind plugin which loads some json describing our palettes and effects (e.g. box shadows) and makes them available as tailwind classes at runtime. The missing piece of the puzzle for us is generating that json file automatically from Figma. I think this is probably custom enough that it doesn't belong in your codebase but if the point is there for us to hook into we could easily create it.

Does that make sense? I'm happy to try and provide more context if it would help. I won't have time for the next few weeks but when I do have some time I'm also happy to try to put together a PR...

You can see a simple Figma file with some local styles for a palette below - hopefully that is useful but let me know if you need anything else: styles.fig.zip

[marcomontalbano]

Hi @vitch, yes the idea is to reuse the transformer and outputter option to manipulate the result and export it in a specific format.

Regarding tailwind, it would be great to have an outputter for that, if we are able to make it the most generic. In any case, you can create your own private outputter and use it for internal purposes.

I just started to work on version 3 and the working branch is next-3-dev. Take a look at that for incoming new features.

---

Just sharing my thoughts here: when exporting a component, the transformer is used to manipulate each SVGs and the outputter is used to generate an output. In the case of exporting styles, I was thinking that the transformer can be used to manipulate the JSON response from Figma to create a more readable structure (color-transformer, effect-transformer, ...) and use outputter to generate the output (sass-outputter, css-outputter, tailwind-outputter, ...)

[marcomontalbano]

Hi @vitch, good news! I've just released v3.0.0-alpha.3 🎉

This version contains a dedicated command to export styles from a Figma File and a dedicated outputter for SASS and SCSS. If you want to experiment creating a custom outputter, you can take a look at https://github.com/marcomontalbano/figma-export/tree/next-3-dev/packages/output-styles-as-sass

At the moment you can export the following styles:

• [x] Colors (paints) :art:
  • [x] Solid Color
  • [x] Linear Gradient
• [x] Effects :lollipop:
  • [x] Inner Shadow
  • [x] Drop Shadow
  • [x] Layer Blur
• [x] Text :pencil2:

At this link https://5f638fd4cfe63e00081a2c96--figma-export.netlify.app/#figma-styles, you can find a live demo.

Let me know if this version can help with your project and if we are on the right path.

Try it out

npm install @figma-export/cli@next
npm install @figma-export/output-styles-as-sass@next

// .figmaexportrc.js
module.exports = {
    commands: [
        ['styles', {
            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
            onlyFromPages: ['figma-styles'],
            outputters: [
                // export as SCSS
                require('@figma-export/output-styles-as-sass')({
                    output: 'output'
                }),

                // export as SASS
                require('@figma-export/output-styles-as-sass')({
                    output: 'output',
                    getExtension: () => 'SASS'
                }),
            ]
        }],
    ]
}

or with just a single command

# CSS Variables
npx -p @figma-export/cli@next -p @figma-export/output-styles-as-css@next figma-export styles RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-styles-as-css

# SCSS
npx -p @figma-export/cli@next -p @figma-export/output-styles-as-sass@next figma-export styles RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-styles-as-sass

# LESS
npx -p @figma-export/cli@next -p @figma-export/output-styles-as-less@next figma-export styles RSzpKJcnb6uBRQ3rOfLIyUs5 -O @figma-export/output-styles-as-less

[marcomontalbano]

Hi @vitch, good news! I've just released v3.0.0 🎉

I'm closing this ticket but feel free to write here for feedback or for any issue. Thanks again for giving me a hint to improve this tool!

[vitch]

Sorry I never got back to this. I was working on a different code base and didn't have a chance to try it out...

I just have though and would like to say a big thank you because it's working perfectly! Thanks :D