DEV Community

loading...
Cover image for Export Color Palette from Figma to JSX

Export Color Palette from Figma to JSX

aexol profile image Artur Czemiel ・1 min read

How to export colors from figma to JSX?

I wrote simple regex that works inside VS CODE.

  1. Select all the colors you want to export
  2. Go to the code tab inside figma
  3. Copy all the code to the text document in VS CODE
  4. Use my regex1 \/\* (.*) \*\/\nbackground: #(.*); and in replace ['$1']: '#$2'
  5. Use another regex to wipe out unwanted CSS position: absolute;\nleft:(.*);\nright:(.*);\ntop:(.*);\nbottom:(.*);\n and in replace ``

Remember to turn on regex in find and replace in VS Code

It saves like 30 minutes of composing this file for huge color palettes. It is kinda hacky, so please tell me if there is any other method.

Discussion

pic
Editor guide
Collapse
gusbemacbe profile image
Gustavo Costa

And linear-gradient(...)?

Collapse
aexol profile image
Artur Czemiel Author

I think the same as

\/\* (.*) \*\/\nbackground: linear-gradient\((.*)\);
['$1']: 'linear-gradient($2)'