The Ultimate UI Kit &
Design Handbook for Figma

The Ultimate UI Kit &
Design Handbook for Figma

The Ultimate UI Kit &
Design Handbook for Figma

Frames X is an easy-to-use, well-documented, and supported design system that includes a complete eBook. With Frames X, you will create robust interfaces and UI systems while staying on top of the best design practices.

Frames X is a design system plus an eBook to streamline your design workflow and help save thousands of working hours.

Frames X
Figma UI Design System
Frames X
Figma UI Design System
Frames X
Figma UI Design System
Frames X — Design Handbook & UI Kit for Figma
Frames X — Design Handbook & UI Kit for Figma
Frames X — Design Handbook & UI Kit for Figma

The only Figma ❖ source you'll ever need

With over a decade of experience using, maintaining, and implementing design systems for small and large businesses. We've built Frames X — the most extensive UI/UX kit explicitly designed for Figma. With over 6,000 components, robust documentation, and a companion handbook, you will create world-class products and systems.

Design Handbook

Online book with guides to help you create better systems and learn design best practices.

Robust Components

An extensive UI kit with over 6,000 consistent components to build your project faster.

Web Templates

A set of perfectly designed blocks and layouts to build your website or application quicker.

Chart Templates

Versatile chart components to help you build dashboards and presentations faster.

Variants & Properties

Functionality-first assets with complete control over your project's UI customization.

Auto Layout Ready

100% resizable components to save you time on routine tasks and adopt best practices daily.

Color System

A practical multi-brand color system to help build and customize your project efficiently.

Typography System

A designed typography system to quickly adapt to any interface size or device, making it highly scalable.

Grid & Spacing

Bulletproof layouts and grid styles to build your project and brand consistently.

Global Styles

Customize your project easily with predefined styles to create designs for multiple projects or brands.

Integrated Dark Mode

Our UI features a consistent dark mode design that can help lower your design expenses.

Accessible Design

Compliance with WCAG 2.1 guidelines and ensures accessible contrast ratios.

Design Tokens

The package comes with a .json file that enables quick customization with the Design Tokens plugin.

File Documentation

In-file docs in Figma to help effectively communicate with your team and make better decisions.

On-Demand Access

Gain immediate access to the newest version of Frames X through a secure private server link.

MIT-licensed Icons

Includes Remix icon library, company logos, country flags, and payment icons.

Lifetime Updates

Our product constantly grows and comes with free updates and improvements for life.

Personal Support

If you have any issues, we're here to help. We'll reply to your email promptly within 24 hours.

Design Handbook

Online book with guides to help you create better systems and learn design best practices.

Robust Components

An extensive UI kit with over 6,000 consistent components to build your project faster.

Web Templates

A set of perfectly designed blocks and layouts to build your website or application quicker.

Chart Templates

Versatile chart components to help you build dashboards and presentations faster.

Variants & Properties

Functionality-first assets with complete control over your project's UI customization.

Auto Layout Ready

100% resizable components to save you time on routine tasks and adopt best practices daily.

Color System

A practical multi-brand color system to smoothly scale your project.

Typography System

A designed typography system to quickly adapt to any interface size or device, making it highly scalable.

Grid & Spacing

Bulletproof layouts and grid styles to build your project and brand consistently.

Global Styles

Customize your project easily with predefined styles to create designs for multiple projects or brands.

Integrated Dark Mode

Our UI features a consistent dark mode design that can help lower your design expenses.

Accessible Design

Compliance with WCAG 2.1 guidelines and ensures accessible contrast ratios.

Design Tokens

The package comes with a .json file that enables quick customization with the Design Tokens plugin.

File Documentation

In Figma docs to help better communicate with your team and share decisions.

On-Demand Access

Gain immediate access to the newest version of Frames X through a secure private server link.

MIT-licensed Icons

Includes Remix icon library, company logos, country flags, and payment icons.

Lifetime Updates

Our product constantly grows and comes with free updates and improvements for life.

Personal Support

If you have any issues, we're here to help. We'll reply within 24hr.

Design Handbook

Online book with guides to help you create better systems and learn design best practices.

Robust Components

An extensive UI kit with over 6,000 consistent components to build your project faster.

Web Templates

A set of perfectly designed blocks and layouts to build your website or application quicker.

Chart Templates

Versatile chart components to help you build dashboards and presentations faster.

Variants & Properties

Functionality-first assets with complete control over your project's UI customization.

Auto Layout Ready

100% resizable components to save you time on routine tasks and adopt best practices daily.

Color System

A practical multi-brand color system to help build and customize your project efficiently.

Typography System

A designed typography system to quickly adapt to any interface size or device, making it highly scalable.

Grid & Spacing

Bulletproof layouts and grid styles to build your project and brand consistently.

Global Styles

Customize your project easily with predefined styles to create designs for multiple projects or brands.

Integrated Dark Mode

Our UI features a consistent dark mode design that can help lower your design expenses.

Accessible Design

Compliance with WCAG 2.1 guidelines and ensures accessible contrast ratios.

Design Tokens

The package comes with a .json file that enables quick customization with the Design Tokens plugin.

File Documentation

In-file docs in Figma to help effectively communicate with your team and make better decisions.

On-Demand Access

Gain immediate access to the newest version of Frames X through a secure private server link.

MIT-licensed Icons

Includes Remix icon library, company logos, country flags, and payment icons.

Lifetime Updates

Our product constantly grows and comes with free updates and improvements for life.

Personal Support

If you have any issues, we're here to help. We'll reply to your email promptly within 24 hours.

Frames X streamlined my component design process by skipping the redundant work and jumping straight to problem-solving. The huge level of detail and consistency built into reusable elements with the latest Figma features like variants and auto layout has changed the game for me.

Satbir Arora

@SatbirArora

★★★★★

Frames X streamlined my component design process by skipping the redundant work and jumping straight to problem-solving. The huge level of detail and consistency built into reusable elements with the latest Figma features like variants and auto layout has changed the game for me.

Satbir Arora

★★★★★

Frames X streamlined my component design process by skipping the redundant work and jumping straight to problem-solving. The huge level of detail and consistency built into reusable elements with the latest Figma features like variants and auto layout has changed the game for me.

Satbir Arora

@SatbirArora

★★★★★

Complete design projects faster— ✔get paid more

Complete design projects faster—
✔get paid more

Complete design projects faster—
✔get paid more

With Frames X, you'll get access to perfectly designed elements to help you create web designs faster. Frames X is a key to your new superpowers, allowing you to better maintain more projects and more ambitious systems.

Design your next project
in a better way

Design your next project in the better way

We implement new features and keep our system up to date to help you stay ahead of the competition. Frames X is our top-tier priority and in-house design productivity toolkit.

Create complex layouts with ease

Use next-level dashboard & website templates to build rich and responsive designs quickly.

✔ Responsive templates

✔ Advanced auto layout

✔ Multiple breakpoints

Create complex layouts with ease

Use next-level dashboard & website templates to build rich and responsive designs quickly.

✔ Responsive templates

✔ Advanced auto layout

✔ Multiple breakpoints

Create complex layouts with ease

Use next-level dashboard & website templates to build rich and responsive designs quickly.

✔ Responsive templates

✔ Advanced auto layout

✔ Multiple breakpoints

Unlock the power of efficient design

Use our thoughtfully crafted UI kit to create flexible and easy-to-handoff designs faster.

✔ In-file documentation

✔ Variants & nested instances

✔ Multi-brand color theme

Unlock the power of efficient design

Use thoughtfully crafted assets to let you create flexible, easy-to-handoff designs faster.

✔ In-file documentation

✔ Nested instances

✔ Multi-brand color theme

Unlock the power of efficient design

Use our thoughtfully crafted UI kit to create flexible and easy-to-handoff designs faster.

✔ In-file documentation

✔ Variants & nested instances

✔ Multi-brand color theme

Boost your design and save time

Use production-ready components and properties to create robust designs for your team and clients.

✔ Easy to maintain structure

✔ Component properties

✔ Lighting-fast customization

Next-level Figma components

Use production-ready components and properties to create robust designs for your team or clients.

✔ Component properties

✔ Maintainable layer structure

✔ Multiple states

Next-level Figma components

Use production-ready components and properties to create robust designs for your team or clients.

✔ Component properties

✔ Maintainable layer structure

✔ Multiple states

Create prototype interaction faster

Save time creating prototypes with our interactive components without messing with the noodles.

✔ Interactive playground

✔ Delightful prototype interactions

✔ Multiple states

Create prototype interaction faster

Save time creating prototypes with our interactive components without messing with the noodles.

✔ Simple & delightful interactions

✔ Interactive playground

✔ Multiple states

Create prototype interaction faster

Save time creating prototypes with our interactive components without messing with the noodles.

✔ Delightful prototype interactions

✔ Interactive playground

✔ Multiple states

Level up ⬆ and learn to create your design system

Frames X will guide you to make aesthetically pleasing and functional interfaces with your favorite design tool and hundreds of tips to level up your color, grid, typography, and other core design skills.

Colors

Typography

Layout & Grid

Contents

Design Handbook for Figma
UI design with Figma
Color system for Figma
Typography style in Figma
Grid & layout in Figma

Colors

Typography

Layout & Grid

Contents

Design Handbook for Figma
UI design with Figma
Color system for Figma
Typography style in Figma
Grid & layout in Figma

Colors

Typography

Layout & Grid

Contents

Design Handbook for Figma
UI design with Figma
Color system for Figma
Typography style in Figma
Grid & layout in Figma

Use, share, and create your projects with a reliable and effective foundation

Use, share, and create your projects with a reliable and effective foundation

Testimonials

Frames X is a full-fledged design system with well-thought-out design guidelines and ready-made components. You can see a huge amount of work and effort. Every aspect is cool and high quality.

Gleb Sabirzyanov

@gleb_sexy

★★★★★

Frames X is a full-fledged design system with well-thought-out design guidelines and ready-made components. You can see a huge amount of work and effort. Every aspect is cool and high quality.

Gleb Sabirzyanov

★★★★★

Frames X is a full-fledged design system with well-thought-out design guidelines and ready-made components. You can see a huge amount of work and effort. Every aspect is cool and high quality.

Gleb Sabirzyanov

@gleb_sexy

★★★★★

I find working with Frames X to be versatile yet not bloated. Frames X enables me to develop high-quality modern UI for my designs quickly and also serves as inspiration for crafting my own.

Lars Johannessen

@ElTheSen

★★★★★

I find working with Frames X to be versatile yet not bloated. Frames X enables me to develop high-quality modern UI for my designs quickly and also serves as inspiration for crafting my own.

Lars Johannessen

★★★★★

I find working with Frames X to be versatile yet not bloated. Frames X enables me to develop high-quality modern UI for my designs quickly and also serves as inspiration for crafting my own.

Lars Johannessen

@ElTheSen

★★★★★

Love how well structured the UI Kit is and detailed the handbook it's lots of helpful stuff and tips. Thank you so much for putting it all together, would continue to read and use it.

Òlòlàdé Bello

@ OloladeBello_

★★★★★

Love how well structured the UI Kit is and detailed the handbook it's lots of helpful stuff and tips. Thank you so much for putting it all together, would continue to read and use it.

Òlòlàdé Bello

★★★★★

Love how well structured the UI Kit is and detailed the handbook it's lots of helpful stuff and tips. Thank you so much for putting it all together, would continue to read and use it.

Òlòlàdé Bello

@ OloladeBello_

★★★★★

This is a great tool for any designer. Frames X contains a lot of convenient components that are easy for any user to interact with, whether you are a beginner or an advanced user.

Figma Hunt 🏹

@FigmaHunt

★★★★★

This is a great tool for any designer. Frames X contains a lot of convenient components that are easy for any user to interact with, whether you are a beginner or an advanced user.

Figma Hunt 🏹

★★★★★

This is a great tool for any designer. Frames X contains a lot of convenient components that are easy for any user to interact with, whether you are a beginner or an advanced user.

Figma Hunt 🏹

@FigmaHunt

★★★★★

If you haven't bought it yet, Frames X is one of the best systems for crafting products and learning about Figma Crafting.

Adrian

@ supereservao

★★★★★

If you haven't bought it yet, Frames X is one of the best systems for crafting products and learning about Figma Crafting.

Adrian

★★★★★

If you haven't bought it yet, Frames X is one of the best systems for crafting products and learning about Figma Crafting.

Adrian

@ supereservao

★★★★★

I want to say thank you for making Frames X Design System for my favorite tool—Figma. Just bought it and LOVE it!

Karolina Beck

★★★★★

I want to say thank you for making Frames X Design System for my favorite tool—Figma. Just bought it and LOVE it!

Karolina Beck

★★★★★

I want to say thank you for making Frames X Design System for my favorite tool—Figma. Just bought it and LOVE it!

Karolina Beck

★★★★★

As a graphic designer, it was exciting for me to dive into design systems. I found the book practical in helping me to create accessible and good-looking interfaces.

Mariya Kiryukhina

@KiryuhinaMariya

★★★★★

As a graphic designer, it was exciting for me to dive into design systems. I found the book practical in helping me to create accessible and good-looking interfaces.

Mariya Kiryukhina

★★★★★

As a graphic designer, it was exciting for me to dive into design systems. I found the book practical in helping me to create accessible and good-looking interfaces.

Mariya Kiryukhina

@KiryuhinaMariya

★★★★★

Incredible UI library and product. I love how you made sure all components are correctly built, well done.

Amitay Gilboao

@GilboaAmitay

★★★★★

Incredible UI library and product. I love how you made sure all components are correctly built, well done.

Amitay Gilboao

★★★★★

Incredible UI library and product. I love how you made sure all components are correctly built, well done.

Amitay Gilboao

@GilboaAmitay

★★★★★

⟣ Pay once—use unlimited times ⟢

Simple pricing

⟣ Pay once—use unlimited times ⟢

Simple pricing

Solo

$

109

A single license. Perfect for freelance designers or developers.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Team

$

199

259

A team license for up to 6 users. For agencies and small organizations.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Save 30%

Unlimited

$

559

A license for unlimited users. For enterprises and larger organizations.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Solo

$

109

A single license. Perfect for freelance designers or developers.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Team

$

199

259

A team license for up to 6 users. For agencies and small organizations.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Save 30%

Unlimited

$

559

A license for unlimited users. For enterprises and larger organizations.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Solo

$

109

A single license. Perfect for freelance designers or developers.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Team

$

199

259

A team license for up to 6 users. For agencies and small organizations.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

Save 30%

Unlimited

$

559

A license for unlimited users. For enterprises and larger organizations.

✔ Design Handbook

Education, processes, & Figma best practices

✔ Figma UI Kit

Multi-brand design system

✔ Components

6K+ production ready assets

✔ Templates

Advanced design boilerplates

✔ Style Tokens

Fast & easy customization

✔ Lifetime Updates

Free updates & components

✔ Premium Support

Reply from us within 24hrs

One-time payment, 256-bit TLS secured.

*We offer a 50% discount for Students and Educators

Contact us for more details

*We offer a 50% discount for Students and Educators

Contact us for more details

Popular questions

Why do I need this?

A good UI kit is like a rare item in a video game, and Frames X is like a super-secret-rare item. It will save you time and money, teach you new things about interface design, and increase your productivity.

Why do I need this?

A good UI kit is like a rare item in a video game, and Frames X is like a super-secret-rare item. It will save you time and money, teach you new things about interface design, and increase your productivity.

So, is it an eBook or a UI kit

It's both. It’s what sets Frames X apart from other design system products on the market. We believe that to truly master something, you need a combination of structured theory and practical examples, and that's exactly what Frames X provides -- access to learning materials that will help you understand the underlying principles and best practices of design, as well as practical examples that you can use as a foundation for your own designs.

So, is it an eBook or a UI kit

It's both. It’s what sets Frames X apart from other design system products on the market. We believe that to truly master something, you need a combination of structured theory and practical examples, and that's exactly what Frames X provides -- access to learning materials that will help you understand the underlying principles and best practices of design, as well as practical examples that you can use as a foundation for your own designs.

Do I need to be a pro with Figma?

No, you don't need to. If you are a complete newbie and want to dive into UI design, Frames X is the perfect starting point to learn all the basics of designing modern and functional interfaces from scratch.

Do I need to be a pro with Figma?

No, you don't need to. If you are a complete newbie and want to dive into UI design, Frames X is the perfect starting point to learn all the basics of designing modern and functional interfaces from scratch.

Will my team/company be able to use and benefit from this?

Yes, Frames X can be used by any team or company, regardless of size or industry. Whether you are a small startup or a large enterprise, Frames X can help you design better and more efficiently. It provides learning materials and practical examples to help designers master the art of design, and it streamlines the design process to save time and increase productivity.

Will my team/company be able to use and benefit from this?

Yes, Frames X can be used by any team or company, regardless of size or industry. Whether you are a small startup or a large enterprise, Frames X can help you design better and more efficiently. It provides learning materials and practical examples to help designers master the art of design, and it streamlines the design process to save time and increase productivity.

Can I use Frames X for commercial projects?

Absolutely, whether you're building a business website, app, or any other type of project, Frames X is a great resource to help you create professional-grade designs and you can use it for commercial projects. You can also use it to create unlimited designs for clients and charge them for your services. You’re not permitted to resell it as another product. Please be sure to review our License Agreement.

Can I use Frames X for commercial projects?

Absolutely, whether you're building a business website, app, or any other type of project, Frames X is a great resource to help you create professional-grade designs and you can use it for commercial projects. You can also use it to create unlimited designs for clients and charge them for your services. You’re not permitted to resell it as another product. Please be sure to review our License Agreement.