The most Universal Figma UI Kit

Unlock the potential of a powerful UI Kit for designing landing pages, websites and dashboards in Figma. Save time and kickstart any project with ease.

Components

25

Sections

100+

Templates

50+
How to use

From creation to presentation

How it works

Design like never before. 10x faster

Have a fresh look on the design process and make your work much easier.

1 Drag and drop the button component
Getting started is easy

Drag and drop the component or section you need from an extensive library, or start with a ready-made template.

Components
Sections
Templates
2 Customization the button component
Flexible customization

Customize components or sections to fit your needs. Just a few clicks to resize, change type or switch to a dark theme.

Light and Dark
Type
Size
and many more
3 Present the button component
Present like a Pro

All the components are interactive, making your prototype look dynamic and similar to the final product.

Interactions
States
Smooth animation
Create

Everything you need for a quick start

Start your project by choosing from a wide range of components, sections, or ready-made templates. Simply drag and drop the selected component into your working area.

Get an easy start with our extensive templates library

Our library offers a wide variety of templates to meet your specific needs.

View all templates
Landing page examplePrice page exampleForm page example
Header navigation sectionBank card sectionPrice sectionFooter navigation sectionWebpage with the payment form

Get started with the ready-made sections

Speed up your work by using pre-made sections and blocks to build the interface.

Preview in Figma
Header navigation sectionBank card sectionPrice sectionFooter navigation sectionWebpage with the payment form

Elevate your projects with our extensive components library

Our UI Kit library offers a wide range of customizable components to suit various needs.

Detailed description of the text input component

Detailed description

Attention to details of the text input component

Attention to details

Variables documentationPresent the button componentPresent the button componentPresent the button component

Build your project on a solid foundation

Thanks to a foundation with grids for different screens, colors, and fonts, it's easy to keep a consistent style in all your layouts.

Variables
Typography
Color
Grid
Corner radius
Elevation
Preview in Figma
Variables documentationPresent the button componentPresent the button componentPresent the button component

Begin easily with a "How to Use" guide and step-by-step tutorials

Get started without any difficulty by using a user-friendly "How to Use" guide that provides clear instructions, and then proceed with step-by-step tutorials to help you learn more effectively.

Start creating
TutorailsHow to use guide
TutorailsHow to use guide
Customize

Flexible customization

Customizing components and sections has never been easier and more flexible.

Description of color variables for the text input
Variables

Thanks to Figma variables, you can save time and make it easier to manage the design system.

Customization text input component with properties
Universal components

Our components are easily customizable to fit your needs. With just one click, you can resize, change their type, states, and hide one or more elements.

Responsive button component
Responsive components

All the components are based on Auto Layout, so they can be easily adjusted to any interface size.

Global styles of typography and primary color
Global styles

Thanks to a unified foundation, you can easily change fonts and colors to your own.

Dark and light theme

A single click is all you need to switch elements and sections from light to dark themes and vice versa.

Switching between light and dark themes using variable modes
Present

Present like a Pro

Make your prototype look dynamic and similar to the final product.

Screenshot of a webpage for 123done, which offers a tool for creating charts and infographics in Figma.
Hover and focus states of the button component
Interactions

All components are interactive, making your prototype look like the final product.

States of the checkbox component
Component states

All components have various states. Hover or click to see the result.

Smooth animation

We ensured smooth animations during interactions.

File

All in one file

Our goal is to give you an unlimited design power in a compact form.

25 Components

25 Components

500+ Variants

50+ pre-made Templates

50+ pre-made Templates

100+ pre-made Sections

Foundation

Foundation

100+ Icons

Compact view

The file structure is simple and easy to start working with it.

Compact view of the Universal UI Kit
Organized by categories

The assets are organized in a structured system, allowing you to quickly find the elements you need.

Organized assets by categories
Examples

Unlimited power

Universal UI Kit is a powerful tool for creating stunning, fully customizable web pages with ease.

Examples of using the Universal UI Kit
Licenses

Get Universal UI Kit

Projects require different types of licenses. Choose your one.

1 year of updates

Perfect for solo designers, developers, creators and freelancers.

$79

Then $39/year • Cancel anytime

Buy now
  • Single user license
  • 1 year of free updates
  • Personal or commercial projects
Lifetime updates

Perfect for solo designers, developers, creators and freelancers.

$119

One-time payment

Buy now
  • Single user license
  • Lifetime free updates
  • Personal or commercial projects
Custom service

Custom Figma Data Visualization based on the Universal Data Visualization.

$2,999

3-4 weeks for development

Contact us
  • We'll create a custom Figma Data Visualization for your project based on the Universal Data Visualization and your instructions
  • Up to 20 users
  • Personal or commercial projects
1 year of updates

Best for startups, teams, business or enterprise organisations.

$237

Then $117/year • Cancel anytime

Buy now
  • Up to 20 users
  • 1 year of free updates
  • Personal or commercial projects
Lifetime updates

Best for startups, teams, business or enterprise organisations.

$357

One-time payment

Buy now
  • Up to 20 users
  • Lifetime free updates
  • Personal or commercial projects
Custom service

Custom Figma Data Visualization based on the Universal Data Visualization.

$2,999

3-4 weeks for development

Contact us
  • We'll create a custom Figma Data Visualization for your project based on the Universal Data Visualization and your instructions
  • Up to 20 users
  • Personal or commercial projects

Safety payments provided by Lemon Squeezy.

5.0
5.0
Save 30%
Universal Design System

Access the UI Kit, Data Visualization, and Icon Set in one place.

Learn more
Info
Versionv4.1
FormatFigma
Last updateFeb 15, 2024
Features
  • All shapes are vector based
  • Easy to change (Support Figma's Variants)
  • Easy to change color and font
Updates

Version 4.1 (Feb 15, 2024)

New Sections and Templates

Version 4.0 (Oct 30, 2023)

Now with Variables

FAQs

Need help?

Here are answers to our most frequently asked questions.

The subscription is required if you want to receive product updates.

Yes, of course, you can cancel your subscription at any time.

Yes, of course, you will be able to use the products for personal and commercial projects after your subscription ends.

If you purchased through Lemon Squeezy:

  • From your My Orders page if you made an account.
  • By clicking ”Download” button in your original purchase email. These are sent from hello@lemonsqueezy-mail.com with the subject ”You purchased …”

If you purchased through Gumroad:

Figma's Starter plan is 100% free for individuals. If you want to use more advanced features such as team libraries, dev mode, or multiple variable modes, you'll need to purchase a Professional plan.

If you have any questions or require additional information, please do not hesitate to contact us. We welcome your feedback about the product at hello@123d.one

We also recommend checking Figma's Help Center for the best tutorials on more advanced features, such as components, variants, auto layout, interactive components, and component properties.

We use Lemon Squeezy and Gumroad to handle the payment process. They use secure SSL encryption, so you're very safe!

Yes, of course. We'll discount the amount you've paid for the commercial license. Just send us an email at hello@123d.one

Yes, certainly. We will discount the amount you've already paid for the product (UI Kit, Icon Set, or Data Visualization) that is included in the Universal Design System. Please send us an email at hello@123d.one

If you purchased through Lemon Squeezy:

  • From your My Orders page if you made an account. Just click the ”Generate Invoice” button.
  • By clicking ”Generate” link in your original purchase email. These are sent from hello@lemonsqueezy-mail.com with the subject ”You purchased …”

If you purchased through Gumroad:

  • By clicking the ”Generate” button on your receipt from Gumroad after your purchase.

You can use our products for any commercial project. Feel free to create unlimited designs for clients and charge for your services.

But please note that you can't use it to create another UI Kit, icon set, theme, or template, even if it's not in Figma. Be sure to review our License Agreement before purchasing.

We offer a 50% student discount. Please email us at hello@123d.one before making your purchase, and make sure to use your student email or attach valid student ID/proof.

We typically respond within 2 business days, but it may take up to a week in some cases. If you haven't found our email in your inbox, please check your junk mail folder and ensure that hello@123d.one and hello@123d.one are added to your White List or Safe Sender List.

If you still haven’t received an email, reach out to us on Instagram or X (Twitter).

We will do our best to answer your request as soon as possible.

Universal UI Kit (Web) v4.0 - The most Universal UI Kit for Figma | Product Hunt