Xela UI kit for Figma & React
1900+ variants of 30 components for Figma. Plus 10 ready-made web app screens. Source code for React included.
1900+ variants of 30 components
Accordions, Alerts, Badges, Breadcrumbs, Buttons, Charts and more
50 templates for mobile & desktop
Web app layouts made with care of usability and attention to details
Toggle between dark & light
We crafted XELA with a purpose to swap between themes without a hassle
Organized, based on auto-layout
App design quickstarterfor startups, indiehackers or busy designers
Preview 2,000+ components
Accordions
Alerts
Avatars
Badges
Breadcrumbs
Buttons
Charts
Checkboxes
Chips
Selection
Dialogs
Color Tokens
Datepickers
Numeric Inputs
Pagination
Radio Buttons
Sliders Range
Rating
Segmented Controls
Sliders
Steps
Switches
Tables
Tabs
Text Inputs
Textareas
Toasts
Tooltips
Typography
Preview 50+ templates
Analytics
Analytics
Analytics
Checkout
Checkout
Checkout
Data Table
Data Table
Ecommerce
Ecommerce
Ecommerce
Search Results
Search Results
Search Results
Mailbox
Mailbox
Mailbox
Media
Segmented Controls
Media
Social
Social
Social
Task Manager
Task Manager
Task Manager
Toasts
Project Manager
Get started⚡
Xela UI kit for Figma
Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.
Xela Design & Code bundle
Grab this 5-in-1 design & code bundle with Figma, React, Flutter, SwiftUI & Jetpack Compose components included and 150+ pre-coded screens (all with sources).
Xela for React
10 ready-made web app screens with 39 blocks based on 30 fully coded React components. Source code for React included.
Xela for Flutter
36 ready-made app screens based on 66 widgets. Source code for Android Studio Project, Flutter.
Xela for Android
36 ready-made app screens based on 66 widgets. Source code for Android Studio, Jetpack Compose, min SDK 26, target SDK 30.
Xela for Swift
36 ready-made application screens based on 66 widgets. Source code for Swift 5+, SwiftUI, iOS 13+, Xcode.
Hire us to custom design & code! Let's build together ✊
FAQs
How to start with this design system?
After the successful purchase via Gumroad (it's safe and encrypted) you will be taken to a download page. You will also get the download link in your email (check the SPAM folder sometimes). Then just simply drag and drop .FIG file onto your Figma app. Do not drop it onto the project. Drop it over the starting screen with recent projects grid.
l am new to Figma. Should I try your kits?
Definitely! Our products help customers who learning Figma from scratch. By exploring and studying commercial UI kits you learn how the components and layouts were crafted, which styles being used and which styling tricks have been applied.
How to import your kits?
Importing .FIG files into Figma: https://help.figma.com/hc/en-us/articles/360041003114-Import-files-to-the-file-browser
Which license type should I choose?
You must select the proper license type according to the number of users in Figma if you're purchasing our product for the business.
Business license — for startups or enterprise organizations to use for a local team or publish in Figma library.
Individual license — for freelancers, indie developers, or solopreneurs working on a single project.
Can I build commercial proiects with your products?
Yes! You can build an unlimited amount of commercial projects using Setproduct assets. But, please, consider a license type before making a purchase.
I have a project. Can I hire you?
We're open-minded to your custom design & development projects. We can create complex templates based on our Figma libraries and code them in the production using a wide variety of popular frameworks and technologies.
If you have a project to design & develop, simply contact us describing your brief, budget, and expectations.
I 💜 Your designs, but can I have a discount?
We provide discounts for those, who scrolled to the bottom and revealed our proposal. Just drop us a message with a short story about how you plan to use our product and we will give you a ✨30% off coupon for the upcoming purchase. Please, provide a specific product name you've put your eye on.
