≡En resumen
- Un UI kit son componentes dibujados; una librería de componentes son esos componentes programados.
- Un sistema de diseño incluye ambos, más tokens, reglas de uso y gobernanza.
- Apple, Google y Microsoft publican UI kits oficiales gratuitos para diseñar apps nativas.
- Los kits de terceros van de gratuitos a pagos únicos; revisa licencia, actualizaciones y si tienen versión en código.
- Un kit genérico sin personalizar hace que tu producto se parezca a muchos otros.
01 ¿Qué es un UI kit o user interface kit?
El término viene de la palabra inglesa kit, conjunto de piezas para montar algo. Un buen UI kit no es una colección de imágenes: sus elementos son componentes con variantes (tamaño, estado, tema claro u oscuro) y estilos compartidos, de modo que un cambio en el componente principal se propaga a todas sus copias.
02 UI kit vs librería de componentes vs sistema de diseño
| UI kit | Librería de componentes | Sistema de diseño | |
|---|---|---|---|
| Qué es | Componentes dibujados | Componentes programados | Principios, tokens, componentes, patrones y documentación |
| Dónde vive | Figma, Sketch, Penpot | El código (npm, repositorio) | Diseño, código y documentación a la vez |
| Quién lo usa | Diseño | Desarrollo | Todo el equipo de producto |
| Incluye reglas de uso | Poco o nada | Documentación técnica | Sí: cuándo y cómo usar cada pieza |
| Ejemplo | Material 3 Design Kit en Figma | MUI, Angular Material | Material Design de Google |
El UI kit es la mitad visual; la librería de componentes es la mitad en código. Cuando ambas comparten nombres, variantes y design tokens, y se documentan juntas con sus reglas, se tiene un sistema de diseño. Muchas empresas empiezan con un kit y evolucionan hacia el sistema cuando el producto crece.
03 Qué incluye un buen UI kit
Fundamentos
Paleta de color, estilos de texto, retícula, espaciados, sombras y radios, idealmente como variables.
Componentes
Botones, campos, casillas, selectores, menús, pestañas, tarjetas, tablas, modales y avisos.
Variantes y estados
Tamaños, jerarquías, tema claro y oscuro, y estados como foco, error, desactivado o cargando.
Iconos
Un set coherente, en vectorial y con el mismo grosor y retícula.
Plantillas de pantalla
Ejemplos montados: inicio de sesión, panel, ficha, ajustes, proceso de pago.
Documentación
Cómo está organizado, cómo personalizarlo y qué licencia tiene.
04 UI kits oficiales de Apple, Google y Microsoft
| Kit | Editor | Formato | Para qué |
|---|---|---|---|
| iOS 27 e iPadOS 27 UI Kit | Apple (Apple Design Resources) | Figma y Sketch | Apps nativas para iPhone y iPad |
| macOS 27, watchOS 26 y visionOS 26 UI Kits | Apple | Figma y Sketch | Mac, Apple Watch y Vision Pro |
| Material 3 Design Kit | Google (equipo de Material Design) | Figma Community | Android y web con Material Design 3 |
| Fluent 2 UI kits | Microsoft | Figma | Web, Windows, iOS y Android con Fluent 2 |
Estos kits reflejan las guías oficiales de cada plataforma, así que son la mejor base si diseñas una app que debe sentirse nativa. Las reglas que hay detrás de cada componente están en sus guías de interfaz de usuario, que conviene leer junto al kit.
05 UI kits gratis y de pago: qué cambia
| Tipo | Ejemplos | Ventajas | A vigilar |
|---|---|---|---|
| Oficial de plataforma | Apple, Material 3, Fluent 2 | Gratis, fiel a la plataforma, actualizado con cada versión | Estética de sistema, poco distintiva |
| Comunitario gratuito | Archivos de Figma Community | Gratis y variado | Calidad desigual, mantenimiento incierto, licencia CC BY 4.0 que pide citar al autor |
| Freemium | Untitled UI (versión gratuita y PRO de pago único) | Pruebas antes de pagar; algunos incluyen versión en código | Qué componentes quedan solo en la versión de pago |
| De pago asociado a código | Tailwind Plus | Diseño y código alineados | Dependencia de una tecnología concreta, como Tailwind CSS |
| Ligado a un framework | Kits de Bootstrap para Figma | Encaja con proyectos ya hechos en ese framework | Aspecto muy reconocible si no se personaliza |
La lógica es parecida a la de las plantillas web: un kit, como un framework como Bootstrap o una plantilla, te da velocidad a cambio de parecerte a otros. Pasa lo mismo con las plantillas de WordPress gratis y de pago: el ahorro real depende de cuánto tengas que cambiar después.
06 Cómo elegir un UI kit para tu proyecto
- ✓Compatible con tu herramienta (Figma, Sketch, Penpot) y construido con componentes, variantes y variables.
- ✓Coherente con la tecnología de desarrollo: si hay versión en código o encaja con tu librería de componentes, mejor.
- ✓Cubre lo que necesitas: tablas de datos, formularios complejos, gráficos, tema oscuro.
- ✓Accesible de partida: contrastes suficientes, estados de foco visibles y tamaños de toque adecuados.
- ✓Licencia clara para uso comercial y para proyectos de clientes.
- ✓Actualizaciones recientes y un responsable identificable.
- ✓Fácil de personalizar con tu marca sin romper los componentes.
Una app de iOS para una clínica parte del kit oficial de Apple. Un panel interno de gestión, programado en React, se apoya en un kit freemium que tiene su versión en código. La web de una marca de moda, con identidad muy marcada, usa un kit solo como punto de partida para la estructura y crea sus propios componentes desde el primer mes.
07 Crear tu propio UI kit
-
1
Audita lo que ya existe
Captura todos los botones, campos y tarjetas de tu producto y detecta variantes duplicadas.
-
2
Define variables
Colores, tipografías, espacios y radios con nombre, que después se convertirán en design tokens.
-
3
Construye los componentes base
Empieza por los más usados: botón, campo de texto, selector, tarjeta y aviso, con todos sus estados.
-
4
Monta pantallas reales
Prueba el kit rediseñando tres pantallas del producto; lo que no encaje, se corrige ahora.
-
5
Publícalo como biblioteca
Compártelo con el equipo y conecta los componentes con su versión en código.
En appyweb creamos el UI kit de cada proyecto como parte del diseño de interfaces web UI y UX, y lo trasladamos a código en proyectos de diseño web a medida, para que la web o la app no dependa de un kit genérico.
Preguntas frecuentes sobre User interface kit
Es una colección de componentes de interfaz ya diseñados, como botones, campos, iconos o menús, en una herramienta como Figma o Sketch, para montar pantallas sin empezar de cero.
El UI kit son los componentes dibujados. El sistema de diseño añade el código, los design tokens, los patrones, las reglas de uso y la documentación.
Los oficiales están en Apple Design Resources, en el Material 3 Design Kit de Figma Community y en la web de Fluent 2. Figma Community tiene además miles de kits gratuitos de terceros.
Depende de su licencia. Los archivos gratuitos de Figma Community usan CC BY 4.0, que permite el uso comercial citando al autor; en los demás, revisa la licencia de cada kit.
Varía mucho: hay kits con pago único y otros incluidos en suscripciones. Por ejemplo, Untitled UI anuncia en su web su versión PRO para Figma desde 129 dólares en pago único (septiembre de 2026).
Para prototipos, apps nativas y paneles internos, un kit ahorra mucho tiempo. Para productos con marca propia fuerte, conviene usarlo solo como base y construir componentes propios.
El wireframe kit trae bloques en baja fidelidad, en gris y sin estilo, para definir estructura; el UI kit trae componentes en alta fidelidad, con color, tipografía y estados, para diseñar la interfaz final.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗