Designers Guide

Quick tutorials and tools to improve you as a product designer updated whenever i can 😊

I created this Figma file to make building consistent color systems easier. It’s fully linked with variables, so you can quickly generate and manage palettes based on HSB (Hue, Saturation, Brightness) and HSL (Hue, Saturation, Lightness) models.

This tutorial will help you understand and create color palettes like a pro.

Free figma file available to download.

When building a design system, it’s easy to jump straight into components like buttons, inputs, or cards. But if you want your system to feel consistent, scalable, and easy to maintain, the best place to start is actually text styles — specifically your label styles and their line heights.

This tutorial will help you to start building your components without having regrets later.

When we talk about design systems, we usually think about colors, typography, or components. But one of the most important (and often overlooked) aspects of a design system is accessibility. A truly scalable system isn’t just visually consistent — it’s also usable by everyone, including people with disabilities.

In this tutorial will learn why accessibility matters in a design system and why as a designer is your duty to guide developers to follow these guidelines.

Coming soon: an advanced design system that lets you effortlessly update brand color palettes and mapped variables with precision. Simplify your workflow and eliminate the need for managing endless, extensive color palettes.

Stay tuned!!!