Skip to main content

Figma File

Installation​

Get Tetrisly for Figma​

If you didn't get the Figma file yet, please visit our store and get a license referring to your needs.

Install font​

Our Design System uses Inter font, which is well-crafted for interface design. The font is completely free.

Download Inter from Google fonts ↗

Import Figma file​

  1. Click the Import file tile in the file browser. You can find this in the top section of any file page in the file browser.
  2. Select the previously downloaded Tetrisly File from the dialog window and click Open to start the import process.
  3. Depending on the file size this can take a couple of seconds to import. Click Done to return to the file browser.
  4. Double click on the Tetrisly file in Figma to start working with it.

Finish! You are able to work with Tetrisly for Figma. Be sure to check the "Getting Started" page in Figma, where we put further instructions and tutorials on handling Figma and Tetrisly Design System.

Figma File structure​

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.