Variables Starter Kit — Bootstrap 5.3.8 para Figma

Cuando trabajás entre diseño y desarrollo, uno de los grandes desafíos es mantener la coherencia entre lo que se diseña y lo que finalmente se construye.

Bootstrap, con su madurez y estructura modular, ya nos brinda un sistema sólido. Pero en el entorno de Figma, esa conexión a veces se diluye.
Por eso creé este Variables Starter Kit: una colección completa de variables de Bootstrap 5.3.8 para diseñadores y desarrolladores, pensada para agilizar los flujos de trabajo y fortalecer la comunicación entre equipos.

¿Qué incluye este kit?

El kit reúne 164 variables primitivas organizadas por grupos base —colores, espaciados, tipografía, radius y opacidad—, ya listas para usar en modo Light o Dark.
Además:

• Totalmente exportable a JSON o DTCG format, para integrarlo en sistemas de diseño o pipelines.
• Compatible con Bootstrap 5.3.8+.
• Cada variable está identificada con el prefijo bs-, evitando conflictos con variables propias de tus proyectos.
• Incluye nombres CSS y tokens semánticos, lo que facilita el trabajo colaborativo con el equipo front.

Propósito

No busco reemplazar los grandes UI Kits que ya existen en la comunidad —como el excelente Bootstrap 5 Design System de Vinh Bui—, sino complementarlos.
Este recurso pone el foco en la base técnica del diseño: los tokens que hacen que un sistema sea realmente escalable, mantenible y consistente.
En lugar de comenzar cada proyecto desde cero, podés partir de un escenario normalizado y listo para iterar según tus necesidades.

Podés editar las variables desde el panel de Variables en Figma, exportarlas, o importarlas a tus proyectos mediante un plugin compatible.
Cada valor viene con su nombre en modo dev, lo que permite manipularlo dinámicamente desde CSS o JavaScript si fuera necesario.

Un ejemplo rápido:

• En Figma: bs/spacer/3 aplicado como padding o margin.
• En SCSS: $spacing-3 o var(--bs-spacing-3).
• En Bootstrap: .p-3 o .m-3.

Ese nivel de correspondencia directa es el que buscaba lograr.

Contexto de trabajo

En mi caso, en la mayoría de los proyectos freelance utilizo frameworks tanto en el diseño como en el front o el back.
Estandarizar y reutilizar componentes y variables no solo optimiza tiempo, también reduce la fricción y mejora la escalabilidad de los proyectos.
Con este kit, las tareas repetitivas de seteo inicial se simplifican, y podés concentrarte en lo que realmente importa: el diseño y la experiencia de usuario.

Extra

El archivo ya incluye mapeo completo de variables para ambos modos (dark / light), permitiendo personalizar fácilmente según las necesidades de marca o accesibilidad.
Esto ayuda a mantener una experiencia visual coherente sin perder contraste ni legibilidad, principios básicos en cualquier diseño accesible.

Este starter kit no pretende reinventar Bootstrap, sino acercarlo aún más al entorno de diseño.
La idea es que tanto diseñadores como desarrolladores hablen el mismo idioma desde el inicio.
Si te interesa mejorar tus flujos entre Figma y el código, te invito a probarlo, adaptarlo y expandirlo para tus propios proyectos.

Podés descargarlo desde la comunidad de Figma y empezar a trabajar con una base sólida, moderna y perfectamente alineada con Bootstrap 5.