Frontend Academy · Lección

Consumo de un sistema de diseño

Instale la biblioteca en una aplicación host, aplique el proveedor de temas, elimine mediante tree-shaking los componentes no utilizados y manténgase al día con las actualizaciones de versión.

Consumo de un sistema de diseño es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Instalación y configuración

Añada el sistema de diseño como dependencia. Algunas bibliotecas requieren configuración adicional: un provider, la importación de CSS o la carga de fuentes.

npm install @yourorg/design-system

// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';

<DesignSystemProvider theme="light">
  <App />
</DesignSystemProvider>

Proveedor de temas

La mayoría de los sistemas de diseño ofrecen un provider de nivel superior para el tema (claro/oscuro), la configuración regional y el contexto compartido. Envuelva la aplicación una sola vez.

<DesignSystemProvider
  theme={isDarkMode ? darkTheme : lightTheme}
  locale="en"
>
  <App />
</DesignSystemProvider>

Importar componentes

Importe solo lo que necesite; junto con el tree-shaking, esto garantiza que solo se distribuyan los componentes utilizados.

import { Button, Card, TextField } from '@yourorg/design-system';

function LoginForm() {
  return (
    <Card>
      <TextField label="Email" type="email" />
      <TextField label="Password" type="password" />
      <Button variant="primary">Sign In</Button>
    </Card>
  );
}

Importaciones de subrutas

Algunas bibliotecas admiten importaciones de subrutas para mejorar la claridad y reducir el tamaño del bundle.

// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card   from '@yourorg/design-system/Card';

// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';

Consejos sobre tree-shaking

El tree-shaking elimina las exportaciones no utilizadas durante la creación del bundle. Requiere una compilación ESM, sideEffects: false en el package.json de la biblioteca e importaciones con nombre en su código. Compruébelo con un analizador de bundles.

Personalización con Theme

Sobrescriba los tokens del tema para adaptarlos a su marca, sin hacer un fork de la biblioteca.

import { defaultTheme } from '@yourorg/design-system';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#ff5733'
  }
};

<DesignSystemProvider theme={customTheme}>
  <App />
</DesignSystemProvider>

Extender componentes

¿Necesita un botón ligeramente diferente? Componga, no haga un fork.

import { Button as DSButton } from '@yourorg/design-system';

function IconButton({ icon, ...props }) {
  return (
    <DSButton {...props}>
      <Icon name={icon} />
      {props.children}
    </DSButton>
  );
}

Leer el CHANGELOG antes de actualizar

Lea siempre el CHANGELOG antes de actualizar versiones MAJOR. Busque cambios incompatibles, codemods de migración y nuevas API recomendadas.

Codemods para actualizaciones MAJOR

Las buenas bibliotecas incluyen codemods (scripts de jscodeshift) que automatizan las migraciones de cambios incompatibles.

npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs

Fijar versiones frente a caret

"^1.4.2" permite actualizaciones 1.x.y, lo que resulta arriesgado si la biblioteca no respeta SemVer. "1.4.2" fija exactamente la versión: es la opción más segura, pero tendrá que actualizarla manualmente. Renovate/Dependabot ayudan a automatizar las actualizaciones semanales.

Informar de problemas al proyecto original

¿Ha encontrado un error? Abra una incidencia con una reproducción mínima. ¿Necesita una funcionalidad? Abra primero un debate. Contribuir con las correcciones mejora el sistema de diseño para todos.

Evitar sobrescrituras de estilos

No acceda a los componentes internos del sistema de diseño mediante !important o selectores descendientes. Use la API pública de temas. Las sobrescrituras improvisadas se romperán en la próxima actualización.

Comprobación rápida

Si un sistema de diseño usa ESM y exportaciones con nombre, ¿cuál es la forma más limpia de consumir solo los componentes que necesita?

Resumen: consumir un sistema de diseño

Instale el sistema y envuélvalo en DesignSystemProvider con un tema. Use importaciones ESM con nombre para tree-shaking. Sobrescriba los tokens del tema para adaptarlos a su marca. Componga, no haga un fork. Lea el CHANGELOG antes de las actualizaciones MAJOR y ejecute los codemods si se proporcionan. Fije la versión o use caret con cuidado. Informe de errores y envíe PR al proyecto original. No intente solucionar las limitaciones de la API pública mediante !important.

Preguntas frecuentes

¿La lección «Consumo de un sistema de diseño» es gratis?

Sí — el texto completo de «Consumo de un sistema de diseño» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Consumo de un sistema de diseño»?

Instale la biblioteca en una aplicación host, aplique el proveedor de temas, elimine mediante tree-shaking los componentes no utilizados y manténgase al día con las actualizaciones de versión. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Consumo de un sistema de diseño»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Storybook: stories, controles y documentación
Tokens de diseño con Style Dictionary
Versionado y publicación en npm
Consumo de un sistema de diseño

← Volver a Frontend Academy