Browse
Figma kit
The same components and variables as the code, in one Figma library. Design with the parts developers install, and switch modes the same way the app does.
- variables
- 612
- collections
- 27
- component pages
- 30
- icons
- 856
What is inside
| Foundations · 10 | Colors, Typography, Spacing, Radius · Border · Ring, Shadow, Layout, Motion, Icon, Image ratio, Example |
|---|---|
| Base components · 16 | Input, Avatar, Button, Badge, Checkbox, Toggle, Radio, Tag, Divider, Rating, Tooltips, Sliders, Counter, Progress, Skeleton, Segmented |
| Composite components · 14 | Accordion, Alert, Breadcrumbs, Card, Date / Time Picker, Sidebar, Stepper, Side Panel, Tabs & pills, Pagination, Modal & Dialog, Popover, Uploader, Table |
Variables and modes
| Collection | Variables | Modes |
|---|---|---|
Primitives | 288 | Light · Dark |
Semantic v2 | 62 | Light · Dark |
Palette | 20 | Neutral · Red · Orange · Yellow · Green · Teal · Cyan · Blue · Purple · Pink |
Typography | 22 | Desktop · Mobile |
Typeface | 1 | VelaUI · Appia |
Corner-Radius | 1 | Four moods, from soft to sharp |
Type-Scale-Config | 1 | Base 16 · Base 14 · Base 13 |
Spacing | 26 | — |
Grid | 3 | Desktop · Tablet · Mobile |
How to enable the library
- 01Open the Vela UI file and publish it as a library in your team, or ask the Venizia team for access.
- 02In your design file, open Assets → Libraries and turn Vela UI on.
- 03Insert components from Assets. Set Light or Dark, the type scale and the corner-radius mood with variable modes on the frame.