build a design system! ep. 1 figma tokens variables setup

In this comprehensive video, you will be guided through the process of building a robust design system using Figma. UI Collective delves into the intricate details of setting up Figma variables and design tokens, laying the foundation for constructing a cohesive and scalable design system.

The video begins by exploring the fundamentals of color scales, guiding viewers through creating brand-specific color palettes.
As the video progresses, the focus shifts to typography, with UI Collective introducing different approaches to managing type variables. It then delves into border widths, radii, and spacing variables, ensuring the design system encompasses a cohesive and visually appealing aesthetic.

UI & UX design inspiration for mobile & web apps.

orbs




Get Fountn

Pro friends get unlimited Figma conversions, bookmarks and collections.

Free Forever

$0

1 Figma conversion/day

5 collections

15 bookmarks

Limited access to new features

Current Plan

Fountn Pro

$6

Unlimited Figma conversions

Unlimited collections

Unlimited bookmarks

Full access to new features

Upgrade to Pro

You've reached your free limit. Upgrade for unlimited access.