'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Movimiento que explica qué cambió
Cada animación en Alea es un patrón con nombre hecho con unos pocos tokens de curva y duración. Muestra de dónde vienen las cosas y a dónde van, y se hace a un lado con movimiento reducido.
Tokens
Una curva y una duración
Elige una curva y una duración de los tokens. La curva se dibuja con sus números reales; el punto y la píldora la reproducen.
--alea-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --alea-motion-duration-base: 320ms;Patrones
Pruébalos
Algunos de los patrones con nombre, en vivo. Cada uno tiene una función, y la misma función siempre se mueve igual.
Glide
glideUn indicador por grupo se mueve al nuevo elemento y toma su tamaño, con un leve rebote. Ves a dónde fue la selección.
Morph
morphUn ícono pasa a su otro estado en lugar de cambiarse de golpe: los chevrons giran, los checks aparecen, la hamburguesa se vuelve un ícono de cerrar, los switches rebotan.
Swap
swapEl texto o un ícono cambia con un breve fundido con desenfoque, así notas la palabra nueva sin un salto.
Roll
rollLos dígitos ruedan hasta el nuevo número, así un cambio de valor se lee como un cambio, no como un parpadeo.
Éxito
successEl estado ocupado se convierte en un check que se dibuja solo, y luego vuelve a la etiqueta.
- TokensMovimientoFigma
Dissolve
dissolveLo que se quita se desenfoca, se encoge y se desvanece antes de irse, así ves qué se fue.
Modos
Un interruptor para toda la app
Expresivo para productos con espacio para respirar, productivo para herramientas densas, reducido para desvanecer sin desplazar, apagado para detenerlo todo. Reducido sigue la configuración del sistema por defecto.
Pasa el mouse
Efectos
Para los momentos que lo merecen
Vidrio, haces de luz, inclinación, destellos, marquesinas y más. Úsalos donde suman encanto, nunca donde la gente está trabajando.
Una luz alrededor de la tarjeta destacada
Se inclina hacia el puntero
Algo nuevo
Presets
Catorce formas de entrar y salir
Cada capa acepta un preset de movimiento. Abre cada uno para verlo.
En Figma
Prototipos que se mueven como el producto
Los componentes del kit de Figma son interactivos: hover, presionar y clic pasan entre variantes con Smart Animate en la misma curva ease-out, así un prototipo se siente como el producto real.
Preguntas
Bueno saberlo
En esta sección
Leer más
- Sistema de motionLas curvas y duraciones detrás de cada transición, y cómo se maneja el movimiento reducido.
- Componentes de movimientoLa prop motion en cada overlay, y los componentes pequeños detrás de los patrones: swap, roll, reveal, dissolve, resize, stream y progreso de scroll.
- MorphMorphing de elemento compartido: dale a dos elementos el mismo id y, cuando uno reemplaza al otro, el nuevo crece desde el viejo, en posición, tamaño y esquinas, con su contenido apareciendo gradualmente. Una tarjeta se abre en su detalle, un botón se vuelve un panel. MorphIcon transforma un ícono en otro.
- EfectosCada componente de efecto, con sus notas de accesibilidad y cómo se comporta con movimiento reducido.