Solving Problems with JavaScript: Variable Code Syntax | Figma

Running plugin API code in the JavaScript console is the best Figma feature you've never used. Here's the code:

"WEB",
)
})
____________________________________________________

Find us on ⬇️

Jake you are my hero !!! Never stop doing these videos !!

[JohnnyDilan]

@figma....give this man a weekly show! One of the most useful videos I have seen from Figma in a while! "Replace the slash with the Dash....also needs to be on a t-shirt for the next config! :)

[iPAINTCODE]

Open up the Variables REST API outside of Enterprise accounts, now that would be really cool. That would be stupendous!

[HeresAsvg]

Impressive and useful, but... When can we expect this functionality to be implemented in Figma, so we can do the same thing in a couple of clicks without writing code? 👀

[lacinjak]

This is amazing! All tutorials needs to follow this format now, please

[zed]

Super amazing tuts. Please make more with this guy :)

[anmolbindra_]

Absolutely love this series. These are so fun to watch and quirky. Always going away, learning something and laughing.
Sending gratitude to Figma & Jake for these. More pls :) 🙌

[didkobravo]

Love those videos! Jake you and whoever's doing the editing you're a rockstar and a genius!

[boriskardzhiev]

This is awesome and it's just what I need for a new design system. Can you please do an episode on swapping out a set of variables in the selection colors (so a bunch of content is already preselected and has different colours with a similar naming convention). I'd like to be able to parse through all the variables that end with /fill and then change them to the same variable with code instead of manually clicking through them one by one.

[gregoryjohnson]

Amazing video! I was able to use the code example to help me structure some code to loop through all my variables and update the scopes based on names. As an example, any variable with the name fill-color gets the scope FRAME_FILL and SHAPE_FILL. I was able to do this for color variables fill, stroke, text, and icon. Huge time saver. I also went through and deleted some of my variables related to focus colors that I wasn't using to make room for more variables in my main collection.

Excited to see more of these videos!

[loictonnelier]

Awesome! Could you please add more detailed information in the Variables API documentation about the hierarchy of variables and how to properly copy and paste them while preserving their relationships (aliases) before i lose my mind ?

[flexowitsch]

I love you guys, seriously this is great. Please make more courses where you explain the figma api. I´d love to get a deeper understandig of it.

[AnuragShukla-xvxb]

Figma should copy this code and implement the feature instead of putting it as youtube tutotrial

[sutherlandcarter]

Thank you for making my life easier, Jake!

[designknowledge]

I’m working on a large design system in Figma, where I have multiple pages within a collection. Two of these pages, "Tailwind" and "DaisyUI, " contain numerous variables. I need to update only the color variables across both pages, similar to what's shown in this video.

However, when I run the command in the Figma console, it doesn’t seem to work at all. Could you please help me troubleshoot this issue?

[darkModeYT]

Really great video and really easy to watch due to jokes and presenter being great!

[jimiwikmanofficial]

If anyone had told me I would one day watch a video where a design tool would suggest to a designer that they should write code to update their designs I would have said they were high or had mental issue :)

Love the tone in this video and I really would love to see some designers trying to actually do this without breaking down in fetus position when they screw the code up :)

I have a feeling we will see a plugin for this soon if it is not already out there :)

[geoapa]

Jake from Figma > Jake from State Farm

[chicofuu]

Regular expressions are really amazing!!

[turisma_music]

Thanks! Would be great to paste the script in the description ;)