Sketch Tutorials

Making Profit from a Design System

How to make use of design system perks to create a UI kit for sale

Hey, I would like to share my experience on the process of creating a digital product for UI marketplaces, briefly describe the main development stages and showcase Sketch hacks that could provide you a significant time saver while creating a decent resource for sale.

Intro

Over the past few years, the complexity and time-consuming costs of creating a UI kit or an Inspirational kit have significantly decreased. The market of design tools is rapidly growing and bringing a lot of new features to the game, like Symbols, Design Systems, Plugins and many other handy tools that can be used in various combinations to overcome design limitations and help you automate the routine.

I like to think of this challenge as a possibility for design experts and enthusiasts to record an album at home using only fruity loops to get a certain profit in cash or social equivalent. 🎤

Creating anything good in a UX/UI world always required to clearly understand the problem you are trying to solve with your deeds or a product, this means you still need to do a good-old research first to compare existing design trends with your skills, weigh everything and choose a niche you see the potential or have expertise before making the first move.

Web, Mobile, Dashboard, a thematically travel UI kit is only up to you and your creative brain, be sure to have a simple yet unique conception that a user can quickly understand, value and measure.

Take your time, there are many tools besides Sketch that are worth trying and have a good market potential, like Figma, Studio or Framer, select the one you good with or want to master.

Right now Sketch alone provide built-in design systems that could be being used in producing smaller UI kits, Plaster Design System is the one you can use for this exact purpose, be sure to check it and try.

Contents guide:

  1. Visual style — Create and use a style guide.
  2. Components — Power up workflow with symbols.
  3. Designing — Don’t stop digging…⛏️
  4. Packaging — Polishing the product.
  5. Launching Promo materials and submit.

Visual style

Start by creating a new file and choose the primary colors, and the font you wanted to test on the battlefield, try to visualize the image of the final product while playing with different styling options. To cope successfully, you will need to design a checkpoint, a place of truth where you can keep all of the UI kit styles to quickly manage them and tune.

Providing a style guide along with the final product not only will greatly improve its user experience but also will help to quickly test different ideas while building it. ☝️
Plaster for Sketch Get started page is used to control both Shared Style and Symbols.

Here are some useful tips to help you create your one or set up a new document in minutes:

Styles + Symbols template

To quickly generate a consistent style guide, use the following combo:

  • First, create a simple grid of layers with styles you want to include, and set proper names for them, e.g. “Color / Primary / Blue“.
  • Select all the layers you want to generate multiple shared styles from, and use Sketch Styles Generator.
  • Then use Batch Create Symbols to let you generate multiple symbols from same layer names, see how it works:
Tip: Naming rules is only your preference, be sure to make the one you are comfortable to work with.

This trick let you create a design system template in just a few seconds, with both symbols and styles having a consistent menu structure built into your workspace.

Typography

To create a typography use free Google fonts, and select a limited set of sizes or use a pair of different fonts to create a cool looking type style. To quickly setup the typography, download and use this file 👉 Text Style Template.

  • Open it, select all layers, and choose a new font to update all styles.
  • Use Sketch Style Master to change “Arial” into the font name of your choice. (You can also modify or rename labels aka H1,H2 etc).
  • Export styles with Shared text style plugin, and import them into a new document to start using them immediately.
Tip: Merge Sketch windows into tabs to quickly surf different documents. 🏄
Be sure to always provide a free access to the fonts needed in order to use your product.

Set grid

To design a consistent product besides unified styles, you will need a grid, to place your elements and form layouts, I have prepared this .sketch file containing a responsive grid template to help you define you product screen constrains, download it here 👉 Responsive Grid Template.

To ease your work with grids while pasting elements on it, use:

  • Copy Paste Guides plugin, to quickly set a new layout, by copying and pasting existing guides into a new document.
Tip: CNTRL + SHIFT + C / CTRL + SHIFT + V
  • Use CTRL+R to quickly ON/OFF ruler guides, hold SHIFT while ON to measure the pixel distance and snap elements to guides.
  • To preview multiple layout grids at once, use Grid Master plugin.
Remember to keep your work attractive, yet possible for developers to code into a real projects, this means your layouts and components must always stay as much as possible to the real specs implementation and fit common screen sizes.

Components

Once done with styles, use them to paint 2–3 artboards to get confident in your choice. Then switch to defining the most basic components, like buttons, inputs, and checkboxes etc. Build a minimal set of symbols to recreate a popular app screen or a website page you like.

Your kit will basically represent a certain number of compositions built with these components, that why it’s very important to have a clear understanding of value you are trying to produce with your assets to the final user. 🍱

Use symbols primitives to build your components, and give them the needed styling options by placing one symbol into another. When doing it, try to find a healthy balance between customization and overrides usability, to always distribute simple yet functional symbols that are easy to reuse.

Tip: Keep the overrides easy to read, nobody got time to get into your emoji analogies.

Make every repetitive element into symbol to allow you focus more on product-specific tasks and less trying to maintain consistency manually across the kit, here are few handy tips to help you distribute better symbols:

  • Determine the ordering rule, for example: Plaster follows a simple naming convention — nested symbols are displayed in the order from the left to the right in the overdrive menu, the first place in the component is always given priority to the text field, or the most commonly used one, e.g.
  • Group all components into categories, to put all primitive style symbols into a separate “Style” category to not overwhelm the symbols menu with Color, Overlay or Text symbols.
Tip: Use numerical order to give your symbol menu a predictable structure.
  • Use multiple instances of a single symbol to demonstrate diverse usage of your product. Keep them organized by creating a separate “State” category for multifunctional components.
Tip: Use “_” symbol to put categories on the top of the menu list.
  • 🔒 Lock unused symbols from appearing in the override menu to save your time while navigating the right panel.
  • Use Symbol Organizer to group your symbols page in a comfortable to work with way.

Design

This stage is the most time-consuming, mostly because it requires you to make several approaches to design numerous compositions. The number of compositions or screens you need to create depends on the value you want your kit to deliver or use cases to cover.

Good kits always have a large number of variative blueprints to be used for creating different categories of websites and applications, to determine your kit structure it’s handy to have a roadmap, or a simple list of sections or categories you plan to design with your components.

The most important thing here is to keep the focus on your product and to design calmly, it’s recommended to divide this process into sprints to produce better results. Decide what number of components or templates you can generate after each sprint, and constantly improve your results. 🏃💨

There is no particular trick here, just patience. Still, you can find this tools to be useful for automating repetitive routine:

  • Nudge.it — Use for repetitive pushing and nudging objects according to the selected grid increment.
  • Duplicator— For repetitive object duplication in a specific direction, use it create galleries and item grids layouts.
  • Logo drop — To easily get most logos within Sketch workspace, and eliminate the need for going to a new browser tab.
  • Fast Text Transfer — Helps to quick fast copy and paste text from one existing layer to another, making it very useful when you need to populate multiple layouts with some dummy text.
  • Content Generator— for generating dummy text, pics, and much more, without leaving Sketch window.

While making use of all these plugins, I bet you will need some inspiration along the way. To stay up to date with latest design trends, you may find the use of following websites, like land-book.com, pages.xyz or mobbin.design. (or just google UI patterns).

Packaging

It could feel great arriving this far, once done with all the contents, take a break, and come back for polishing and fixing things up before approaching the marketplace.

  • Correctly name all groups, symbols and layers. Try to make them clear to understand and consistent for other people to work with.
  • Do not use either lorem or ipsum, make all of your dummy text closer as much as it possible to the context of blueprint you are crafting, e.g.

Launching

Before approaching the market be sure to always check your work on a virtual or a physical device screen, to ensure compatibility, and once you have finished polishing everything and can feel proud of your work, go jump to a text editor and write down why you find it so great, come up with good letters and words to describe the concept and bring it down to a presentation or a promo page of your product. ✍️

Learn how to effectively make an impact on the customer using both your visual style, words, and the product you have made. Here are some useful tools to help you create cool presentation or promo materials:

  • Artboard Framer— Huge win, it lets you put a device image symbol behind your artboard, making it’s simply the best way to create portrait or landscape mockups.
  • Sketch IsometricSuper useful for making perspective views from artboards and shapes.
  • GGradientMakes super easy to generate basic gradients styles from selected layer color.
  • Icon flowerHelpful for creating beautiful backgrounds from icons and basic shapes using phyllotaxis arrangement.
  • Looper— Transform basic shapes into cool geometric illustrations by rotating, scaling and duplicating layers.

The resulting materials is possible to use on any marketplace of your choice, go for the one that best suits your product and submit. For the UI specified items, I can recommend UI8, Creative Market or Envato for making your first appearance due to its friendly and growing communities.

While making your first launch try to make a good first impression of your product, always be honest with your customers and provide additional support for a quick start, make a guide or a freebie file to explain the product.

Summary

Using the vast possibilities of the growing design industry, you can create amazing things in a relatively short time by just using other people code and mastering a few tools, use all the tricks you discovered at your personal advance, and win this challenge. 🎉

If you are looking for a confident design companion to help you build your UI kit, go try Plaster for a mobile design toolkit

and, Frames for creating Web / Desktop UI designs.

Before you leave:

  • Download freebies:
Like what you read? Give Bunin Dmitriy a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.