Tetrisly Design System Logo

Tetrisly Design System

A customizable design system

Tetrisly is a product I have worked on as a TypeScript developer at VirtusLab. It's a tool that simplifies the process of creating design systems for web applications. It consist of a set of key elements:

  • Token System

    A way of connecting colors, typography, spacing into variables to use in Figma and React

  • Figma File

    A file containing all the components for designers to customize and use in their designs

  • React Library

    A library of components integrated with their figma counterparts.

  • Figma Plugin

    A plugin enabling designers to customize the tokens to their needs and to keep the integration with the React library

What is a design system?

If you don't know what a design system is, check out following resources

What was my role?

  • React Library

    • implementing Figma components
    • integrating with Figma
    • maintaining the library
    • writing tests
    • creating documentation

  • Icon Library

    • creating a library of icons
    • dynamically fetching icons from Figma
    • maintaining the library
    • writing tests
    • publishing to npm

  • Marketing Page

    • creating and maintaing a landing page for the product
    • SEO optimization
    • CI/CD setup
    • writing a technical blog post

  • Demo Application

    • creating a demo application
    • deploying to github pages
    • CI/CD setup

What have I learned from working on Tetrisly?

  • The importance of a design system in a project and how it can speed up the development process
  • Good practices of UX/UI design
  • How to use Figma efficiently
  • How the choice of styling library can impact your product
  • What is the design system
  • How to test complex components in React
  • Plan correct variants of components with an apropriate TypeScript support

Contact me!