NEW
NEW
NEW
Powered by Variables
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 specially designed for Figma. With over 6,000 components, robust documentation, and a companion handbook, you will create world-class designs 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 typography system that quickly adapts to any interface 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 quickly with predefined styles and universal guidelines.
Integrated Dark Mode
Our UI kit includes a consistent dark mode design that helps to eliminate labor work.
Accessible Design
The kit is compliant with WCAG 2.1 guidelines and ensures accessible contrast ratios.
Share & Sync
Includes a .json file with design tokens to share and synchronize global styles.
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.
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.
Interactive Components
Create prototypes faster with interactive UI elements and interactions.
Design Variables
NEW
Create multi-color themes and customize components to any brand easily.
Layout Wrap
NEW
Resize, fit, and fill content using advanced auto layout. Saves time and is stress-free.
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 typography system that quickly adapts to any interface 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 quickly with predefined styles and universal guidelines.
Integrated Dark Mode
Our UI kit includes a consistent dark mode design that helps to eliminate labor work.
Accessible Design
The kit is compliant with WCAG 2.1 guidelines and ensures accessible contrast ratios.
Share & Sync
Includes a .json file with design tokens to share and synchronize global styles.
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.
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.
Interactive Components
If you have any issues, we're here to help. We'll reply within 24hr.
Design Variables
NEW
If you have any issues, we're here to help. We'll reply within 24hr.
Layout Wrap
NEW
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 typography system that quickly adapts to any interface 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 quickly with predefined styles and universal guidelines.
Integrated Dark Mode
Our UI kit includes a consistent dark mode design that helps to eliminate labor work.
Accessible Design
The kit is compliant with WCAG 2.1 guidelines and ensures accessible contrast ratios.
Share & Sync
Includes a .json file with design tokens to share and synchronize global styles.
File Documentation
In-file docs in Figma to help effectively communicate with your team and make better decisions.
On-Demand Access
Immediate access to the latest version of the Frames X file 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.
Interactive Components
Create prototypes faster with interactive UI elements and interactions.
Design Variables
NEW
Create multi-color themes and customize components to any brand easily.
Layout Wrap
NEW
Resize, fit, and fill content using advanced auto layout. Saves time and is stress-free.
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
★★★★★
Create and complete design projects faster— ✔get paid more
Complete design projects faster—
✔get paid more
Frames X provides a smart and efficient system to help you achieve your work faster and more effectively. Frames X is a key to your new superpowers, allowing you to better maintain more projects and more ambitious systems.
Make responsive websites faster with dark mode and mobile version
Design a landing page in less than 2 mins, with dark mode and a mobile version
Make your project stand out with superior design
We implement new features and keep our system current to help you stay ahead of the competition. Frames X is a massive design toolkit that will boost your brand and increase production speed.
Use multiple brand themes easily
Make branding for multiple themes easier — utilize a single source for multiple products and projects.
✔ Easy to rebrand and reuse
✔ Variables powered designs
Use multiple brand themes easily
Make branding for multiple themes easier — utilize a single source for multiple products and projects.
✔ Variables powered designs
✔ Easy to rebrand and reuse
Responsive design at your fingertips
Design with functional assets to build rich and responsive dashboards, websites, and applications
✔ Responsive layouts and templates
✔ Breakpoints for multiple devices
✔ Advanced auto layout
Responsive design at your fingertips
Design with functional assets to build rich and responsive dashboards, websites, and applications
✔ Responsive layouts and templates
✔ Breakpoints for multiple devices
✔ Advanced auto layout
Use multiple brand themes easily
Make branding for multiple themes easier — utilize a single source for multiple products and projects.
✔ Variables powered designs
✔ Easy to rebrand and reuse
Responsive design at your fingertips
Design with functional assets to build rich and responsive dashboards, websites, and applications
✔ Responsive layouts and templates
✔ Breakpoints for multiple devices
✔ Advanced auto layout
Responsive design at your fingertips
Design with functional assets to build rich and responsive dashboards, websites, and applications
✔ Responsive layouts and templates
✔ Breakpoints for multiple devices
✔ Advanced auto layout
Responsive design at your fingertips
Design with functional assets to build rich and responsive dashboards, websites, and applications
✔ Responsive layouts and templates
✔ Breakpoints for multiple devices
✔ Advanced auto layout
Design 10x faster with a top-notch component library
Maximize the impact of your work — use a thoughtful and super smart UI kit to create designs quickly and easily.
✔ Ready in-file documentation
✔ Variants and component properties
✔ Easy to customize and maintain
Design 10x faster with a top-notch component library
Maximize the impact of your work — use a thoughtful and super smart UI kit to create designs quickly and easily.
✔ Variants and component properties
✔ Easy to customize and maintain
✔ Ready in-file documentation
Design 10x faster with a top-notch component library
Maximize the impact of your work — use a thoughtful and super smart UI kit to create designs quickly and easily.
✔ Variants and component properties
✔ Easy to customize and maintain
✔ Ready in-file documentation
Skip making complex designs from scratch
Operate production-ready components, guidelines, and templates to create scalable projects and systems quickly.
✔ Design implementation best practices
✔ Easy to adapt and handoff
✔ Reliable component structure
Skip making complex designs from scratch
Operate production-ready components, guidelines, and templates to create scalable projects and systems quickly.
✔ Design implementation best practices
✔ Reliable component structure
✔ Easy to adapt and handoff
Skip making complex designs from scratch
Operate production-ready components, guidelines, and templates to create scalable projects and systems quickly.
✔ Design implementation best practices
✔ Reliable component structure
✔ Easy to adapt and handoff
Create prototype interaction faster
Use predesigned interactions to create prototypes faster without messing with the noodles.
✔ Interactive playground
✔ Delightful prototype interactions
✔ Multiple states and variants
Create prototype interaction faster
Use predesigned interactions to create prototypes faster without messing with the noodles.
✔ Delightful prototype interactions
✔ Multiple states and variants
✔ Interactive playground
Create prototype interaction faster
Use predesigned interactions to create prototypes faster without messing with the noodles.
✔ Delightful prototype interactions
✔ Multiple states and variants
✔ Interactive playground
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
Access an ever-growing ebook with Figma design best practices
Access an ever-growing ebook with Figma design system best practices
Use, share, and create your projects with a reliable and effective foundation
Dark Mode
Dark Mode
Dark Mode
Frames X is designed to help tailor your Interface to perfection
Frames X is designed to help tailor your Interface to perfection
Frames X is designed as a universal toolkit adaptable to any project
Testimonials
Investing in your Frames X design system was one of the best things I did as a designer.
MT LABS
@MTLABS_
★★★★★
Investing in your Frames X design system was one of the best things I did as a designer.
MT LABS
★★★★★
Investing in your Frames X design system was one of the best things I did as a designer.
MT LABS
@MTLABS_
★★★★★
You've got one of the most comprehensive and detailed design systems I've seen on Figma.
Kevin
@kvncnls
★★★★★
You've got one of the most comprehensive and detailed design systems I've seen on Figma.
Kevin
★★★★★
You've got one of the most comprehensive and detailed design systems I've seen on Figma.
Kevin
@kvncnls
★★★★★
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
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.