mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
291 lines
12 KiB
YAML
291 lines
12 KiB
YAML
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
|
||
|
||
{.w-full .rounded .mb-2 .max-w-[636px]}
|