Autor
Verificado
Creador de EmviUI · Senior UX/UI & Web Designer en CQMRewards
Diseñador de producto y web con más de 10 años de experiencia en el sector digital. Experto en Figma, prototipado de alta fidelidad, tokens de diseño y arquitecturas frontend con Tailwind CSS. Creador de EmviUI (kit de diseño con más de 10,000 componentes optimizados para producción y modo oscuro), UImand y Vitamin Bootstrap.
Guías prácticas, arquitecturas de tokens y benchmarks técnicos
Diseña una sección por qué elegirnos con Tailwind CSS: beneficios, enlaces de evidencia y tarjetas adaptables. Incluye una muestra real de EmviUI.
Aplica un kit UI de login para Figma con etiquetas, estados de envío, recuperación y revisión móvil. Incluye una pantalla real de EmviUI y pruebas útiles.
Aprende a crear variables de espaciado en Figma, vincular padding y gap, comprobar cambios y recuperar vínculos con un ejemplo práctico de tarjeta.
Elige el tamaño de fuente en Tailwind CSS y su interlineado con ejemplos de interfaz, pruebas de ampliación, redistribución y espaciado personal.
Para crear variables de sombra en Figma, utiliza variables numéricas en los campos de efecto compatibles y una variable de color para la sombra. Vincúlalas a una sombra paralela y guarda el tratamiento completo como estilo de efecto. Comprueba después la elevación sobre las
Para usar Tailwind CSS en React con Vite, añade el plugin de Tailwind para Vite, importa Tailwind en la hoja CSS y carga esa hoja desde la aplicación. Comprueba primero una utilidad estática visible; después revisa las variantes y la compilación de producción. Utiliza i
Los ajustes de exportación de Figma funcionan mejor cuando defines primero el destino: recurso, formato, dimensiones y nombre del archivo. Después revisa lo exportado donde se utilizará. Una ficha de entrega permite separar las ilustraciones de la interfaz funcional. Ex
Las clases de color de Tailwind CSS actúan sobre propiedades distintas: text-* colorea el texto, bg-* la superficie y border-* el borde. Elige la combinación completa, define los estados de interacción y comprueba el resultado renderizado. El número de un tono no es una
Usa Tailwind CSS flex para distribuir controles a lo largo de un eje y decidir qué elemento crece, cuál conserva el tamaño de su contenido y qué ocurre cuando falta espacio. En una barra adaptable de búsqueda y acciones, empieza apilando los grupos, deja que el buscador
Crea variables de cadena y número compatibles, vincula las propiedades de texto y prueba unos pocos roles reutilizables con contenido real antes de compartir la receta.