Vuetify Figma - Seamless Integration with Vuetify, Guaranteed | Product Hunt

Seamless Integration with Vuetify, Guaranteed

A comprehensive and customizable design system with 154 components, perfectly aligned with Vuetify for seamless design-to-code transition.

Get NowOpen Figma
Imagen principal de Vuetify Figma

150+

Created components

80+

Variables

25

Styles

500+

Variants

Properties aligned with real components
Propiedades de Vuetify Card en Figma
Propiedades de Vuetify Card en Figma
Main Features

This features to help you build your website seamlessly in figma and code.

Make yourself at home

The entire Figma file is organized in the same way as the Vuetify site. This makes it easier to find what you're looking for.

Light and dark

The Vuetify Figma comes with both light and dark modes. This makes it easy to design for both themes.

Components

The Vuetify Figma comes with all of the Vuetify components. This makes it easy to design with the same components that you'll use in your app.

Material Design

The same Material Design principles that are used in Vuetify are used in the Figma file.

Customizable

The Vuetify Figma file is fully customizable. This makes it easy to change colors, fonts, and other design elements.

Pricing

Choose a plan that works best for you and your team.

Official / Approved by Vuetify

Vuetify UI Kit — PRO vs FREE

Design faster with 1:1 Vuetify components, production-ready variants and style controls (colors, densities, radius and states) that adapt to any brand. Choose the version that best fits your workflow.

Why PRO

Recommended
  • 150+ components with 1:1 names and structure with Vuetify.
  • All variants (elevated, flat, tonal, outlined, text, plain…) and complete states.
  • Advanced foundations: 7 color roles, densities, radius, borders (color/width/opacity).
  • +4 modes by variables (light/dark and more) to scale brands and themes.
  • Updates synchronized with the library and direct support.
Get PRO Try FREE Updates included • Commercial use license

Ideal for

Teams & Startups

Faster delivery, total consistency and less rework.

Freelancers

Winning proposals and clean handoff with devs.

Design Systems

Variables, tokens and real theme scalability.

Dev Teams

1:1 parity with Vuetify components to implement without friction.

FREE
License
For personal, non-commercial use. Limited features and single use only..
$0One time payment
  • All components included
  • Dark & Light Modes
  • All variants included
  • Color Roles
  • Advanced foundations
  • Updates & Support
Choose Free
PRO
Personal
Non-commercial use for one personal project. Does not generate revenue.
$ 89 One time payment
  • All components included
  • Dark & Light Themes
  • All variants included
  • Color Roles
  • Modes by variables
  • Updates & Support
Choose Personal
PRO
Commercial
Use in one revenue-generating or paid project. Non-transferable.
$ 279 One time payment
  • All components included
  • Dark & Light Themes
  • All variants included
  • Color Roles
  • Modes by variables
  • Updates & Support
Choose Commercial
PRO
Unlimited
Unlimited use across personal and commercial projects.
$ 549 One time payment
  • All components included
  • Dark & Light Themes
  • All variants included
  • Advanced foundations
  • Modes by variables
  • Updates & Full Support
Choose Unlimited
FEATURES
PRO
FREE
Foundations
Includes complete **Material Design Colors**
Does not include MD color palette
Themes
Light / Dark (+ extra modes by variables)
Light / Dark
Color Roles
Default, Primary, Secondary, Custom, Error, Warning, Info, Success
Default, Primary, Secondary, Custom, Error, Warning, Info, Success
States
Enabled, Disabled, Active/Focus, Hover
Enabled, Disabled
Sizes
Default, Small, X/Small, Large, X/Large
Default, Small, Large
Density
Default, Comfortable, Compact
Only Default
Border Color
Current + Primary, Secondary, Error, Warning, Info, Success
Only Current
Border Width
default, 0, xs (thin), sm, md, lg, xl
default, 0
Border Opacity
default, 0, 25, 50, 75, 100
Not available
Border Radius
default, square, xs, sm, md, lg, xl, pill, circle
default, square, pill, circle
Error State
Full support
Basic inputs
Others
Individual color control in VField
No individual control
Components
All components
Missing components
Variants
All variants
Only elevated • flat • outlined
Variants in Inputs
All variants
Only filled • outlined
Updates & Support
Synchronized with library + support
Not guaranteed • no support
Modes by variables
4+ modes (Light/Dark and additional)
4 or less

Everything ready to build at Vuetify speed.

1:1 parity with the library, complete variants and support to grow without friction.

Get PRO Try FREE

Quick Start Your Vuetify-Aligned Design Journey

Craft beautiful interfaces with a system designed to streamline your workflow from Figma to code. Join a growing community of designers and developers who trust our library for their projects.

Get Now