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.






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





Colors
Typography
Layout & Grid
Contents





Colors
Typography
Layout & Grid
Contents





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




Dark Mode




Dark Mode




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.