Figma UI kit
Configure your global variables
Want to make sweeping visual changes across the entire kit without touching a single component? Use global variables. Think of them as the control panel for the whole system.
To learn how to create and manage variables in Figma, check out this article.
Choose your icon style
Can't decide between outlined or solid icons? Now you don't have to commit.
Open the Variables panel in the UI kit file.
Find the variable named global-icon.
Change the style by typing outlined to solid.
Voilà. Every icon in every component just updated.
Using your own icons?
To integrate a different library, see our guide on custom icons.
Customize all form components at once
Let's be honest, styling forms is a drag. That's why we put all the core form styles into one place. Look for the global-form group in UI kit file Variables.
For example, to change the border-radius of all form field inputs, in the Variables pane:
Navigate to global / form / field / size / border-radius.
Change the variable to any other dimension / border-radius theme size.
Boom, every input field just got rounder (or sharper).
