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.

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 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.

New Project
Frames X
New Project

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

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

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

New Project
Figma UI components
Figma assets panel
Figma Component Properties
Figma code inspect

Dark Mode

New Project
Figma UI components
Figma assets panel
Figma Component Properties
Figma code inspect

Dark Mode

Frames X
Figma UI components
Figma assets panel
Figma Component Properties
Figma code inspect

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.