Build a beautiful, functional site with Figma and Framer components

Build a beautiful, functional site with Figma and Framer components

Build a beautiful, functional site with Figma and Framer components

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.

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.

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.

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.

New update

UI Templates

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

New update

UI Templates

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

New update

UI Templates

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

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.

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.

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.

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.

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

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

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

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

All-Access

$

49

$99

One-time, 50% off

All 300+ components

2,000+ Figma variants

2,116 unique icons

Framer components

All-Access

$

49

$99

One-time, 50% off

All 300+ components

2,000+ Figma variants

2,116 unique icons

Framer components

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.

OR, 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.

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

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

Search

Monthly

Yearly