Web Application UI Kit Development
A UI kit is a library of visual components: buttons, inputs, cards, tables, icons, typography, color palette — all assembled in one place with consistent visual language. Not a design system (broader), but a set of ready-made blocks for assembling interfaces.
Practical value of a UI kit is that designers stop drawing the same button in every mockup, and developers stop asking "what's its hover color."
What's Included in UI Kit
A complete UI kit for web application includes:
Foundations (Basics)
- Color palette: primary, secondary, neutral + semantic colors (success, warning, error, info) with shades 50–950 like Tailwind
- Typography scale: headings H1–H6, body texts (lg/md/sm/xs), captions, code blocks — with font-family, font-size, line-height, letter-spacing
- Grid: number of columns, gutters, margins for each breakpoint
- Border radii, shadow system (elevation), iconography (sizes, library)
Components (Atoms)
- Buttons: primary/secondary/ghost/destructive × default/hover/active/disabled/loading
- Inputs: text, email, password, number, textarea, select, checkbox, radio, toggle, date picker
- Badges, tags, chips, tooltips, alerts
- Avatars, progress bars, spinners
Composite Components (Molecules)
- Cards (basic, with image, with action)
- Navigation: breadcrumbs, tabs, pagination, stepper
- Tables with sorting, filters, pagination
- Modals and drawers
- Dropdown menus, context menus
Deep Dive: Component Variants in Figma
The right component structure in Figma determines how comfortably you'll work with the UI kit in 6 months.
Modern approach — Component Properties (introduced Figma 2022). Button example:
Button
├── Properties:
│ ├── Variant: Primary | Secondary | Ghost | Destructive
│ ├── State: Default | Hover | Active | Disabled | Loading
│ ├── Size: SM | MD | LG
│ ├── Icon Left: boolean (instance swap)
│ ├── Icon Right: boolean (instance swap)
│ └── Label: text
This lets you change any property from right panel without switching variants manually. Total: instead of 4 × 5 × 3 = 60 separate components — one component with Properties.
For inputs mandatory states: Default, Focused, Filled, Error, Disabled. Plus variants with Label/without, with Hint text/without, with icon/without. All covered via Component Properties, not component multiplication.
Auto Layout — everything in UI kit must be built on Auto Layout. This guarantees correct component behavior on text changes (button stretches under long label, doesn't cut it) and simplifies responsiveness.
Tokens and Code Connection
Professional UI kit operates on design tokens — named variables for all visual values. Colors, spacing, radii, shadows — not concrete values (#3B82F6), but tokens (color.primary.500).
Tools for exporting tokens from Figma to code:
- Tokens Studio (Figma plugin) — export to W3C Design Tokens JSON format
- Style Dictionary (Amazon) — transform tokens into CSS custom properties, SCSS, JS/TS objects, Swift, Android XML
- Figma Variables (native) — sync via Figma REST API
Example chain: designer changes color.primary.500 in Figma Variables → CI/CD picks up export via API → Style Dictionary generates updated tokens.css → components automatically get new color.
UI Kit Documentation
UI kit without documentation is used incorrectly. Minimal Figma documentation:
- Cover page — purpose, version, owner
- Usage guidelines for each component: when to use, when not to, examples of correct and incorrect usage
- Changelog — what changed in each version
Timeline
UI kit for small web application (20–30 components) — 10–15 working days. Full-featured UI kit for large product (50+ components, tokens, documentation) — 4–6 weeks.