Build a beautiful, functional site with Figma and Framer components

Discover our expansive design system with hundreds of Figma UI components and templates, ready for Framer integration. Meticulously organized with variables, variants, and adaptive layouts, our extensive UI kit is made from decades of expertise in UI/UX design.

New update

UI Templates

Introducing a collection of fully designed and functional components, tailored to enhance your Figma and Framer projects.

Wallpaper

Blurs

Overlay

UI Components

Line

Flat

md

lg

Monthly

Yearly

DEBIT CARD

**** **** **** 2859

Valid thru 06/24

All your cards in one place

Smart cards

Make your finances work for you with the power of AI. From tracking expenses to planning investments, gain insights.

Add card

Choose

Menu

Account

Pricing

Billing

Settings

Support

Sign out

Search

Notifications

Hola Spine

prepared a report

2m ago

Eva Solain

invited you to a chat

5m ago

Pierre Ford

invited you to a meeting

5m ago

Steve Ater

Invited you to a chat

1d ago

All-Access

$

49

$99

One-time, 50% off

All 300+ components

2,000+ Figma variants

2,116 unique icons

Framer components

Customize everything. Layouts, styles, patterns, breakpoints, icons.

What makes DesignCode UI unique is its theming. The aesthetic is unmistakably different and personal. The background sets the mood, the glass absorb the colors and the shadows elevate. Despite that, it’s super flexible.

CSS

React

Tailwind

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// Type or paste the code you want to highlight below

// or select a text node and run the plugin

import syntaxHighlight from 'syntax-highlight'

const codeBlock = document.querySelector("#code")

function highlight(code) {

return syntaxHighlight(code)

}

Pro Plan

$

120

per yearly, billed yearly

You will be charged $120 for a one year access. When you click on “Subscribe”, your subscription will begin and you will be charged $120 immediately. It will renew automatically. You are also agreeing to our Terms of Service and our Privacy Policy.

Subscribe

OR, PAY WITH PAYPAL

Pay with PayPal

This purchase will not auto-renew. You will be taken to PayPal to complete the payment.

Balance

CREDIT CARD

**** **** **** 2859

Valid thru 02/26

Card details

Card number

****

Balance

$28,678.65

Currency

USD

Status card

06/24 (Active)

1 of 4

Notifications

See all

Hola Spine

prepared a report

2m ago

Eva Solain

invited you to a chat

5m ago

Pierre Ford

invited you to a meeting

5m ago

Steve Ater

Invited you to a chat

1d ago

New update

UI Templates

Introducing a collection of fully designed and functional components, tailored to enhance your Figma and Framer projects.

Do you accept PayPal?

Yes, we accept PayPal for the one-year plan only. Purchasing through PayPal will not renew your subscription at the end of your one-year period.

Meng To

Designer and coder

Yes, if you’re new to SwiftUI, I recommend taking the iOS course first since it covers more the basics and is more complete with 60 videos.

Wallpaper

Blurs

Overlay

UI Components

Line

Flat

md

lg

Pixel Density

2x

3x

Format

JPG

WebP

Confirmation

Are you sure you want to change your profile information? This cannot be undone.

Complete design system. Every element, big or small, is a component.

Optimize your design process with Figma's Variables and Framer's true implementation, ensuring design consistency and creating adaptable design systems. This all-in-one package provide comprehensive guides to help you every step of the way.

25 Components

Buttons

In any design system, buttons serve as crucial elements as they prompt users to take actions. They hold significant roles in guiding users through an interface. Understanding their use and customization in our system will streamline your design process.

Light/Dark Mode
Size: Regular, Medium, Large, Extra Large
Left or Right Icon
2,116 Icons
States: Normal, Hover, Selected, Active
Variables: Colors, Spacing, Themes

Button Glow

Button Menu

Button tooltip

Ghost button

Button Toggle

20 Components

Controls

Design systems provide a wide range of controls to help facilitate user interaction with your interface. In our Figma UI Kit, you will find various controls like segmented controls, toggles, and search bars, each designed to enhance user experience.

Light/Dark Mode
Size: Regular, Medium, Large, Extra Large
1 to 5 segments
Auto Layout and properties
Variables: Colors, Spacing, Themes

CSS

React

Tailwind

Choose

Menu

Line

Flat

Search

Monthly

Yearly

260+ Components

Menus & Content

In the world of UX/UI design, components like menus, popovers, navigation, and sidebars are vital in enhancing user experience. Figma and Framer offer a diverse range of these UI components to boost your design capabilities.

Light/Dark Mode
Size: Regular, Medium, Large, Extra Large
States: Normal, Hover, Active, Inactive
Auto Layout and properties
Variables: Colors, Spacing, Themes

SPECIAL CARD

Marisa Lu

Valid thru 11/25

Account

Pricing

Billing

Settings

Support

Sign out

Limited-time pricing

As we grow our library of UI components, we’re introducing a limited-time pricing that’s not only 50% off but also significantly cheaper than what’s on the market

Basic

Free

Preview

50 components

200+ Figma variants

1,000 unique icons

Auto Layout

Glass style only

Figma only

Lifetime updates

Unlimited projects

Single user license

All-Access

$

49

$99

One-time, 50% off

All 300+ components

2,000+ Figma variants

2,116 unique icons

Auto Layout, 200+ Variables

Glass, Outline, Flat styles

Figma & Framer components

Lifetime updates

Unlimited projects

Single user license

Team

$

149

$299

One-time, 50% off

All 300+ components

2,000+ Figma variants

2,116 unique icons

Auto Layout, 200+ Variables

Glass, Outline, Flat styles

Figma & Framer components

Lifetime updates

Unlimited projects

Up to 5 users license

Part of a team of 5+? Our team plan lets you customize your license for multiple projects and team members. Contact us for more info.

Part of a team of 5+? Our team plan lets you customize your license for multiple projects and team members. Contact us for more info.

Part of a team of 5+? Our team plan lets you customize your license for multiple projects and team members. Contact us for more info.

Hear It From Our Customers

Our clients' success stories are at the heart of what we do. These detailed accounts showcase their journey of growth, innovation, and success, facilitated by our collaborative partnerships and tailored solutions.

Frequently Asked Questions

Have questions? We've got answers! Our FAQ section is designed to provide you with information on payment methods, refund policies, customer support, access to purchases, update frequencies, and licensing details for DesignCode UI.

What payment options are available for DesignCode UI purchases?

We accept payments through Stripe via LemonSqueezy. This includes major credit/debit cards.

What is DesignCode UI’s refund policy?

We offer a 30-day satisfaction guarantee for DesignCode UI. If you’re not completely satisfied within 30 days of your purchase, reach out to us for a full refund.

Does DesignCode UI offer customer support?

Yes, we provide dedicated customer support for all DesignCode UI users. If you have any questions or need assistance, feel free to contact us via email or through our support portal.

How can I access my DesignCode UI downloads after purchase?

After purchasing DesignCode UI, you can find your Figma and Framer files, along with your unique license on Lemon Squeezy. Log in on LemonSqueezy.com Go to "My Orders" Click on DesignCode UI Find the downloads in "Files" Find your license under "Licenses".

How frequently are DesignCode UI components updated?

Our components are updated daily to stay abreast of the latest trends and technologies in design and coding. Subscribers will receive notifications about new updates and access them immediately.

How does your License work?

After purchase, you will get a License code. This is your valid code that gives you the right to use our UI Kit commercially on any project, as long as you don't redistribute our project. If there are any copyright strikes in the future, you can reference this code.