Sistema de Diseño Nimbus
Nimbus es el sistema de diseño de código abierto de Tiendanube. Con componentes validados en productos Tiendanube, patrones y plantillas optimizados, documentación con ejemplos y sincronización entre el kit de interfaz de usuario en Figma y el código, Nimbus permite a los desarrolladores y diseñadores crear interfaces consistentes, accesibles y de alto rendimiento. Puede usarlo para desarrollar sus aplicaciones dentro del ecosistema de Tiendanube o para su propio proyecto, teniendo en cuenta la licencia vigente.
Dentro del contexto de la aplicación, fomentamos el uso de Nimbus para desarrollar experiencias de usuario cohesivas y reconocibles. Es importante que su aplicación incorpore y utilice las bibliotecas de Nimbus , siguiendo las directrices de design de aplicaciones y las directrices más amplias de Nimbus. Para las aplicaciones integradas, el uso de Nimbus es un requisito previo para mantener la consistencia y calidad de las interfaces integradas en el administrador de tiendas.
Principales paquetes de Nimbus
Nimbus Styles
El paquete esencial que proporciona las variables y estilos necesarios para el funcionamiento de los componentes.
Nimbus Components
El paquete que reúne una colección de componentes atómicos y compuestos, esenciales para la construcción en Nimbus. Desde botones hasta inputs y checkboxes, estos bloques de construcción forman la base del diseño de la interfaz, permitiendo la creación de componentes más complejos y reutilizables.
Nimbus Patterns
El conjunto central de patrones predefinidos que ofrece combinaciones inteligentes de componentes atómicos y compuestos en Nimbus. Estas soluciones predefinidas, probadas y validadas por el equipo, resuelven desafíos de diseño e interacción de manera efectiva, promoviendo un enfoque cohesivo y consistente para implementar soluciones de diseño.
Nimbus Tokens
Los tokens de diseño representan las variables fundamentales utilizadas para mantener la coherencia en un sistema de diseño. En el contexto de Nimbus, abarcan elementos como colores, tipografías y espaciados esenciales. Estos tokens son la base para garantizar una apariencia y sensación uniformes en todos los componentes y aplicaciones.
Nimbus Icons
Un conjunto de íconos de código abierto creados exclusivamente para Nimbus, moldeados a partir de la morfología de nuestro logotipo de marca. Diseñados para agilizar el diseño y desarrollo, estos íconos ofrecen flexibilidad, localización y gratuidad, enriqueciendo las soluciones de quienes desean impulsar historias en América Latina.
Plantillas
Pantalla de Ajustes
Contiene controles interactivos y componentes que manejan estados agrupados.
Modal de Confirmación
Incluye un modal de confirmación que se abre para confirmar una acción destructiva.
Página de Formulario
Incluye varios componentes de entrada de datos que cubren una variedad de opciones.
Plantilla de Página Básica
Ofrece un caso de ejemplo donde se encuentran todos los posibles elementos de una página.
Pantalla de Inicio de Sesión
Esta plantilla de inicio de sesión se puede usar para iniciar sesión en una aplicación externa.
Página de Lista Simple
Contiene una lista simple de datos con cadenas de texto y acciones.
Emula la Lista de Productos del Administrador de Tiendanube
Emula la Lista de Productos del Administrador de Tiendanube
Configuración y uso de Nimbus
- Para este ejemplo, solo instalaremos los paquetes esenciales de Nimbus.
yarn add @nimbus-ds/styles @nimbus-ds/components
ou
npm add @nimbus-ds/styles @nimbus-ds/components
- Importamos todos los componentes necesarios de Nimbus y el archivo de estilos CSS en nuestro proyecto, lo que nos permite utilizar cualquier componente de Nimbus en el proyecto.
import React from "react";
import useThemeContext from "@theme/hooks/useThemeContext";
import "@nimbus-ds/styles/dist/index.css";
import { Title, Card, Text, Button, Alert, Box } from "@nimbus-ds/components";
const App: React.FC = () => (
<Box display="flex" flexDirection="column" gap="4">
<Title as="h1">My simple app</Title>
<Alert appearance="primary" title="Hello world">
This is a simple alert to show Nimbus components
<Button>Click me</Button>
</Alert>
<Card>
<Card.Body>
<Text fontSize="base">
This is a sample paragraph inside a Card component.
</Text>
</Card.Body>
</Card>
</Box>
);
export default App;
- Después de implementar lo anterior en su proyecto, obtendrá la siguiente salida.
My simple app
Hello world
This is a sample paragraph inside a Card component.