Starter Kit to create Design System and Wireframes in Figma logo-figmaCreated with Sketch.

Vide

Loved by people across the globe. Trusted and used by many companies and people.

5.0 icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.
Product Hunt Reviews
5.0 icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.icon / 16x16 / 16-check-circleCreated with Sketch.
Gumroad Reviews
quoteCreated with Sketch.
Is an incredible starting point for your Design System and a great way to start wireframing fast. It's Smart Layout ready.
quoteCreated with Sketch.
Tetrisly's stellar organization and comprehensive construction gave us a serve as a starting point for future design work.

2500+ Components. Thanks to a lot of elements you can create everything.

These are just examples of how you can easily customize Tetrisly to do your own interface. Not included in the package.

2.5k+ Responsive
Symbols
55 Predefined styles
160 Unique Icons
in 3 sizes
14 Component
Categories

General used standards. Learn the best practise of creating the design.

8px grid system 8px grid system

Each element, typography system, icons and spacings are divisible by 4px.

Built by atoms Built by atoms

Atomic design as design methodology, not as organization solution.

Auto Layout Auto Layout

Two variants of components, with and without Auto Layout. You decide which one is better for you.

Layer styles
Layer styles

Change global colors quickly without making any mistakes.

Typography system
Typography system

One typography system which supports multiple breakpoints.

Bases system
Bases system

Components are synced with foundations so every change is global.

DesignCreated with Sketch.
Tetrisly is not only for wireframing.
We’ll give you tested and still improving file organization system which speeds up your workflow and improves skills to create a design system by you and your team.
UX Designers
  • icon / 16x16 / 16-checkCreated with Sketch. Speed up the wireframing process
  • icon / 16x16 / 16-checkCreated with Sketch. Ensure the visual consistency of wireframes
  • icon / 16x16 / 16-checkCreated with Sketch. All changes are global, you don’t have to change all elements locally again and again.
  • icon / 16x16 / 16-checkCreated with Sketch. Collaborate with other UX designers on library development and expansion.
UI Designers
  • icon / 16x16 / 16-checkCreated with Sketch. Create one source of truth for your product
  • icon / 16x16 / 16-checkCreated with Sketch. Just start creating the component library with ideal file organization
  • icon / 16x16 / 16-checkCreated with Sketch. Build the right inheritance structure for design tokens and components based on your needs.
  • icon / 16x16 / 16-checkCreated with Sketch. Better cooperation with other your co-worker.
Design Teams
  • icon / 16x16 / 16-checkCreated with Sketch. Reduce the entry threshold for new designers into the project.
  • icon / 16x16 / 16-checkCreated with Sketch. A fully scalable file organization methodology gives you unlimited possibilities of product development.
  • icon / 16x16 / 16-checkCreated with Sketch. Minimize the number of misunderstandings, mistakes and time-wasting thanks to good organization

Tetrisly is more than UI Kit. Ready for Design. Work at scale.

Product Design Process
Product Design Process

In the purchased package, there are three sketch files: Core Library and two files of use cases that present an exemplary process of product design.

Component ID System
Component ID System

Each component 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.

Work at scale
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.

Tetrisly - Component library for wireframing and Kit for Design System | Product Hunt Embed