Preline UI Figma - crafted with Tailwind CSS styles

World's largest free Figma design system

Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.

12-column

Grid System

Grid System

Easily find UI elements

Browse dozens of components and drag them into the canvas from the Assets or Resources panel.

Easily find UI elements

Variants and Properties

Best-in-class Figma variants allow you to alter certain predefined aspects of single components, to make any variant you like.

Variants and Properties

Endles s s s s s s s

Tailwind CSS font

S i z e s

to choose from
Tailwind CSS

Color styles

Tailwind CSS Color styles

Auto layout and constraints

Components structured in a way that can automatically grow to fill or shrink to fit, and adapt to the size of its contents.

Auto layout and constraints
Figma Tokens Logo

Figma Tokens

Figma Tokens plugin lets you control design tokens that can be used for a whole range of options.

Figma Tokens

A system everyone can work on

With Preline UI you can be sure of easy navigation, proper naming, well-grouped components, explains the guiding principles and strategies used to build and maintain it.

A system everyone can work on

Extendable Beyond Imagination

It’s not just a website Preline UI Figma is capable of building - it can be an app, software, visuals or whatever genius idea you can think of.

Extendable Beyond Imagination

Essential components

From charts to navbars, advanced forms, base components and more.

Accordion

7 components

Alerts

19 components

Avatar

59 components

Badge/Tags

59 components

Blockquotes

59 components

Buttons

59 components

Button Icons

59 components

Devices

59 components

27+ more component categories
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description

and more components...

36

Component categories

From grid layouts to charts, navbars, advanced forms, base components and more.

5,000+

Components and variants

When it comes to Preline UI components and options, there are no limits.

400+

Predefined examples

Hundreds of component examples for all your website needs.

Get started now

Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.

Any Questions?

Answers to the most frequently asked questions.

Is Preline UI Figma Free?

Yes, it's free for both commercial and personal use. You may learn more about the terms on the license page.

Is Preline UI available in Sketch or Adobe XD?

Unfortunately, Preline UI Figma will only be available for Figma.

Can I use it for client projects?

Yes, you absolutely can.

How do I update Figma file with the latest version?

You can learn more here.

Is there a dark mode?

Unfortunately, the dark version is currently unavailable.

Is Preline UI Figma built on the latest Figma features?

Of course! It's built with everything that was announced at Config 2022.

What if I have a question and I need help?

See something that doesn't sound right, or perhaps could be done better? Contact us - we'd love to discuss it with you.

Still have questions? Contact us

Subscribe

Get all the latest Preline updates and news.