Figma File
Below, we have described the content of each page of our Figma file.
Getting Started
Your overview starts with this page. Here you can find some basic information about Tetrisly. We also added additional Resources with links to Figma’s Articles to help you navigate through Fimga easier.
Content Table
Cheatsheet with links to components created in Tetrisly Design System.
Thumbnail
A cover for this file. You can customize it for your needs and preferences.
Color Palette
Page with the whole color palette, which is a foundation for creating any interface in our Design System. It contains 16 colors with personalized shades for each of them.
Color Tokens
We define Color Tokens based on their role in the interface. Color Token is a semantic representation of the color that helps understand how or when the token should be used. It helps to limit design decisions and place them in specific contexts.
Elevations
Set of shadows (Stroked and Unstroked) used for differentiation of components visual hierarchy across the whole product. Elevations (shadows) allow you to add depth and realism to designs by positioning elements on a z-axis.
Icons
We worked with many icon libraries in terms of creating digital products and providing the best experience for users. Our experience led us here! A clean, consistent, and pixel-perfect icon set (20x20, 1.5px) crafted specifically for modern UI design.
Typography
Used typography in Tetrisly Design System separates into font-size and font-weight.
Components list
Each page contains a specific component with all of its variants and documentation.
Internal Components (For File Organization)
On this page, you can see components that help with documentation and created presentations in the whole file. You are able to change the logo to make your design system more individualized.