Free

Foundation

Kit

for

Figma

Basic text, color styles and components to get started right away on your projects

Color Styles

Color Styles

Input Field

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

hint text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

hint text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

error text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John

+4 others

Input

Suffix

.com

hint text goes here

Input Field

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

hint text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

hint text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

error text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John

+4 others

Input

Suffix

.com

hint text goes here

Primary Button

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Primary Button

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Focus On What Matters

Start from a base on color, text and basic components and save time

Consistent Color Styles

Basic primary, monochromatic and state colors to get started right away. No bloat.

5 Color Styles

11 Tokens per style

LCH Color Scheme

Consistent Text Styles

Flexible text styles for mobile applications, web applications and websites

6 Heading Styles

6 Paragraph Styles

3 Weights

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Call to Action

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

hint text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

hint text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John Doe

+4 others

Input

Suffix

.com

error text goes here

Label

(optional)

*

https://

Prefix

Placeholder

Jane Doe

John

+4 others

Input

Suffix

.com

hint text goes here

Basic Components

Basic reusable, styled component to get you started right away

Input Fields

Icons

Buttons

Take It a Step Further

For a more comprehensive solution, check out our PRO access that cover everything

Free Foundation Kit

Foundation Kit

Pro Access

Text & Color Styles

Components

3 Basic Components

18 Components

Layouts/Sections

15 Section Types

Access to Figma UI Kit & Design System

Figma UI Kit & Design System

Access to Framer UI Kit & Design System

Framer UI Kit & Design System

Access to Framer Code Component & Upgrades

Access to Framer Templates

Access to Framer AI Code Generator

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say