Microinterações que não parecem demo
Por que a maioria dos pequenos momentos que desenhamos no Figma não sobrevive ao handoff para o código, e o que muda quando você mesmo escreve o easing.
Microinteractions that don’t feel like a demo
Why most of the micro-moments we design in Figma don't survive the handoff to code, and what changes when you write the easing yourself.
Microinteractions that don’t feel like a demo
Why most of the micro-moments we design in Figma don't survive the handoff to code, and what changes when you write the easing yourself.
Toda microinteração bonita no Figma passa por um funil antes de chegar ao navegador: o handoff. Ali, o easing vira "ease-in-out", a duração vira "300ms" e o momento que fazia sentido vira só mais um efeito.
Esta nota é sobre o que mudei no meu processo para que o detalhe sobreviva.
Escrever o easing
Quando passei a escrever a curva eu mesmo, cubic-bezier(.76, 0, .24, 1) em vez de "suave", a conversa com o dev mudou. Deixou de ser gosto e passou a ser um valor.
- Uma curva por intenção (entrar, sair, responder).
- A saída sempre espelha a entrada.
- Nada se move sem motivo.
Se o detalhe não tem nome, ele não sobrevive ao handoff.
Caderno de processo
Every beautiful microinteraction in Figma passes through a funnel before it reaches the browser: the handoff. There, the easing becomes "ease-in-out", the duration becomes "300ms", and the moment that made sense becomes just another effect.
This note is about what I changed in my process so the detail survives.
Write the easing
When I started writing the curve myself, cubic-bezier(.76, 0, .24, 1) instead of "smooth", the conversation with developers changed. It stopped being about taste and became a value.
- One curve per intention (enter, exit, respond).
- The exit always mirrors the entry.
- Nothing moves without a reason.
If a detail has no name, it doesn't survive the handoff.
Process notebook
Every beautiful microinteraction in Figma passes through a funnel before it reaches the browser: the handoff. There, the easing becomes "ease-in-out", the duration becomes "300ms", and the moment that made sense becomes just another effect.
This note is about what I changed in my process so the detail survives.
Write the easing
When I started writing the curve myself, cubic-bezier(.76, 0, .24, 1) instead of "smooth", the conversation with developers changed. It stopped being about taste and became a value.
- One curve per intention (enter, exit, respond).
- The exit always mirrors the entry.
- Nothing moves without a reason.
If a detail has no name, it doesn't survive the handoff.
Process notebook