● EN LÍNEA
VTEX Design System

VTEX Design System

Sistemas de Diseño

código abierto marco de trabajo para consistent, accessible e-commerce interfaces.

GratuitoSistemas de Diseño
VISITAR SITIO >>

Descripción General

VTEX Design System es el sistema de diseño oficial de código abierto de VTEX para construir experiencias digitales escalables, consistentes y accesibles en plataformas de e-commerce. Proporciona componentes UI, patrones, directrices y herramientas reutilizables adaptados para tiendas en línea, flujos de checkout y paneles de administración, con un enfoque en rendimiento, internacionalización y productividad del desarrollador usando componentes React y bibliotecas Figma. Biblioteca de componentes: Elementos reutilizables como botones, formularios, tarjetas, cuadrículas de productos y widgets de checkout con variantes para temas y estados. Tokens de diseño: Colores semánticos, tipografía, espaciado, iconos y movimiento para consistencia de marca. Accesibilidad: Cumplimiento WCAG con soporte ARIA y patrones inclusivos. Herramientas: Kit Figma para prototipado; biblioteca React (VTEX Styleguide) para implementación.

label.best_for

tokens de diseño: Semantic colores, tipografía, espaciado, iconos, y motion para marca consistency. accesibilidad: WCAG compliance con ARIA soporte y inclusive patrones. herramientas: Figma kit para prototipado; React biblioteca (VTEX Styleguide) para implementation.

Características Principales

  • biblioteca de componentes: Reusable elements como buttons, forms, cards, product grids, y checkout widgets con variants para themes y states.
  • tokens de diseño: Semantic colores, tipografía, espaciado, iconos, y motion para marca consistency.
  • accesibilidad: WCAG compliance con ARIA soporte y inclusive patrones.
  • herramientas: Figma kit para prototipado; React biblioteca (VTEX Styleguide) para implementation.

Pros

  • +Código abierto
  • +Amplia biblioteca de iconos
  • +Generación de paletas de colores
  • +Verificación de contraste de accesibilidad

Contras

  • -La adopción requiere alineación del equipo
  • -La personalización puede ser compleja

/// ESPECIFICACIONES

  • Precio:free
  • Plataforma:
    Browser
ASSETS_DIRECTORY
figma
/// Herramientas Similares
Vuetify

Vuetify

Vuetify es un completo Vue.js marco de trabajo de IU ese strictly adheres material diseñRA guidelines, ofreciendo rico conjunto de componentes y potente personalización capabilities.

A2UI

A2UI

código abierto protocol para IA agents generar seguro, declarative UIs través de platforms.

Watt Design System

Watt Design System

Holaluz's Figma-basado kit de IU para consistent, accessible renewable energy interfaces.