--- title: "Sistemas de diseño: biblioteca de Figma y código — Dardo" description: "Sistemas de diseño: tokens, biblioteca de Figma y componentes en React o Astro con estados WCAG 2.2, documentación y un proceso que los mantiene sincronizados." url: "https://dardo.studio/es/servicios/sistemas-de-diseno/" language: "es" translations: {"en":"https://dardo.studio/en/services/design-systems/","pt":"https://dardo.studio/pt/servicos/design-system/"} updated: "2026-10-14" --- # Sistemas de diseño: biblioteca de Figma y componentes en código Un sistema de diseño es el conjunto compartido de decisiones, componentes y reglas que permite a varios diseñadores y desarrolladores construir interfaces que se ven y se comportan igual. Dardo los construye para equipos de producto y de marketing: tokens de diseño, una biblioteca de Figma, componentes en código con React o Astro, documentación y un proceso para cambiarlos, de modo que el archivo y el código digan lo mismo. Por Equipo editorial de Dardo · Actualizado 14 oct 2026 · 10 min de lectura [Pedir una propuesta](https://dardo.studio/es/contacto/?service=design-systems) · [Escríbenos por WhatsApp](https://wa.me/573163373216?text=Hola%20Dardo%2C%20quiero%20cotizar%3A%20Sistemas%20de%20dise%C3%B1o%3A%20biblioteca%20de%20Figma%20y%20componentes%20en%20c%C3%B3digo) ## ¿Cuándo necesita un equipo un sistema de diseño? Un equipo lo necesita cuando personas distintas toman una y otra vez las mismas decisiones de interfaz y los resultados ya no coinciden. Señales típicas: un segundo producto o sitio que comparte la marca, varios diseñadores o desarrolladores front-end trabajando desde una misma biblioteca de Figma, un cambio de marca que debe llegar a todas las pantallas y tickets de QA sobre botones y formularios que cambian de una página a otra. Lo hemos visto en nuestro propio sitio. Un inventario de nuestras hojas de estilo, hecho en septiembre de 2026, encontró 185 colores hexadecimales distintos escritos a mano y 144 tamaños de fuente distintos en 28 archivos CSS. Algunos pertenecen a ilustraciones y prototipos; el resto se está clasificando en tokens, excepciones con nombre y código muerto. Un solo sitio de marketing con un único diseñador rara vez necesita un sistema: bastan los componentes reutilizables que incluye el [diseño web a medida](https://dardo.studio/es/servicios/diseno-web/). Si el producto aún está encontrando su flujo principal, empieza por el [diseño de producto](https://dardo.studio/es/servicios/diseno-de-producto/) y convierte en sistema, más adelante, los patrones que sobrevivan. ## Qué incluye un proyecto de sistema de diseño Un proyecto de sistema de diseño entrega las mismas decisiones en Figma y en código, más la documentación y el proceso que las mantienen alineadas. La propuesta indica cuáles de estos elementos entran en el alcance y cómo se aprueba cada uno. Para empezar necesitamos acceso de lectura a tus archivos de Figma y a tus repositorios de código, y una persona de tu lado que apruebe las decisiones. - Una auditoría de las pantallas y el código existentes: colores, tipografía, espaciado y componentes - Tokens de diseño para color, tipografía, espaciado, radio y movimiento, generados para Figma y CSS - Una biblioteca de Figma publicada, con variantes, propiedades y todos los estados interactivos - Componentes en código con React o Astro, cuyas props coinciden con las propiedades de Figma - Documentación con reglas de uso y notas de accesibilidad para cada componente - Un proceso de contribución y publicación de versiones, con control de versiones y registro de cambios - Una línea base de adopción medida en Figma y en el código ## ¿Kit inicial o sistema completo? ¿De qué tamaño? Empieza por los componentes que tu equipo construye cada semana, no por un catálogo completo. Un kit inicial cubre los fundamentos y los componentes que aparecen en la mayoría de las pantallas; un sistema completo suma temas, plataformas, componentes complejos y gobernanza. Entregamos el kit como primera versión y lo hacemos crecer a partir de solicitudes reales. __¿Kit inicial o sistema completo? ¿De qué tamaño?__ | Alcance | Kit inicial | Sistema completo | | ------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | | Tokens | Color, tipografía, espaciado y radio para una marca, en modo claro y oscuro | Varias marcas o productos como modos, además de movimiento y densidad | | Componentes | Botón, enlace, campos de formulario, casilla, selector, diálogo, tarjeta, navegación | Tablas de datos, selectores de fecha, gráficos y patrones propios del producto | | Código | Un framework en un repositorio | Un paquete con versiones que usan varias apps o sitios | | Documentación | Notas de uso junto a cada componente | Un sitio de documentación con guías, ejemplos y registro de cambios | | Gobernanza | Una persona de tu lado aprueba los cambios | Un proceso de contribución, un calendario de versiones y reportes de adopción | | Para quién | Un producto y su sitio de marketing | Varios productos, equipos o marcas que comparten un sistema | ## Tokens y variables de Figma: una sola fuente para diseño y código Los tokens de diseño son decisiones con nombre, como action-primary o space-4, guardadas una sola vez y usadas tanto por Figma como por el código. Los organizamos en capas: primero los valores base y luego nombres semánticos que dicen para qué sirve cada valor, de modo que cambiar un color de marca significa editar un valor en lugar de buscarlo en decenas de archivos. En Figma, los tokens se convierten en variables. A octubre de 2026, Figma ofrece seis tipos de variable (color, número, texto, booleano, tiempo y curva de aceleración), hasta 5.000 variables por colección y modos para alternativas como claro y oscuro o una segunda marca: hasta 10 modos por colección en Professional, 20 en Organization y sin límite en Enterprise mediante colecciones extendidas. En el código, la fuente es un JSON en tu repositorio que genera propiedades personalizadas de CSS. El Design Tokens Community Group publicó la primera versión estable de su formato de archivo, 2025.10, el 28 de octubre de 2025; es un informe de un grupo comunitario, no un estándar del W3C, y lo seguimos siempre que tus herramientas puedan leerlo. En dardo.studio, los colores de marca y las recetas tipográficas son archivos JSON que generan las variables CSS del sitio, y los archivos generados nunca se editan a mano. ## Componentes en código que coinciden con la biblioteca de Figma Un componente solo se comparte cuando sus versiones de Figma y de código tienen el mismo nombre, las mismas propiedades y los mismos estados. Diseñamos y construimos cada uno en conjunto, así que una variante en Figma es una prop en el código. React encaja con productos con sesión iniciada, como los que construimos con [desarrollo de aplicaciones web](https://dardo.studio/es/servicios/desarrollo-de-software-a-medida/); Astro encaja con los sitios de contenido y de marketing que construimos con nuestro servicio de [desarrollo web](https://dardo.studio/es/servicios/desarrollo-web/). Los desarrolladores inspeccionan los diseños en el Dev Mode de Figma, que exige un puesto Full o Dev en un plan Professional o superior; con Code Connect configurado, el Dev Mode muestra el código real de tus componentes en lugar de fragmentos generados. Los componentes de React tienen historias de Storybook para cada estado; los de Astro tienen una página de muestra dentro del proyecto, como está documentado nuestro propio sistema. ## Accesibilidad integrada en cada componente La accesibilidad que se corrige en un componente queda corregida en todas las pantallas que lo usan. Varios criterios de éxito de WCAG 2.2 se deciden a nivel de componente: - Contraste de texto de al menos 4,5:1 (3:1 para texto grande) y 3:1 para las partes visuales de los controles (1.4.3, 1.4.11) - Un indicador de foco visible que los encabezados fijos y las capas superpuestas no tapen por completo (2.4.7, 2.4.11) - Áreas de clic de al menos 24 por 24 píxeles CSS, o suficiente espacio a su alrededor (2.5.8) - Campos de formulario cuyas etiquetas, instrucciones y errores lleguen a los lectores de pantalla Revisamos el contraste en los pares de tokens antes de que lleguen a un componente, y probamos cada componente con teclado y con un lector de pantalla. El complemento de accesibilidad de Storybook ejecuta axe-core en cada historia, y la documentación de Storybook dice que detecta hasta el 57 % de los problemas de WCAG, así que la automatización es una primera revisión, no el veredicto. Nuestro propio sistema exige que todo patrón interactivo defina los estados hover, foco, activo y deshabilitado, áreas táctiles de 44 píxeles cuando el diseño lo permite, movimiento reducido y texto en inglés y español. Para encontrar primero dónde falla tu interfaz actual, empieza por una [auditoría de accesibilidad](https://dardo.studio/es/servicios/accesibilidad-web/), desde USD 690. ## Gobernanza y adopción: cómo un sistema se mantiene en uso Un sistema de diseño sigue siendo útil solo si alguien se hace responsable de él y existe una forma clara de cambiarlo. Antes de la entrega acordamos quién será el responsable de tu lado, cómo piden los equipos un componente o una variante, quién lo revisa en diseño, código y accesibilidad, y cómo se versionan las publicaciones. Las excepciones llevan nombre: un valor puntual para una campaña vive junto a ese trabajo y no se convierte en silencio en estándar. La adopción se mide en Figma y en el código. Los análisis de biblioteca de Figma, disponibles en los planes Organization y Enterprise, cuentan inserciones, desvinculaciones e instancias de cada componente, estilo y variable, con hasta un año de historial. Un componente que se desvincula con frecuencia aún no responde a una necesidad real y sube en la lista de cambios. En el código contamos las importaciones de componentes del sistema frente a copias locales y valores escritos a mano. Después de una [renovación de marca](https://dardo.studio/es/servicios/renovacion-de-marca/), los tokens llevan la mayor parte del despliegue: los valores nuevos llegan a todos los componentes que los usan, y los mismos conteos muestran qué pantallas todavía requieren trabajo manual. ## Qué mueve el costo y de quién es el sistema El precio depende de la cantidad de componentes y variantes, las plataformas a las que se entregan, el número de marcas o temas y cuánta interfaz existente hay que migrar al sistema. Nuestro formulario de contacto pide un rango de presupuesto, desde menos de USD 5.000 hasta más de USD 60.000, y la propuesta ajusta el alcance a ese rango; los precios iniciales de otros servicios están en nuestra [página de precios](https://dardo.studio/es/precios/). El resultado es tuyo: la biblioteca de Figma vive en el espacio de trabajo de tu organización, los tokens y componentes en tu repositorio, y cualquier paquete se publica a tu nombre, con nuestro equipo como miembros invitados. Las licencias de las tipografías deben cubrir uso web y de apps antes de que una fuente entre al sistema. Dardo es un [equipo de tres personas, liderado por su fundador, en Bogotá](https://dardo.studio/es/estudio/), en UTC−5 todo el año. Si necesitas un equipo que opere un sistema en decenas de productos durante años, un equipo interno es el mejor responsable a largo plazo; nosotros podemos construir los cimientos que ese equipo asumirá. ## Preguntas antes de elegir **¿Cuánto cuesta un sistema de diseño?** Depende de la cantidad de componentes y variantes, de si se entregan solo en Figma o también en React o Astro, de cuántas marcas o temas llevan los tokens y de cuánta interfaz existente debe migrar al sistema. La propuesta cotiza por separado la auditoría, los tokens, la biblioteca de Figma, el código y la documentación, para que puedas compararla línea por línea. **¿Cuánto tarda construir un sistema de diseño?** El cronograma lo fijamos en la propuesta en lugar de prometer un número estándar. Depende de la cantidad de componentes, de qué tan rápido los revise tu equipo y de si las pantallas existentes migran al mismo tiempo. El kit inicial se entrega primero, así tu equipo usa los componentes centrales mientras el resto del sistema crece. **¿Cuál es la diferencia entre un UI kit y un sistema de diseño?** Un UI kit es un conjunto de componentes dibujados, normalmente solo en Figma. Un sistema de diseño suma los tokens con los que se construyen esos componentes, versiones en código que tus desarrolladores importan, documentación sobre cuándo usar cada uno y un proceso para cambiarlos. Un kit ayuda a los diseñadores a empezar más rápido; un sistema mantiene coherentes el diseño y el código. **¿Pueden construir un sistema de diseño sobre nuestro producto actual?** Sí. Hacemos el inventario de lo que existe, elegimos los componentes más usados y reemplazamos las versiones antiguas una a una, para que el producto siga avanzando. En nuestro propio sitio cada superficie se migra solo después de una comparación visual, y la migración se da por terminada únicamente cuando se ha revisado en inglés y español, en modo claro y oscuro, en computador y celular. **¿Qué plan de Figma necesita un sistema de diseño?** Publicar una biblioteca compartida requiere Professional o superior, y los análisis de biblioteca requieren Organization o Enterprise. La cantidad de modos de variables por colección aumenta con el plan, y Enterprise añade colecciones extendidas para varias marcas. Los desarrolladores que usan el Dev Mode necesitan un puesto Full o Dev. Diseñamos según tu plan actual y te avisamos cuando un límite obligue a buscar soluciones alternas. **¿Un sistema de diseño ayuda con las herramientas de programación con IA?** Les deja menos cosas por adivinar. El servidor MCP remoto de Figma, disponible en todos los planes y puestos, permite que las herramientas de IA de tu editor lean variables, componentes y estructura de un diseño, y Code Connect las dirige a los componentes que ya existen en tu código. El código que generen igualmente debe revisarse frente al sistema. ## Fuentes y lecturas Fuentes de esta página, con más detalles de sus publicaciones originales. - [Figma Help Center: Overview of variables, collections, and modes](https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes) · help.figma.com - [Figma Help Center: Compare Figma plans and features](https://help.figma.com/hc/en-us/articles/360040328273-Compare-Figma-plans-and-features) · help.figma.com - [Figma Help Center: Guide to Dev Mode in Figma](https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode-in-Figma) · help.figma.com - [Figma Help Center: View and explore library analytics](https://help.figma.com/hc/en-us/articles/360039238353-View-and-explore-library-analytics) · help.figma.com - [Figma Help Center: Guide to the Figma MCP server](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server) · help.figma.com - [W3C Design Tokens Community Group: Design Tokens Format Module 2025.10](https://www.w3.org/community/reports/design-tokens/CG-FINAL-format-20251028/) · w3.org - [W3C: Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org - [Storybook docs: Accessibility tests](https://storybook.js.org/docs/writing-tests/accessibility-testing) · storybook.js.org [Dardo](https://dardo.studio/es/) · [Servicios](https://dardo.studio/es/servicios/) · Sistemas de diseño ## De estilos dispersos a un solo sistema Envía los productos y sitios que el sistema debe atender, tu plan de Figma y tu stack de front-end. Te respondemos qué cubre la auditoría y cómo se definiría el alcance de un kit inicial o de un sistema completo. [01 · **Primero, diseña el producto** · Diseño de producto](https://dardo.studio/es/servicios/diseno-de-producto/) · [02 · **Revisa la accesibilidad** · Auditoría de accesibilidad](https://dardo.studio/es/servicios/accesibilidad-web/) · [03 · **Solicita una propuesta** · Envía tus productos, tu plan de Figma y tu stack](https://dardo.studio/es/contacto/?service=design-systems) ## Sigue explorando. - [Servicio · **Diseño de producto digital y UX/UI para apps web y SaaS**](https://dardo.studio/es/servicios/diseno-de-producto/) - [Servicio · **Desarrollo de software a la medida: apps web, SaaS y MVP**](https://dardo.studio/es/servicios/desarrollo-de-software-a-medida/) - [Servicio · **Renovación de marca: actualiza tu identidad sin perder reconocimiento**](https://dardo.studio/es/servicios/renovacion-de-marca/)