Tetrisly — Component Library for wireframing and Starter Kit for Design System

Tetrisly
Tetrisly
Nov 19 · 8 min read

Tetrisly is a result of several months’ search for the perfect structure to organize a library with interface elements during our work on design systems that we create for digital products.

Is it a Design System?

No! It’s a component library which is one of the elements of a design system. We can see a huge trend in this area, but many people misunderstand the term “design system”.

Design system is a set of principles, standards, tools (e.g., component library, code repository, documentation) and processes that help product teams, quickly and easily, implement, test and develop a product or a group of products. It ensures visual and useful consistency of each product separately and all together. The goal of design system is not only visual and code consistency but also the consistency of the message, language, tone and experiences.

As a part of Tetrisly project, we’ve prepared a component library (.sketch) that is an initial step in creating a complete system. After that, we are going to prepare a Vue/React component library with Storybook and full technical documentation for it.


Why we’ve created it?

For a couple of years, we used to use the methodology of Atomic Design in our everyday design process. The methodology is a big breakthrough, and it surely changed the approach to designing digital products. However, after working with Atomic Design on different design cases for a fair amount of time, we noticed its shortcomings.

We hope that the delivered methodology created by us will meet most of the requirements resulting from your design team’s needs.


Stakeholders

  • Speed up the wireframing process thanks to the huge library of ready-to-use and flexible components.
  • Ensure the visual consistency of wireframes created inside your organization.
  • All changes are global, you don’t have to change all elements locally again and again.
  • Increase the number of components by collaborating with other UX designers on library development and expansion.
  • Provide clean and well-organized production files for your development team. No more mess and disorganization.
  • Don’t waste your time inventing ideal file organization, just start creating the component library.
  • Create one source of truth for your product
  • Build the right inheritance structure for design tokens and components based on your needs, the number of products or supported platforms (for example, a separate file contains foundations for all products, separate files or one in common with components of each product/platform). Inheriting depends on your needs.
  • Do you work with many designers in one product? Don’t wonder where to look for the right component added by your co-worker.
  • Reduce the entry threshold for new designers into the project thanks to good organization and file structure.
  • A fully scalable file organization methodology gives you unlimited possibilities of product development.
  • Minimize the number of misunderstandings, mistakes and time-wasting thanks to good organization

Structure

The structure can be different and it depends on the kind of project, how many platforms you have or how many products you will prepare. We prepared a file containing three sizes of components that you can use to create desktop and mobile versions of your product. Our structure is presented in the diagram below.

As you can see, we’ve created three separate files:

  1. Tetrisly-CORE, it’s the main file. There are components and foundations (typography, colors, icons and add-ons — measuring, notes, etc.)
  2. Tetrisly-UIKIT it’s an important file for us designers. There are reusable patterns, ready to use with measuring and documentation (notes for designers or developers how to use them).
  3. Tetrisly-VIEWS, we keep finished views with accurate data there. Inside, we prepare instances e.g., footers, installation steps or gallery sections for repeated views.

As a first step, you will be working with the views of products. After each phase of creating the views (Tetrisly-VIEWS), you will decide if a given component will be used once as a unique component of a product (one-off component), or if it will go to the core library (Tetrisly-CORE).

After that, we advise you to add the whole pattern (e.g., a sidebar) to the sticker sheet (Tetrisly-UIKIT). Doing that will improve the workflow of the whole team: there will be fewer misunderstandings and mistakes among teammates, and the product will be more coherent. Moreover, it will be possible to show the interaction of each component in the context of the whole pattern.

Creating the UI Kit and adding patterns to it will prevent the core library from getting too big and complex. It will also decrease the risk of adding one-off components to that library.

Tetrisly-UIKIT.sketch
Tetrisly-VIEWS.sketch

Ready for work at scale

Tetrisly is ready for scaling the structure and supporting multiplatform products. Create new inheriting libraries of a product or split the Core Library fundamentals depending on your needs.

More about how to use Tetrisly at scale we will describe in the next article.


ID system

The whole structure of components is based on Atomic Design methodology, but the components are grouped by their function instead of by their complexity. It will definitely make it easier to identify and improve the workflow. To navigate around the structure even more easily, we created an ID system.

We decided to create a special component identification system so that each element has its own unique ID number. The system gives easier access to a specific element in the entire file structure and allows for making references to it in the documentation. It is an invaluable profit for both designers and developers.


Typography

The current state of Tetrisly’s typography is the result of our experience coming from numerous projects in which we have taken part. The structure of text styles is created in a way that the last variable of the style path is its scale name. By “scale” we mean a set of properties such as font size, font weight and line-height. When combined with a color and alignment, they create a proper text style. The path of each text style looks like this:

[Number] Align / [Number] Type / [Number] Scale Name
(We need the number to sort the list of style properly)

A couple of examples:

01 Left / 01 Primary / 01 H900

01 Left / 01 Primary / 02 H800

01 Left / 01 Primary / 03 H700

01 Left / 01 Primary / 04 H600

We know from our experience that the most frequent change done in text is connected with its size. “Make the font bigger” — Have you ever heard that? Our structure of typography allows you to switch among typo scales very quickly (thanks to Appearance Dropdown). That is why changing the size based on a predefined list of styles is very easy.

Tetrisly contains three sizes of components, which allows you to create projects for mobile and desktop. As a consequence of introducing three sizes, there is a global typography supporting each size. Thanks to that, we didn’t have to create a separate set of typography for desktop and mobile apps. A wide variety of styles will meet all requirements of each of these platforms.

There are cases in which it is recommended to create additional sets of typography if it is required by a product or platform (iOS, Android, Web, etc.). Making a decision to create such additional text styles depends on the context and needs of a project.

414 text symbols. Primary, Secondary, Disabled, Contrast Secondary, Contrast Disabled, Link, Warning, Success, Alert, Actions

Layer styles

Manage the layer styles (fill, stroke, and shadows) of all elements in one place. The module allows you to change global colors quickly without making any mistakes. Simple and well-suited style naming.


Components bases

The most important thing in Tetrisly is a base for each of the components. All components bases are made of one layer or a combination of a layer with a layer style.

The style of fill, stroke, and shadow. An important thing in this solution is the ability to reduce a large number of changes when you want, for instance, to shift the primary color — every fill with the primary color will be changed instantly in every base.


Icons

We’ve prepared a unique set of icons in three sizes — 24px, 20px, 16px. That gives you control of the visual balance aspect with three size elements. As you can see below, each icon has a special view and that gives you a full control of pixel-perfect icons without reducing their size artificially.


Addons

In our daily work, we use the add-ons that help us avoid making mistakes. Also, they help us give pieces of information about the project to another designer, or we simply keep them for ourselves (so we don’t forget about them). We’ve included measuring and notes symbols in the structure of Tetrisly.


Roadmap

  1. Component library for Sketch — Done
  2. Component library for Figma — Spring 2020
  3. React / Vue Components — Winter 2020

Authors

Lead UI/UX Designer with over 10-year experience

Senior UI Designer with over 5-year experience

Tetrisly

Start wireframing faster or use our Starter Kit to create Design System www.tetrisly.com

Tetrisly

Written by

Tetrisly

Start Wireframing faster or use our Starter Kit to create Design System www.tetrisly.com

Tetrisly

Tetrisly

Start wireframing faster or use our Starter Kit to create Design System www.tetrisly.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade