title: Nuxt UI Figma Design Kits
description: Bridge the gap between designers and developers using professional-grade components. The official Nuxt UI & Nuxt UI Pro design kits for Figma mirrors the development library for perfect consistency.
headline: Used and loved by 2,000 designers and teams.
hero:
  title: From [Figma]{#figma} to [Nuxt]{#nuxt}, faster.
  description: From wireframe to production in no time with the official Nuxt UI & Nuxt UI Pro design kits for Figma. Start free with the Nuxt UI Kit, or upgrade to Nuxt UI Pro for premium components, layouts, and enhanced design-to-code efficiency.
  image: /figma/hero.png
  links:
    - label: Purchase Pro Kit
      to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
      target: _blank
    - label: Free Figma Kit
      to: 'https://go.nuxt.com/figma'
      icon: i-logos-figma
      color: neutral
      variant: outline
      target: _blank
features1:
  features:
    - title: Advanced Figma Features
      description: Components, Local Variables, Auto Layout, Variants and more.
      icon: i-logos-figma
    - title: Instant Theming
      description: Customize your design system instantly using local variables and tokens.
      icon: i-lucide-swatch-book
    - title: Two Powerful Design Kits
      description: Start with essential components, or unlock Pro for complete blocks and templates.
      icon: i-lucide-files
cta1:
  title: Everything you need in a [single file]{class="text-(--ui-primary)"}.
  description: Design and development in perfect sync with our [Free](https://www.figma.com/community/file/1288455405058138934/nuxt-ui-v3-official-design-kit-free) and Pro files. Developers can implement designs faster, while designers work with production-ready components.
section1:
  title: Customize in a few clicks to fit your needs
  description: Control your entire design system with Figma Variables. Update primitive tokens once and watch your changes spread across the entire system.
  reverse: true
  features:
    - title: Style with color variables powered by Tailwind CSS colors
      icon: i-simple-icons-tailwindcss
    - title: Apply over 500+ local variables across your entire file
      icon: i-lucide-layers-2
    - title: Build with unified tokens for consistency
      icon: i-lucide-bolt
  tabs:
    - label: Define your tokens
      src: /pro/figma/local-variables.png
      width: 656
      height: 342
      alt: Define local variables in the Nuxt UI Figma design kit
    - label: Use them in your design
      src: /pro/figma/local-variables-result.png
      width: 656
      height: 342
      alt: Use color variables in the Nuxt UI Figma design kit
  links:
    - label: Preview UI Pro Design Kit
      to: 'https://go.nuxt.com/figma-pro'
      target: _blank
      icon: i-logos-figma
      color: neutral
      variant: outline
section2:
  title: One component, endless possibilities
  description: Create unlimited variations through nested components and swappable instances. Every element is fully themeable with props and slots, giving you complete control.
  features:
    - title: Choose between 17K+ components and variants
      icon: i-lucide-component
    - title: Customize designs with swap instance
      icon: i-lucide-square-dashed-mouse-pointer
    - title: Switch between light and dark modes in one click
      icon: i-lucide-moon
  image:
    src: /pro/figma/component.png
    width: 656
    height: 374
    alt: A component in the Nuxt UI Figma design kit
  links:
    - label: Preview UI Pro Design Kit
      to: 'https://go.nuxt.com/figma-pro'
      target: _blank
      icon: i-logos-figma
      color: neutral
      variant: outline
section3:
  title: Perfect match with development
  description: Our Figma kit perfectly matches Nuxt UI Pro components, ensuring complete alignment between design and development.
  reverse: true
  features:
    - title: Match development standards using the same props and tokens
      icon: i-lucide-square-code
    - title: Access Nuxt UI components through direct links
      icon: i-lucide-link
    - title: Work together as design and dev teams share one component language
      icon: i-lucide-handshake
  image:
    src: /pro/figma/nuxt-ui-figma-to-code.png
    width: 656
    height: 370
    alt: A screenshot of Nuxt UI Code & Figma Kit
  links:
    - label: Preview UI Pro Design Kit
      to: 'https://go.nuxt.com/figma-pro'
      icon: i-logos-figma
      color: neutral
      variant: outline
      target: _blank
features2:
  features:
    - title: Ready-to-use Templates
      description: Production-ready templates for marketing sites, documentation, and more included.
      icon: i-lucide-panels-top-left
    - title: Well-Documented System
      description: Complete guides for designers and developers to master your design system.
      icon: i-lucide-book-open-text
    - title: Icons Pack
      description: Complete Lucide icon library included - 1500+ ready components.
      icon: i-lucide-smile
section4:
  title: Start designing now.
  description: '**From download to deployment in simple steps.** :br Get instant access to production-ready components and start creating.'
  links:
    - label: Get access now
      to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
    - label: Preview UI Pro Design Kit
      to: 'https://go.nuxt.com/figma-pro'
      icon: i-logos-figma
      color: neutral
      variant: outline
      target: _blank
  steps:
    - title: Download & Import
      description: After purchasing, just extract the ZIP file and drag & drop it directly into Figma.
      image:
        src: /pro/figma/step-1.png
        alt: Import the Nuxt UI Pro Figma design kit
        width: 314
        height: 230
    - title: Customize to your brand
      description: Set your colors, typography, and styles to match your brand identity in minutes.
      image:
        src: /pro/figma/step-2.png
        alt: Customize the Nuxt UI Pro Figma design kit
        width: 314
        height: 230
    - title: Design your website
      description: Design beautiful interfaces with production-ready components. Drag, drop, and customize.
      image:
        src: /pro/figma/step-3.png
        alt: Design your website with the Nuxt UI Pro Figma design kit
        width: 314
        height: 230
    - title: Share it with your developers
      description: Perfect development handoff with components that match Nuxt UI's structure exactly.
      image:
        src: /pro/figma/step-4.png
        alt: Share it with your developers with the Nuxt UI Pro Figma design kit
        width: 314
        height: 230
pricing:
  title: Pricing plan that scale with you.
  description: Start for free with Nuxt UI components, or unlock the complete Nuxt UI Pro design kit with a one-time purchase.
  plans:
    - title: Free Design Kit
      description: Start with all Nuxt UI components and tokens.
      price: FREE
      features:
        - '**Nuxt UI only components**'
        - 40+ fully customizable components
        - Figma Local Variables for colors, typography, and effects
        - Light and Dark mode ready
        - Lucide icons (1500+ icons) integration
        - Regular updates
      button:
        label: Open in Figma
        icon: i-logos-figma
        to: https://go.nuxt.com/figma
        color: neutral
      terms: Used by 17,000+ designers.
    - title: Solo License
      description: Design faster with all Nuxt UI Pro components.
      price: $149
      # discount: $119
      billing_period: one-time payment
      billing_cycle: plus local taxes
      class: bg-(--ui-bg-elevated)/50
      features:
        - '**1 Designer**'
        - Nuxt UI & Nuxt UI Pro Components
        - 'Templates: Landing, Documentation, etc'
        - Quick Start with Step-by-step Guides
        - Use on Unlimited Projects
        - Lifetime Free Updates
      button:
        label: Buy now
        to: https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d
      extraButton:
        label: Preview in Figma
        to: 'https://go.nuxt.com/figma-pro'
        target: _blank
        icon: i-logos-figma
    - title: Team License
      description: Everything you need to deliver faster as a team.
      price: $349
      # discount: $279
      billing_period: one-time payment
      billing_cycle: plus local taxes
      class: bg-(--ui-bg-elevated)/50
      features:
        - '**Up to 20 Designers**'
        - Nuxt UI & Nuxt UI Pro Components
        - 'Templates: Landing, Documentation, etc'
        - Step-by-step guides to help you start
        - Use on unlimited projects
        - Lifetime free updates
      button:
        label: Buy now
        to: https://nuxt.lemonsqueezy.com/buy/2979099c-b7a0-4ba1-90e0-a0d60509b92d
      extraButton:
        label: Preview in Figma
        to: 'https://go.nuxt.com/figma-pro'
        target: _blank
        icon: i-logos-figma
customers:
  title: Used by 2,000+ developers & designers around the world.
  items:
    - src: /pro/logos/springfieldclinic.svg
      alt: Springfield Clinic
    - src: /pro/logos/churnkey.svg
      alt: Churnkey
    - src: /pro/logos/bosch.svg
      alt: BOSCH
    - src: /pro/logos/blizzard.svg
      alt: Blizzard
    - src: /pro/logos/bodet.svg
      alt: Bodet
    - src: /pro/logos/win.svg
      alt: WinReality
    - src: /pro/logos/tower.svg
      alt: Tower Research
    - src: /pro/logos/liegeairport.svg
      alt: Liege Airport
    - src: /pro/logos/wuniversity.svg
      alt: University of Washington
    - src: /pro/logos/funda.svg
      alt: Funda
    - src: /pro/logos/exxonmobil.svg
      alt: ExxonMobil
    - src: /pro/logos/mainpost.svg
      alt: Main Post
    - src: /pro/logos/insep.svg
      alt: INSEP
    - src: /pro/logos/applause.svg
      alt: Applause
    - src: /pro/logos/instadapp.svg
      alt: Instadapp
faq:
  title: Frequently Asked Questions
  description: If you can't find what you're looking for, email our support team and if you're lucky someone will get back to you.
  items:
    - label: Can I use the UI kit on a free Figma account?
      content: Yes. You don't need Figma's paid plan to use our UI kits.
      defaultOpen: true
    - label: Do you have a free trial?
      content: We don't offer a free trial for the Pro Figma Kit, you can [preview it](https://go.nuxt.com/figma-pro).
    - label: How do I access the files after purchasing?
      content: After purchasing, just extract the ZIP file and drag & drop it directly into Figma.
    - label: Can I upgrade my Solo license to the Team license?
      content: Yes! Email us at design@nuxt.com with your details and we'll send you a discount code.
    - label: Can I use the UI Kit license for commercial projects?
      content: Yes, the license allows you to sell your designs that utilize the UI Kit implementations.
    - label: Can I create multiple projects for multiple clients?
      content: Yes, you can create multiple projects for multiple clients with the same license, there is no limit to the number of projects you can create.
    - label: Can I include UI Kit in an open source project?
      content: No, the license does not allow you to include the UI Kit in an open source project where the design files are publicly accessible.
    - label: How do I contact you?
      content: Email us at design@nuxt.com with your details and we'll help you out.
    - label: What is your refund policy?
      content: As the Figma Pro Kit is a digital product packaged as a zip file, we cannot offer refunds once the purchase is made.
    - label: Do you have a Figma to Code plugin?
      content: >
        We recommend the open source [TemPad Dev](https://github.com/ecomfe/tempad-dev) inspect panel with the [TemPad Dev Nuxt UI Plugin](https://github.com/Justineo/tempad-dev-plugin-nuxt-ui):

          1. Install the [TemPad Dev Chrome Extension](https://chromewebstore.google.com/detail/tempad-dev/lgoeakbaikpkihoiphamaeopmliaimpc)

          2. Open your Figma file with Nuxt UI components (reload the page if you don't see the TemPad Dev panel)

          3. Install the `@nuxt` (or `@nuxt/pro` for Nuxt UI Pro) in TemPad Dev's plugins section

          4. Select any Nuxt UI component and inspect the code it generates

        ![TemPad Dev Nuxt UI Plugin](/pro/figma/teampad-dev-nuxt-ui-plugin.gif){.w-full .rounded .mb-2 .max-w-[636px]}