Your design asset will help someone speed up their work and you will get rewarded for it

Your design resource probably could help someone speed up their work and you will get rewarded for it

Inspiration

Published on

September 25, 2019

|

3 mins read

Blog

How to create UI kit - Design system to sell worldwide

Navigation

Subscribe to newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

By subscribing you agree to with our Privacy Policy.

Share this post

Roman Kamushken

Introduction

<span class="blog_big-paragraph">Any designer has the opportunity to earn on their own design product these days. Icons, illustrations, website and app templates can be turned into a digital product and sold worldwide. Your craft will help someone speed up their work and they will pay for it. Someone else can buy to see how it's done. The third can fill in their resource with your design solutions.</span>

Your product can take off and get to the top, or can turn out to be useless to anyone. But it is worth trying to do it at least for the sake of pumping skills, working with sales, a chance to give up office work or work for a customer.

And I'm going to tell you about a step-by-step plan to create a commercial design system. You'll learn how to make and market your product. I'll tell you what to do before you start, how to prepare and make a plan.I'll consider the stages of the Figma design system development. I'll give you advice on how to promote and hype it up in the last part.

{{spacer-64}}

Who buys it and why

Designers, developers, managers and business owners buy design systems not to draw all the little things from scratch, but to immediately start building layouts from finished parts. The approach to screen design has changed and requires fine-tuning of each component. Styles, constraints, naming, grid and general architecture in the design system needs to be ordered, which requires time.

You can't just open Sketch, XD or Figma and start making templates. You always start with a blank screen and work requires basic elements: buttons, lists, cards, etc. Where could all of this be taken from? Well, you can either create all the components yourself, debug and test them, losing a month, or buy something ready-made.

{{spacer-64}}

{{setproduct-gpt}}

{{spacer-64}}

Why to issue a design asset

This should be done to develop professional skills and opportunities to improve the financial situation. This is a more exciting job, because you come up with the tasks yourself. If you do what you like, you are already motivated enough.

You have the opportunity to sell your components to other designers and organisations from around the world. You will receive flattering feedback from satisfied customers, so you will have to make your best UI. Creating a design product is interesting and exciting, but you'll need to invest time.

Material Design System 3 for Figma
Impressive presentation is a good method to promote your product

{{spacer-64}}

A kind of design assets

  • Icons set
  • Illustrations set
  • Prototyping set
  • Website templates
  • App templates
  • Presentations
  • Fonts
  • Design-systems, UI kits, etc.

Flexible design product is of the greatest value for the customer. It certainly contains a lot of options, states, sizes of the elements used. Therefore, you will have to try hard and take into account everything, develop a system, and then double-check everything carefully. Competition in the market of ready-made resources for Figma is not so visible, but it exists, and so you'll have to use all the experience and make a product of the highest quality.

You can deepen your future design system in any of the themes, especially if you have already worked with it: Ecommerce, Cryptocurrency, Social, Project management, etc. You can assign a higher price for a more niche product and then gradually reduce it if there is no result. But it's more difficult to sell a product in a narrow specialisation, as fewer people need it. But when such a buyer is found, they can pay $200 or more for an individual license. I recommend to develop a system on the selected theme, but be sure to show how easy it is converted into another one.

Navigation UI design components
Providing more variants and use cases - your key to attract a potential customer

{{spacer-64}}

The time is your only bet

Your only investment is time. But it will be returned to you with experience anyways. Solving those design tasks that you are interested in, you will raise the quality of your portfolio to a new level. I've tested it myself. And I try to see myself objectively.

So, with a favourable outcome, you'll get your first sale and a very cool feeling. Someone's found your handiwork useful and paid for a copy. You`'l lose the desire to sleep, your head will be full of further plans for your product development. But before the first sale, no one will pay you for the time spent, as when working for a customer. There is always a risk that what is done will be useless. I also failed the first time. Therefore, you need to accept the fact that you may not earn anything, but will get pumped in any case.

{{spacer-64}}

You improve your portfolio

If sales haven't taken off, it's not the end, in any case, you'll be proud to attach this work to your portfolio. You've qualitatively for yourself and are not in a hurry to put the made design product aside. For example, it can be reused and developed in a fictional case. If you've made a mistake and drawn another Food Delivery UI kit, like many beginners, you can come up with and describe the process as if this work is done for the customer and how you approached it. Based on this story, you can write on Medium, and scatter cool graphics in Dribble and Instagram. You may get valuable feedback and new subscribers. You should always re-use your own graphics to improve your portfolio and create an audience.

I've mentioned above that I didn't succeed the first time, but six months later I made a turn and started to research more before the second attempt. Research is an important stage before the start and I want to dwell on it. Analysing patterns and popular products deeper, I managed to achieve successful experience in the sales of Figma design libraries, so I'll talk about the creation of design templates made of components or "design system".

iOS app design templates
Take a look at this Figma freebie - iOS datepicker template

{{spacer-64}}

Have a plan before you start

Self-organisation, discipline and the role of a personal project manager are important components to get things done. If you try to create a design system in the evenings, after the main work in the office, you need to be effective and have time to do a lot.

We have families, children and domestic affairs. Such an emergency can easily knock out of balance and you need to have a comfortable plan of action. There will be three main stages - research, creation and promotion of the product. You need to expand each stage and make a separate list of steps for each stage. Today we'll draw up a research plan.

{{spacer-64}}

Starting your product

Pick a design tool (and a market)

The tool selection for the future design system is the choice of the market where you will work. I prefer Figma, you may prefer to work in XD, for example. It is important that the tool is growing and has its audience. If someone is already selling in this market - that's great, reuse their ideas by skipping through a look at your product. If you are the first, there is a reason to be wary.

For example, the design market is not visible around the Invision Studio missing from the radar, and it exists around the rare Axure. It's just much smaller than the Sketch market. And this one is so huge that it is full of templates and UI kits, so the average price for a copy is lower. All these factors need to be weighed before choosing a direction. But first, go to the popular tool, if you haven't done this before and start to gradually learn what products similar to yours can be bought.

{{spacer-24}}

Pick a topic

The theme of the design product must be defined for it to acquire a specification. For example, with this system, you can prototype in the material design style, and this fresh library contains more rounded shapes and is made in a different style. These are two design systems, but each one has its own purpose. And the market is waiting for more new themes, so feel free to come up with them.

Get ready to use all your experience for the topic in which you are best versed. So it will be easier to find those people who your knowledge will help to solve their design problems. Then you'll only have to tell the future buyer from what area your product is and that it can be used to build. These may be charts, admin dashboards, financial templates and the like. At the very beginning, it is necessary to determine the direction and stick to this course during development.

Figma material design for android apps
Material Design System - still powerful and the hugest UI library for Figma

{{spacer-24}}

Pick UI guidelines

Users buy the product design because they like the exterior, among other things. But if you miss with the style, they won't buy. So, it's important to monitor how the design of services, social networks, web applications changes - this will help you to make the actual UI. For example, after the Twitter redesign, rounded buttons are back in fashion. And Pinterest has long been in this style as well.

So it makes sense to follow their example, then someone might think "Oh! This design is in the new Twitter style. I'm taking it!". Dark themes have also become popular, you can't ignore that. Trends change quickly and design products become obsolete, so UI should be done in the form that is popular today. If you have no idea about style - research.

{{spacer-24}}

Pick what to include

You will need to draw a lot of sections with simple components: buttons, tabs, dialogs, calendars, chips, and so on for a complete design system. You'll have to provide the whole set, which you can only come up with.

Wanna know a secret? There are no new components in the world, it's the only UI that changes. Any dashboard is basically the same buttons, lists and tables. So you can go for ideas on these resources: Mobbin.Design, Webframe.xyz, Nicelydone.club and make a moodboard of the components that you need for a start. After a few intensive studies, you'll have an extensive list, where there will be everything - all the components that you will need to organise and redraw in your style.

{{spacer-24}}

How many templates to craft

The more versatile your templates are, the higher the chance to interest a potential buyer. Think about how to make a flexible design system, where there are many ready-made solutions. Consider all the options and states, because developers can ask questions: do the buttons change at onHover, what does the active input look like and so on. So you need to take into account the components' states in the future system.

Pick the patterns that are most common in life for your starting version: Tables, Navigation, Profile, Settings, and so on. Almost any application can be assembled from these basic parts. Therefore, when you give a lot of popular templates to choose from - it makes the design product more functional.

Mobile templates with search results
Mobile templates with search results - S8 design system

{{spacer-24}}

Use all available resources

The global design space is full of a variety of templates that can be profitably reused. Start to get used to effective work - why redrawing something that has been done a hundred times and is available for free with the authors` consent. At least you have to find a set of good icons, a design system is defective without them. Or look for those that are allowed to create commercial products. Only make sure if the license allows resale. Respect the authors, because now you are the author yourself! For a good presentation, you need devices mockups, and they are at Figma freebies. Look for interesting free things and think about how to use them in your product: Google fonts, devices mockups, vector patterns and etc.

{{spacer-24}}

Make a moodboard

Research popular design resources and put interesting screens into a separate project. Over time, it will become a moodboard where you will peep a particular element or verify that you adhere to the selected style. For example, you decide to make a system for mobile apps and you need a lot of ideas on this topic. Start with Pinterest, there is the smartest picture search and the opportunity to collect native moodboards. Then develop a plan to create a UI set in a certain style. Delve into the financial product design if you want to create a more niche design system. Explore the top applications in this field. Make a moodboard from the collected screenshots and get started.

Material design moodboard in Figma
An example of Material Design moodboard

{{spacer-24}}

Ready to start

You can safely start work with the detailed plan, but don't exhaust yourself if there is a need to retreat from the plan. This is your guideline, not your law book. It is important not to become a perfectionist until the first sale has happened and to spend your time effectively.

Routine is inevitable in this process, so change the order in the points of the plan. In the next part we will make a plan for a design system development in Figma.

{{spacer-24}}

{{stars-conclusion}}

{{spacer-24}}

We've found out that every designer should try to create their own design product. You'll either get boosted, or earn and get boosted. But you'll need to invest your own time. Are you ready to spend evenings out of the office for your own project? Or spend your days knowing you won't get paid for this job right away, if at all?

Share this post

Subscribe to Setproduct

Once per week we send a newsletter with new releases, freebies and blog publications
Oops! Something went wrong while submitting the form.

By clicking Sign Up you're confirming that you agree with our Terms and Conditions.

Congratulations!

You're in! Expect awesome updates in your inbox

Related posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Inspiration

6 mins read

Monetizing the design: what I learned after a year of non-stop UI grinding

Discover 15 key insights for successful digital products, from a UI designer who took matters into his own hands to create innovative designs for everyone.

Inspiration

2 mins read

Buttons UI design - Figma to React styled components

Enhance Material Design components for improved performance, usability, and visual appeal. Get our expert retouching services for your web design needs.

Inspiration

6 mins read

8 designers and developers bootstrapped a side project to success

Discover the inspiring stories of 8 Twitter designers and developers who bootstrapped their side projects to success. Learn how they found success and gain valuable insights .

Figma Templates & UI kits

Save time and human resources by reusing hundreds of pre-made templates crafted by us. Based on top notch UX taken from the World's best apps.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Panda Design System

Figma library with dashboard, calendar, kanban, profile, table, ecommerce and 80+ templates in total. Components with variants, dark theme included.

Eclipse UI kit

Figma library with 1100+ components & 74 templates for data-driven web applications. Powered by auto-layout. Supercharged by Figma's variants.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Neolex Dashboard UI kit

Customizable & adjustable dashboard design system with 50+ ready-to-use app layouts, 1900+ variants for 30 components with auto-layout.

Material Desktop Dashboard UI kit

Figma library with 48+ dashboard templates based on reusable desktop app patterns carefully handpicked from the most popular web apps.

Xela UI kit for Figma

Figma library with 1900+ variants of 30 components categories to craft perfectly shaped desktop & mobile apps. Customizable & Adjustable dashboard design system with 50+ web app templates.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

OE Figma Design System

Customizable and well-organized Figma library. This design system aimed to build highly loaded interfaces, boost the speed and save more costs.

Figma iOS kit

Figma library of iOS patterns served as ready-made templates. This UI kit inspired by World's best apps. Based on Human Interface guidelines.

Figma S8 Design System

Figma design library for mobile and desktop apps made of high quality styled components. Full version includes 67 dashboard templates.

Most iOS UI kit for Figma

iOS native components and app templates organized into a «Most Design System» fully compatible with Apple's Human Interface guidelines.

Rome UI kit for Figma

Customizable and well-organized team library. Contains 250+ components & 30 web app templates powered by stylish and trendy guidelines.

Material Design System

Figma library is based on 100% guidelines compliance with Material.io. Contains ready‑to-use templates to accelerate app UI design.

Nucleus UI

Nucleus UI contains 1000 components and variants with 500+ mobile screens designed for Figma (including 9 themes from Event, E-commerce, Finance, NFT, etc.).

Figma Android UI kit

Components-driven Android mobile UI library for Figma. Consists of 140 high quality application templates made of total 250+ UI components.

Mobile X UI kit

Customizable & adjustable iOS / Android design system loaded with ready-made 157 app templates based on 860+ variants for 20 components.

Appka iOS UI kit

Customizable & adjustable iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts crafted for Figma.

Full iOS UI kit

Customizable iOS design system with 320 ready-to-use app layouts. You can modify them or use as it is to save time and never design from scratch again.

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Figma Charts UI kit

Components-driven graphs design kit for dashboards, presentations, infographics & data visualisation. Includes 25+ charts types for all the viewports.

Hyper Charts

Create impressive visuals with Figma's graphs templates – dozens of scalable and customizable data visualization blocks for dark and light modes.

Orion UI kit

Figma library with 40+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Figma React UI kit

Designed and well-organized in Figma React-based UI toolkit for the web. Optimized for building complex data-dense interfaces for desktop and mobile applications.

Material X for Figma

Figma library with 1100+ components & 40 app templates beyond Material Design. Powered by top-notch shapes and Manrope font. Customizable & Adjustable UI kit now available for Angular & Figma

Xela for Flutter

XelaUI for Flutter is a simple, modular and accessible component library that gives you the building Flutter apps for mobile and desktop.

Xela for Android

Ready-made collection of fully customizable widgets, UI screens and reusable components for Android coded with Jetpack Compose.

Xela for Swift

Designed for iOS Developers. We provide fully coded customizable components, widgets and well-organized iOS screens for Figma & SwiftUI.

Material You UI kit

Figma & React library with 2600+ variants of 32 components compatible with Material Design 3. Plus 220+ dashboard templates for all the viewports. Now available for NextJS & TailwindCSS.

Xela for React

React based components library for beautiful user interface in React apps. Lightweight library for your projects. Contains pre-made web app templates.

Levitate 3D kit for Figma

Components-driven 3D kit to design eye-catching Figma presentations. Helps to enhance your landing page, product or app, brand ident, etc.

Website templates UI kit

Landing pages reusable templates kit based on most effective web design patterns. 140+ dark & light constrained design blocks.

Figma Landing Pages UI kit

Landing pages templates library based on constrained & organized components aimed to speed-up the production of effective websites.

Zeus UI kit

Create hassle-free landing pages in Figma. This kit is based on 10 landing page templates, powered by 1600+ variants for 630+ web blocks.

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.

Start now

SetGPT is a free service; however, authentication is required

This is some text inside of a div block.
This is some text inside of a div block.