What is a variable?
1. What is a variable in coding?
In coding, a variable is a symbolic name or identifier associated with a value or data that can be changed. It is a way of storing and manipulating information within a program. Variables are used to store data that can be referenced and manipulated in the course of the program's execution.
2. What is a variable in Figma?
Since Figma has updated a few months back, UI and UX designers have been able to create, define and reuse elements throughout their designs and prototypes. This used to only be valid for text using text styles. Check here to find out what the difference is between styles and variables.
What variables are used for in Figma?
We‘ve been using variables in Figma to do loads of cool stuff the last few months.
- We‘ve been using it to translate to multiple languages without needing to change the design. That means that someone who isn't a designer can update Figma with that, although it has to have the credentials to design).
- We use it to switch fast and easily between different themes: like light and dark by clicking one button (after the variables are in the system).
- For responsivenesss, we use it to build designs easily for different devices. Although there is something crucial missing on variables which leave to the next point.
- Colour scoping for selecting the exact colours we want to use to a text, stroke, frame, borders etc.
- We‘ve been defining the variable names for specific platforms using the "code syntax" option in the variables settings. This is great for devs, depending on our needs as a team we can define the names for our variables however we want to and our devs can view that by using the Dev mode in Figma, for whatever platform they are developing.
- Dev Mode!!! We‘ve been loving using Dev Mode for Figma. In the past, you could only change the mode in Figma by selecting a frame and changing the mode. Apparently Dev Mode is only available for all users to use in beta until the beginning of 2024, so if you want to try it out make sure to do it before December is over.
- We‘ve been largely replacing our styles in Figma with variables, since its more comprehensive and more in line with how our devs work, making it much easier to communicate and organise.
Disadvantages of variables
- Until now it's not possible to switch font sizes so even if you make it responsive and switch between devices the font won't adjust, but Figma said they will release font variables soon too.
- We cannot add more than 3 columns of variables, except if you upgrade and pay 75 US$ per user per month! This is a bit next level in our opinion.
How are variables in Figma different from styles?
As stated on Figma‘s blog article about the difference between styles and variables, there are two main differences between styles and variables: "the values they use and how the values are expressed on the canvas." Variables have single values and styles have more than one.
I actually have been largely using variables since it launched earlier this year. Some designers would argue its not a total replacement for styles, but honestly for the workflow in our team I havent had the need to use styles as extensively as I have been using variables. Check out this screen recording to see how I‘ve been using variables as a sort of replacement for the way we used styles in the past.
You don't need to know how to code to use variables
Although the concept of variables in Figma and in coding on the frontend side is very similar, you dont need to know how to code to make the workflow between you and your devs better and easier. Thanks to Figma, that work is done for you. The only thing you have to understand about variables in Figma is that the concept is super similar (or actually the same) as that of what constitutes the code. We have variables on the frontend for text styles, colours, sizing and so on exactly the same way we have variables in Figma. The Dev Mode (that is currently in Beta until 2024) makes it especially easy to work with devs now, minimising the risk of miscommunication and just generally having a better workflow between the design and dev team in projects.
Figma variables for Devs
With Dev Mode, developers can keep in sync with designers super easily without having to use external resources like a spreadsheet for keeping track of colours or sizing or anything like that. Figma has become the source of truth for our whole team, so absolutely a one stop shop for everything regarding prototypes and designs including translations to different languages, which is something we deal with a lot in Switzerland since we‘ve got 4 national languages. As a developer, you get the code syntax and the correct CSS properties directly from Figma which makes developing just that little bit faster and easier.
Figma variables for colours
Probably the most used application for variables in Figma, you can switch colours super fast and easily.
Here‘s how you do it:
- Open your variables by going to Design-> Local variables -> Create variable -> Colour
- Give your variable a name
- Type the variable value into the next column or use the colour picker to give it a value.
- You can edit this variable by clicking on the more options menu on the right of the value column. Perhaps I‘ll do another blog post to teach you more about this option menu. 🤔
- Now repeat that with all your colours and organise them into groups using the shift key.
What figma variables for colours is used for:
- Storing color values
- Are used as a source of truth
- Are reused throughout designs for efficiency and consistency
Figma variables for "numbers"
- Open your variables by going to Design-> Local variables -> Create variable -> Numbers
- Give your variable a name
- Type the variable value into the next column
- You can edit this variable by clicking on the more options menu on the right of the value column. Perhaps I‘ll do another blog post to teach you more about this option menu. 🤔
- Now repeat that with all of them and organise them into groups using the shift key.
What figma variables for "numbers" is used for:
Figma variables for "strings"
- Open your variables by going to Design-> Local variables -> Create variable -> Numbers
- Give your variable a name
- Type the variable value into the next column
- You can edit this variable by clicking on the more options menu on the right of the value column. Perhaps I‘ll do another blog post to teach you more about this option menu. 🤔
- Now repeat that with all of them and organise them into groups using the shift key.
Figma variables for "Boolean"
- Open your variables by going to Design-> Local variables -> Create variable -> Numbers
- Give your variable a name
- Type the variable value into the next column
- You can edit this variable by clicking on the more options menu on the right of the value column. Perhaps I‘ll do another blog post to teach you more about this option menu. 🤔
- Now repeat that with all of them and organise them into groups using the shift key.
Figma stuff we are excited about for 2024
- Improvements to FigJam AI
- Config 2024!
Why we do what we do
We are a group of startup-orientated techies who dream of a world filled with opportunities for early stage startups. We love to support founders who are at a later stage, as well, but our dream is to see more young businesses take off thanks to our cost friendly all-rounder service package for startups. We call it CTO as a Service. Everything you need, from design to implementation, we take care of. It doesnt only stop there- you could consider us as your partners. With a direct line of contact via discord and regular update calls (a.k.a sprints), we‘re there to advise you to make the right decisions for your users. In the recording of the podcast episode for this roast, you meet the most front-facing part of the team, the product team, who will help you build a well-researched tech product/solution for your users, not just an interim solution that costs you thousands. To learn more, check out our offering here. It shouldn't take you more than 6 minutes to know wether its the right offering for you.
