A variable stores a single raw value: a solid colour, a number, a string or a boolean. A style can store compound properties such as gradients, images and blend modes.
When do I use each?
Variables: tokens, anything that changes by mode such as light and dark, and anything you want to scope or alias.
Styles: gradients, effects, and type styles that combine several properties.
Can I use both?
Yes. Figma says variables are additive, not a replacement. Variables can be applied to styles; styles cannot be applied to variables.
Common mistake
Converting everything to variables and losing gradients and effects, or keeping colours as styles and being unable to add a dark mode.
Variables hold values used across a file. Component properties are the changeable aspects of one component: variant, boolean, instance swap, text and slot.
When do I use each?
Variables: colour, spacing and other decisions shared by many components.
Properties: what a person using this component is allowed to change.
Can I use both?
Yes. A component's properties control its options; its colours and spacing come from variables.
Common mistake
Making a variant for every combination when a boolean or instance-swap property would do.
Do not design only for one static frame. A frame is one width; people will use all of them.
Build frames that resize
Use auto layout so content pushes and reflows instead of overlapping.
Hug for things sized by their content, Fill for things that share the space left.
Set minimum and maximum widths so a card or column cannot collapse or stretch too far.
Nest it: a page that resizes needs sections, and items inside them, that resize too.
Variable modes hold a different value per context. Light and dark is the common use; the same mechanism can hold values that differ by width or by density.
Small, standard and large mobile; tablet and large tablet; laptop, desktop and large desktop. Figma’s frame presets, like these widths, are references, not required breakpoints. Resize the frame between them and watch where the layout breaks.
5 recent releases that affect design work. Tools updates need no action unless you want the feature.
FigmaAINow generally availableTool update
The Figma agent is generally available
What changed
The Figma agent has left beta. The release notes list improved latency, file search and configurable guidelines for design libraries.
Why it matters
An agent that reads library guidelines is only as consistent as those guidelines. Component documentation now shapes generated output, not just human use.
What to do
Review what usage guidance your libraries expose, and agree with your team where agent-made frames need a design review before handoff.
How to use it, and what to watch for
Use it for
Applying your library's guidelines to generated frames
Finding existing files and designs from a chat
Repetitive file work, such as renaming and tidying
Be careful with
Guidelines that are vague or missing: the agent can only follow what you wrote
Accepting generated frames without a design review
Try this workflowWrite two or three guidelines for one library, such as which button variant is primary. Ask the agent for a screen that uses it, then check each guideline was followed.
Motion adds custom styles, audio, text animations and Lottie export
What changed
Figma Motion gained reusable animation styles, audio on the timeline, character-level text animation and Lottie export.
Why it matters
Reusable animation styles let motion be specified once and shared, the way colour and type styles already are.
What to do
If your team documents motion by hand, try defining your standard durations and easings as animation styles.
How to use it, and what to watch for
Use it for
Defining standard durations and easings once, as animation styles
Having the agent apply those styles consistently
Be careful with
Motion added because it is easy, not because it explains a change
Reduced-motion behaviour, which you still have to specify
Try this workflowCreate three animation styles for your product: quick, standard and emphasised. Apply them to one flow and remove any animation that does not show what changed.