©2025 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de desarrollo de UI Kit
Cómo crear un design kit con componentes de interfaz gráfica con su sitio de documentación
Material disponible
Un UI Kit es un conjunto de herramientas y recursos que permiten construir interfaces de usuario en proyectos de una manera más rápida, sencilla y consistente. Nos ofrecen materiales como componentes listos para el uso, herramientas para crear estilos y layouts, etc.
A lo largo de los años muchos UI Kit se han vuelto populares, con diferentes enfoques como Bootstrap, Tailwind, Materialize, etc. En EscuelaIT tenemos cursos que enseñan a manejarlos, por lo que los puedes conocer bastante a fondo. Pero ¿nunca has pensado en crear tu propio UI Kit? puede ser una tarea muy productiva tanto si eres una empresa como si eres un profesional, ya que os ayudará en el desarrollo de vuestros proyectos y, si lo publicas como software libre, puede aportar mucha visibilidad.
Este curso te ofrece todo lo que necesitas para crear tu propio UI Kit, desde un punto de vista multidisciplinar, abordando tanto la parte del diseño como la del desarrollo. Además con el conocimiento que vas a adquirir en el curso podrás publicarlo como software libre, en npm y con su sitio de documentación, aprendiendo a usar herramientas que te podrán aportar valor en muchos otros escenarios, como Figma o los Static Site Generators..
Qué aprenderé en el Curso de desarrollo de UI Kit
Objetivos del curso
Por qué debes aprender desarrollo de UI Kit
Qué tengo que saber
Este curso está pensado tanto para personas con interés en el diseño y/o el desarrollo. Si te interesa solo la parte de diseño no necesitas tener conocimientos especiales porque se irá explicando todo sobre la marcha.
Si te interesa la parte de desarrollo se espera que los estudiantes tengan un conocimiento esencial de los lenguajes de publicación frontend para la web: HTML, CSS y Javascript.
Clases y contenidos
Diseño gráfico del UI Kit
Comenzamos el curso del desarrollo de un UI Kit con unas primeras clases dedicadas a la concepción gráfica del kit de interfaces de usuario. Para ello abordaremos el diseño de los componentes mediante Figma, pero también explicaremos cómo definir y organizar los token de diseño para conseguir un resultado consistente y con aspecto profesional, entrando prácticamente en el terreno de los sistemas de diseño.
- Qué es un UI Kit.
- Por qué desarrollar un UI Kit.
- Cuáles son las ventajas que puedes conseguir si desarrollas tu propio kit.
- El enfoque que aplicaremos para construirlo.
- Cómo iniciar el proyecto de desarrollo de nuestro UI Kit.
Usando Figma para desarrollar componentes de interfaz gráfica con el enfoque de Atomic Design, donde unos componentes sencillos se usarán para desarrollar otros componentes más complejos.
Desarrollo de los componentes en tecnologías web
En las próximas clases vamos a cambiar de tercio e irnos al mundo del desarrollo, para implementar los componentes con tecnologías web ideales para los UI Kits o sistemas de diseño. En la primera sesión explicaremos las tecnologías necesarias para desarrollar los componentes y veremos un primer ejemplo basado en Web Components nativo, compatible con todos los sitios web y aplicaciones desarrolladas con todos los frameworks. En una segunda etapa seguiremos con Web Components pero apoyándonos en una librería que nos facilite y mejore la experiencia de desarrollo.
Explicar los conceptos necesarios para desarrollar componentes usando HTML, CSS y Javascript. Cómo encapsular los componentes usando el estándar de Web Components. Desarrollar los primeros componentes que se diseñaron en Figma.
Desarrollo de otros componentes de UI diseñados previamente en Figma, en la etapa de diseño.
En este vídeo vamos a ver el paso a paso para el desarrollo de otro de los componentes del curso que no nos dió tiempo a implementar en el vídeo anterior, que es el componente lluvia-card. La clase nos vendrá muy bien para profundizar en el uso de slots en los componentes y los estilos de los componentes, además que nos permitirá encontar puntos de mejora de los componentes que habíamos desarrollado antes, en la medida que los estamos usando en el contexto de la card.
Publicación en npm en un monorepositorio
En este punto estamos ya en disposición de publicar nuestros componentes. Veremos cómo gestionar un monorepositorio donde podremos alojar diversos packages de npm y cómo publicarlos.
Publicar los componentes en GitHub y usar npm para que estén disponibles como software libre para su instalación en cualquier proyecto.
Desarrollo de una biblioteca de iconos
En nuestro UI Kit vamos a usar iconos y para ello nos apoyaremos en una biblioteca de iconos llamada Lucide. Sin embargo, la llevaremos a nuestro terreno, aplicando una nueva manera de consumirlos más actual y versátil, a partir del estándar de Web Components. Con ello podremos usar los iconos con una simple etiqueta y personalizar su aspecto como colores o tamaño con variables CSS, lo que facilitará de manera extraordinaria la implementación de la biblioteca.
Vamos a crear un componente base para implementar los iconos. Usaremos Web Components nativos, sin aplicar ninguna librería Javascript, para reducir al máximo su peso y mejorar la optimización. Los Web Components nos darán facilidad de uso y reutilización sencilla en cualquier contexto donde puedas usar Javascript. Este componente nos servirá para construir cualquier icono, creando nuevas implementaciones que extenderán el componente base y donde simplemente cambiaremos el SVG.
Vamos a optimizar el componente base de los iconos aplicando los estilos CSS mediante constructable stylesheets, lo que nos permitirá una optimización interesante, al tener el CSS una única vez en memoria, aunque usemos muchos componentes de icono en cada página web.
La biblioteca de Lucide tiene más de 1600 iconos. Por supuesto, no vamos a hacer el trabajo de creación de cada componente a mano!! Usaremos un script en Node que procese todos los iconos de la biblioteca, de manera automática, y genere los componentes extendiendo del componente base y redefiniendo el SVG.
Vamos a dedicar unos minutos para implementar mejoras en las opciones de personalización de los iconos, de modo que podamos usarlos de manera más versátil y adaptable a las necesidades más diversas.
La idea de este vídeo es mostrar cómo se publican los iconos en npm, siguiendo las indicaciones explicadas en clases anteriores, y cómo se usan los iconos instalando el correspondiente package.
Ahora que tenemos otros packages en el monorepo podemos sacarle el verdadero partido a Lerna. En este vídeo lo verás. Para ello haremos que los componentes de UI dependan del package de los iconos y publicaremos actualizaciones de los packages de diversos modos, viendo cómo Lerna es capaz de gestionar las versiones de los paquetes por nosotros.
Ahora vamos a ver una mejora de nuestra implementación de la librería de iconos, creando un componente que permite recibir el nombre del icono que se necesita mostrar vía atributo, de modo que podamos aplicar binding, enviando el icono a mostrar que podría estar en una variable. Es algo que nos resultará muy útil en numerosas ocasiones.
Ahora vamos a ver una aplicación de este componente mejorado, mostrando cómo aplicar binding del nombre del icono en una aplicación práctica dentro de nuestro card, lo que potenciará sus posibilidades, haciendo posible la personalización del icono de la tarjeta de una manera extremadamente sencilla.
Diseño del sitio de documentación del UI Kit
Volvemos al terreno del diseño web, mostrando cómo debemos crear la concepción gráfica del UI Kit. Para ello nuestra diseñadora nos explicará cómo diseñar el sitio y nos mostrará el proceso de manera práctica usando Figma.
Comenzamos con el diseño del sitio de la documentación del UI Kit en Figma. Cómo plantear el layout general para asegurar la escalabilidad y un fácil mantenimiento. Cómo conseguir usabilidad y que funcione bien como un manual, respetando la coherencia y la identidad a partir del propio UIKit.
Creación de páginas del proyecto, en modo diseño con Figma, aplicando contenido a la home y las páginas internas con la consistencia de nuestro UI Kit.
Desarrollo del sitio del UI Kit con tecnologías web y un SSG
Ahora nos vamos a centrar en el desarrollo del sitio de la documentación y presentación del UI Kit, la página donde entrarán los desarrolladores para conocer nuestro trabajo y aprender a usar los componentes y otros elementos de diseño. Para ello tomaremos el trabajo de la diseñadora hecho en Figma y lo llevaremos a HTML y CSS, aplicando también los componentes y el tema de diseño que hemos desarrollado en las clases anteriores. Como framework para crear el sitio usaremos Eleventy, que es un Static Site Generator muy conocido y ampliamente usado para documentar proyectos de software.
Comenzando el desarrollo del sitio de la documentación de nuestro UI Kit. Para ello vamos a usar el Static Site Generator Eleventy. Veremos cómo integrar la documentación en nuestro proyecto de monorepositorio, instalando Eleventy y realizando la configuración paso a paso para conseguir que se adapte a las carpetas que necesitamos. Integramos Vite como sistema de bundelización en Eleventy para el tratamiento de los assets. Desarrollamos el layout del sitio en las tecnologías de la web: HTML, CSS y Javascript.
Después de haber desarrollado los items del menú, componentes que hemos creado para la barra de enlaces del sitio de la documentación, ahora vamos a desarrollar el componente de menú global, aportando nuevas utilidades que nos permitirán usar el componente en más contextos, como gestionar el elemento activo de una manera global, personalizar los iconos, gestionar eventos, etc.
Llegado a este punto nos queda por completar algunos detalles extra en el layout del sitio, en la zona central de enlaces del aside, así como maquetar con flexbox los elementos de la página y manejar los espacios para ajustar la zona central de contenidos. Vamos a verlo paso a paso en este vídeo.
Ahora vamos a ver cómo instalar la librería PrismJS para formatear los bloques de código con syntax highlight, de modo que se vean de manera adecuada en la página de la documentación de los componentes.
Después de haber instalado y configurado Eleventy y haber desarrollado el template de nuestro sitio de documentación vamos a desarrollar las páginas de documentos del sitio, como la página raíz de los componentes y las páginas de cada uno de los componentes explicados y con sus ejemplos de previsualización y código de implementación. Lo bueno del sitio de la documentación realizado con un SSG es que nos permite aplicar el layout diseñado y mantener el contenido de las páginas a través de código lel lenguaje Markdown, que es ampliamente usado para documentar proyectos.
Despliegue e integración continua
Finalizamos el curso con un bloque dedicado al despliegue del proyecto, configurando un proceso de CI/CD para que el sitio se construya y se publique cuando enviamos cambios a GitHub.
Despliegue del sitio automatizado CI/CD usando un servicio de alojamiento gratuito de sitios estáticos llamado Netlify.
Valoraciones
Enrique Gálvez
De momento me está resultando muy útil. Un buen kit de conocimientos prácticos!
DOCAL ARTAJO / JAIME
Excelente curso!!!!
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.