DEV Community

Cover image for Export Color Palette from Figma to JSX
Artur Czemiel
Artur Czemiel

Posted on

6 5

Export Color Palette from Figma to JSX

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (2)

Collapse
 
gusbemacbe profile image
Gustavo Benedetto Conti Papi

And linear-gradient(...)?

Collapse
 
aexol profile image
Artur Czemiel

I think the same as

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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay