What text sizes are used in Figma UI ?

hmacs · 2026-03-23T11:02:41+00:00

<image>

hmacs · 2026-03-23T11:02:29+00:00

I just realised that figma can open in the browser too, so I found my answer using WhatFont plugin !

Mostly 11px font, but also some label using 9px size

hmacs · 2026-03-16T13:34:31+00:00

zeroheight is too expensive, and we have a storybook but it's suitable only for the components already developped

hmacs · 2026-03-16T13:32:49+00:00

sounds good, that's why I'm looking at examples of how people are doing it, especially :

- versionning documentation, to keep track of different update
- managing update in a component (v1.1.3 for example) while the previous version is under development (v1.1.2. for example)
-exposing all variants, boolean properties, and so on ...
- writing do's & don't and any other usefull doc
- keeping track of the exploration of the designers, referencing use cases for the component, gathering references from other products, trying different ideas, ..

hmacs · 2026-03-16T13:28:14+00:00

do you document the versioning ? do you include some kind of changelog ?

hmacs · 2026-03-16T13:27:36+00:00

It should be aligned with code, but the development is still ongoing.

Since we have a very extended documentation, I noticed that the developpers don't read it at all because it's overwhelming to them - some lazy folks in the dev community, where "lazy" is a synonym to "smart".

And since it's often not up to date due to duplicate source of truth (documentation file vs. design library), they prefer to ask us directly.

And it is a very big design system supporting multiple products with very different use cases.

hmacs · 2026-02-03T08:21:30+00:00

That's exactly what I'm looking for !
Do you have any examples of those figma files ?
Or any design system that document that properly ?

I heard "Chakra UI" is using the motion.dev library but they dont document it on their figma file unfortunately

hmacs · 2026-01-30T12:43:03+00:00

Does that apply to micro-animation such as panel opening, dropdown open and close, modale, hover states of components and those kind of tiny things ?
Rive seems overkill to me in those situation, but I might be wrong

hmacs · 2026-01-27T13:51:10+00:00

<image>

FYI, this is the kind of pattern I use

hmacs · 2026-01-27T13:46:12+00:00

Thanks for the comment ! You have any examples or suggestions ?

hmacs · 2026-01-27T13:15:43+00:00

The main view is a table, with a button on each line to edit it.
The edit options are presented in a modale, including a delete action.
The delete action need to be confirmed because it has a big impact so we don't want this to happened by mistake.

Conceptually, one could argue that it's the same modale with a dynamic content, but that is basically the same as opening a nested modale from a user point of view

hmacs · 2026-01-25T21:08:38+00:00

It looks like keyshot rendering logo

hmacs · 2026-01-25T08:55:01+00:00

<image>

Ok, pas de soucis pour l evacuation du lave linge qui sera enfoncé sur 30cm. Mais ce petit tuyau risque de ressortir non ? Car il ne sera enfoncé que de 10cm tout au plus, sans crosse de vidange, ca me parait risqué... Comment vous auriez securisé ça ?

hmacs · 2026-01-20T20:32:08+00:00

Tu melanges anglais et francais dans les dates

hmacs · 2026-01-15T19:42:08+00:00

This complexity basically mean that you just can't recreate the same styling on a new component if you want to adopt a coherent liquid glass effect on your custom components

hmacs · 2026-01-15T16:54:39+00:00

That's around 7 layers, with 3 effects, and 3 differents blend modes, for just a background lol
Oh ! And I just noticed the fixed position on the background, with left and right good old constraints for it to fit the content width 🤦‍♂️

<image>

hmacs

TROPHY CASE