Open the kit
Your order page and email include the Figma link. Open it while signed in and choose Duplicate to save your own copy to your drafts. Edit the copy, never the original.
How the file is organised
- Cover: overview and version.
- Components: every component with its variants.
- Styles: colours, typography, spacing and effects as variables and styles.
- Example screens: complete layouts built from the components.
Working with variables and variants
- Change colour or type variables to rebrand the whole kit at once.
- Use component properties (size, state, icon) instead of detaching instances.
- Keep auto-layout on, so components resize correctly when content changes.
Handing off to code
The Dashboard UI Kit includes matching HTML/Tailwind pages. Token names in Figma match the Tailwind configuration, so values carry across directly.