# Sistema de diseño Adobe Spectrum ## Vista previa de la interfaz del sistema de diseño Adobe Spectrum Inspecciona tres variantes de ilustración originales, selecciona un lote de exportación y prepara una receta local para PNG o JPEG. ## Referencia de diseño del sistema de diseño Adobe Spectrum API de Spectrum v3 de React y correspondencias de dimensiones. La columna de dimensión numérica registra la conversión base de la tabla de migración de Adobe; los valores size-* que dependen de la escala pueden adaptarse al uso táctil. No es una exportación de tokens de Spectrum 2. Los colores de la vista previa y las ilustraciones personalizadas son decisiones de la aplicación. ### Configuración de Provider y del tema | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | theme | defaultTheme | Objeto de tema raíz obligatorio, importado de @adobe/react-spectrum. | | colorScheme | light \| dark | Anulación explícita de la preferencia del sistema operativo. | | scale | medium \| large | Escala para puntero preciso o puntero táctil; normalmente, deja que Provider la elija. | | locale | BCP 47 language tag | Contexto de configuración regional y dirección de escritura. | | breakpoints | custom name → pixel width | Esta guía establece explícitamente tablet: 640 y desktop: 1024 para evitar valores predeterminados contradictorios en la página de referencia. | | isDisabled / isReadOnly | boolean group defaults | Los providers anidados y las propiedades individuales pueden anular el comportamiento del grupo. | ### Correspondencias de dimensiones base | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | size-50 | 4px base | Separación pequeña. | | size-100 | 8px base | Controles relacionados. | | size-150 | 12px base | Separación de la barra de herramientas. | | size-200 | 16px base | Separación entre grupos del inspector. | | size-250 | 20px base | Espaciado intermedio. | | size-300 | 24px base | Margen interior del panel. | | size-400 | 32px base | Agrupación más amplia. | | size-500 | 40px base | Separación entre secciones. | | size-600 | 48px base | Estructura grande. | | size-1000 | 80px base | Zona de ilustración de tamaño fijo. | | size-2400 | 192px base | Ancho de ejemplo del inspector. | | size-6000 | 480px base | Superficie amplia con límites definidos. | ### Propiedades de estilo y valores adaptables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | marginStart / marginEnd | DimensionValue | Espaciado lógico; es preferible a left/right para admitir la dirección de escritura. | | padding / backgroundColor | View style props | Crea una superficie exterior personalizada en lugar de modificar el interior de los controles nativos. | | width | size-* \| CSS length \| calc(...) | Ejemplo: calc(100% - size-2000). | | responsive value | {base: value, tablet: value} | Las claves coinciden con los puntos de interrupción explícitos de Provider. | | UNSAFE_style / UNSAFE_className | last-resort escape hatch | No dependas del DOM ni de los estilos privados de los componentes. | | single-line-height | 32 base mapping | Usa la dimensión semántica en lugar de afirmar que todos los controles miden siempre 32 px. | ### Contrato de selección de colecciones | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | selectionMode | none \| single \| multiple | La muestra usa multiple para un lote. | | selectedKeys | Set of row keys \| all | El estado controlado debe gestionar el valor centinela all. | | onSelectionChange | callback with selection | No interpretes la selección como aprobación ni como confirmación de una exportación correcta. | | disallowEmptySelection | boolean | Útil cuando se requiere una selección única; se omite para los lotes de exportación opcionales. | | TableHeader → Column | column anatomy | Asigna claves estables a las columnas para la representación dinámica. | | TableBody → Row → Cell | row anatomy | Los identificadores de registro establecen una identidad estable para la colección. | ### Selector y composición de texto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | label | persistent text | Asigna un nombre al selector del formato de exportación. | | selectedKey | one item key | Formato controlado, como png o jpeg. | | onSelectionChange | key callback | Un contrato distinto al de un controlador de eventos del DOM. | | Item key | stable key | Identidad del valor independiente de la etiqueta visible. | | Heading level | 1–6 | Nivel semántico del encabezado; el estilo nativo depende del contexto. | | Button onPress | press callback | Activación compatible con distintos métodos de entrada, en lugar de una acción personalizada solo para el ratón. | ## Adobe Spectrum Guía completa del sistema de diseño Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño Adobe Spectrum: elige v3 deliberadamente; no mezcles generaciones de Spectrum ### Qué instala este ejemplo > Adobe ahora documenta Spectrum 2 junto con la biblioteca v3. Esta página elige @adobe/react-spectrum@3 porque sus contratos de Provider, colección y props de estilo ofrecen un ejemplo completo y documentado de revisión de recursos. Una receta para v3 resulta útil para una aplicación v3 existente, pero no debe presentarse como la implementación más reciente de Spectrum. Antes de decidir una nueva adopción, consulta la referencia de migración enlazada para elegir una generación. La diferencia práctica se aprecia en el código. v3 pasa size-300 mediante props de estilo y proporciona defaultTheme a Provider. La guía de migración traslada estas convenciones a un API de estilo distinto. Cambiar únicamente el nombre del paquete no migraría el ejemplo; hay que revisar conjuntamente las importaciones de componentes, los estilos y las propiedades compatibles. Consulta la especificación complementaria ## Adobe Spectrum El Provider del sistema de diseño coordina la apariencia, la escala y la configuración regional ### Una raíz, varios ajustes independientes Provider establece el entorno que utilizan la tabla, el selector y el botón. El objeto de tema incluye las definiciones de esquema de color y escala. colorScheme puede prevalecer sobre la preferencia del sistema operativo, mientras que scale tiene en cuenta las características de los dispositivos de entrada. Son ajustes independientes: una interfaz oscura en un ordenador de escritorio no requiere objetivos táctiles grandes, y una pantalla táctil clara no debería heredar accidentalmente una disposición compacta pensada para el ratón. En producción, deja la escala en automático para el uso habitual. En un estudio de componentes, elegir explícitamente medium o large puede facilitar la comparación de controles, pero debe describirse como un ajuste de inspección. locale establece el contexto lingüístico, no traduce los datos de tu proyecto. Los nombres de campañas, las notas de revisión y las etiquetas de recetas siguen siendo contenido de la aplicación. Consulta la especificación complementaria ## Sistema de diseño Adobe Spectrum: usa las dimensiones admitidas y props de diseño externos ### Una escala con nombre es más que una referencia en píxeles La correspondencia básica es size-100 para 8, size-200 para 16 y size-300 para 24. La tabla de referencia incluye otros pasos útiles. Una dimensión size-* puede adaptarse a la escala de la plataforma; un valor static-size-* no lo hace deliberadamente. Ten en cuenta esa diferencia al definir el tamaño de un inspector o de un objetivo de interacción. Copiar todos los valores resueltos para escritorio a CSS eliminaría la adaptación que proporciona el entorno de los componentes. Flex y View proporcionan al ejemplo una estructura externa estable sin reescribir las partes internas de TableView. La tabla puede crecer con flex y reducirse con minWidth={0}; el inspector se apila en el tamaño base y queda limitado en el punto de ruptura explícito para tabletas. El relleno debe ir en el View que contiene la superficie. La documentación desaconseja anular los colores, bordes y la tipografía internos mediante mecanismos de escape no seguros. Consulta la especificación complementaria ## Sistema de diseño Adobe Spectrum: deja que el tema controle el color y la tipografía nativos ### Separa la paleta de muestra de la exportación de tokens La vista previa tiene un lienzo gris discreto, controles neutros e ilustraciones originales y coloridas. Esos colores de las ilustraciones no son valores de tokens de Spectrum certificados. En el ejemplo nativo, los componentes compatibles obtienen su apariencia de defaultTheme. Para una superficie nativa personalizada, usa los valores documentados de backgroundColor en lugar de dar por hecho que un único valor hexadecimal muestreado funcionará en ambos esquemas. Heading aporta estructura semántica y una presentación de Spectrum adecuada al contexto. El título de la página usa level={1}; Text proporciona contenido habitual, como el recuento de elementos seleccionados. La vista previa personalizada de HTML usa una tipografía del sistema elegida por la aplicación como alternativa, además de tamaños de texto propios. Es una demostración del flujo de trabajo y de la jerarquía relativa, no una afirmación de que la fuente de OpenDesign que la rodea o la tipografía de sus ilustraciones cumplan la especificación tipográfica de Spectrum. Consulta la especificación complementaria ## Sistema de diseño Adobe Spectrum: una tabla de colección tiene claves, columnas y semántica de selección ### La selección es un contrato de datos La tabla se compone de TableHeader y Column, junto con TableBody, Row y Cell. Cada recurso tiene un id estable. selectedKeys y onSelectionChange hacen que la selección sea controlada, de modo que el inspector de exportación puede obtener el recuento a partir del mismo estado. Un usuario puede cambiar el nombre de un recurso sin modificar su identidad. Usar la posición de la fila como identidad haría que la selección fuera frágil al cambiar el orden. La selección puede ser el valor centinela all. La configuración lo resuelve como todos los recursos actuales antes de crear una receta. Un Set vacío también es válido porque el lote es opcional; disallowEmptySelection no está activado deliberadamente. En una aplicación remota o paginada, define qué significa all para esa fuente de datos en vez de dar por hecho que las filas representadas en ese momento constituyen toda la colección. - Identidad del recurso: clave estable utilizada por la colección. - Inspección: qué ilustración se muestra ampliada en la muestra independiente. - Selección del lote: qué claves aparecen en la receta preparada. Consulta la especificación complementaria ## Sistema de diseño Adobe Spectrum: Picker y Button completan el inspector de exportación ### El formato se controla por separado del lote Picker usa una etiqueta visible y claves estables en Item. selectedKey es png o jpeg; onSelectionChange proporciona la clave seleccionada. Esto difiere de leer event.target.value de un elemento select nativo. El formato sigue seleccionado cuando se vacía el lote, lo que permite a quien revisa ajustar la selección sin tener que volver a crear un ajuste preestablecido. Button usa onPress para la activación y isDisabled cuando no hay recursos seleccionados. El ejemplo nativo serializa los identificadores y el formato en una receta local. No transforma datos de imagen, genera un archivo de exportación real ni se comunica con un servicio de recursos. Este es un límite de implementación útil: la acción y sus datos de entrada son concretos, aunque el motor de conversión quede fuera del sistema de diseño. Consulta la especificación complementaria ## Sistema de diseño Adobe Spectrum Adapta la composición en lugar de comprimir la ilustración ### Define el contrato de puntos de interrupción Este ejemplo declara tablet:640 y desktop:1024. La elección es explícita porque la página Provider actualmente tiene valores predeterminados incoherentes entre el texto explicativo y los metadatos generados de API. Los valores adaptables hacen referencia a esas claves exactas. El inspector ocupa todo el ancho en el tamaño base y luego se sitúa junto a la tabla flexible. La aplicación define esos puntos de interrupción; no son un nuevo estándar universal de Spectrum. La ilustración independiente usa un lienzo grande, un inspector lateral y una barra de miniaturas. En pantallas pequeñas, el inspector pasa al flujo normal y la ilustración conserva su relación de aspecto. Los textos, como las dimensiones y el formato, aparecen fuera de la ilustración, por lo que siguen siendo legibles y no alteran la obra que se inspecciona. Consulta la especificación complementaria ## Sistema de diseño Adobe Spectrum Inspeccionar, seleccionar y preparar son acciones diferentes ### Haz que la demostración se pueda probar Al hacer clic en la miniatura de una ilustración, cambian la ilustración ampliada y sus metadatos descriptivos. Una casilla cambia el lote de exportación. Mantener estas acciones independientes permite inspeccionar un recurso sin seleccionarlo para exportar por accidente. La vista previa muestra la cantidad seleccionada y conserva el formato mientras quien revisa cambia el lote. El TableView nativo proporciona la interacción con la colección; el ejemplo de HTML usa botones y casillas de verificación estándar y no afirma reproducir el modelo completo de navegación por teclado de la cuadrícula. Ambos ofrecen una forma de acceder mediante el teclado a las acciones demostradas. El resultado de la receta es texto, no solo un efecto visual temporal, de modo que quien revisa puede ver exactamente qué identificadores y formato se prepararon. Consulta la especificación complementaria ## Sistema de diseño Adobe Spectrum Integra primero la parte nativa y después amplía la herramienta ### Conecta un servicio de exportación real en un límite explícito Instala la suite v3 en una aplicación React existente y luego usa la entrada completa que aparece a continuación. El ejemplo incluye el proveedor, las importaciones, los datos de la colección, el estado de selección, el estado del formato y el estado del resultado. En una integración de producción, se reemplazaría la preparación de la receta por una solicitud de exportación y se mostraría el resultado confirmado de cada recurso. No llames «Exportación completada» a la respuesta local antes de que exista ese servicio. Al migrar a Spectrum 2, usa las correspondencias de Adobe para las dimensiones, los puntos de interrupción y los cambios en los componentes. Vuelve a verificar el comportamiento de selección y la persistencia del formato; una tabla de aspecto similar puede tener un contrato diferente. Indica explícitamente la generación de origen para que quienes contribuyan en el futuro no combinen un Provider de v3 con ejemplos incompatibles. 1. Selecciona un recurso y confirma que su identificador aparezca en la receta local. 2. Selecciona todo, cambia PNG por JPEG e inspecciona el conjunto completo seleccionado. 3. Borra la selección y comprueba que la acción se desactive mientras el formato siga seleccionado. 4. Reduce el ancho de la ventana y confirma que se pueda acceder a la inspección, la selección y el resultado de la receta. Consulta la especificación complementaria ## Adobe Spectrum Ejemplos de componentes del sistema de diseño ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación original de HTML/CSS del flujo de trabajo documentado de inspección y colecciones de v3. La paleta y las ilustraciones son orientativas; no se incluye el entorno de ejecución nativo de Spectrum ni conversión de imágenes. ``` Spectrum asset inspector study
Campaign library / Autumn collection
Campaign master1600 × 1200

Original artwork · illustrative preview

``` Referencia de código - La ilustración es contenido de muestra original. Preparar una receta genera metadatos de selección, no archivos de imagen convertidos; este documento no carga Spectrum v3 ni Spectrum 2. ### Entrada de implementación nativa completa La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` Referencia de código - Ejemplo completo de colección e inspector de v3 para una aplicación React existente. Crea una receta de exportación en el estado local, no archivos de imagen. Mantén la versión resuelta del paquete en el archivo de bloqueo y no combines esta entrada con importaciones de Spectrum 2. ### La selección puede ser «todo», no solo un Set Normaliza el contrato de la colección antes de calcular el lote o habilitar la acción. Este fragmento usa los recursos y las claves de la configuración completa. ``` const selected = keys === 'all' ? assets : assets.filter(asset => keys.has(asset.id)); ``` Referencia de código - Los identificadores estables se conservan al ordenar y cambiar nombres. - Un lote vacío desactiva solo la acción de receta; no borra el formato actual. ### Inspector adaptable con nombres de puntos de interrupción explícitos Usa las mismas claves en Provider y en las propiedades adaptables. Los números corresponden a una configuración deliberada de la aplicación. ``` Asset table Export inspector ``` Referencia de código - El texto de referencia de Provider y la tabla de valores predeterminados generada discrepan sobre los puntos de interrupción predeterminados; un mapa explícito elimina la ambigüedad. - Los márgenes lógicos marginStart y marginEnd se adaptan mejor que los márgenes físicos izquierdo y derecho. ## Adobe Spectrum Configuración del agente de IA del sistema de diseño ### Punto de partida para la implementación Ejemplo completo de colección e inspector de v3 para una aplicación React existente. Crea una receta de exportación en el estado local, no archivos de imagen. Mantén la versión resuelta del paquete en el archivo de bloqueo y no combines esta entrada con importaciones de Spectrum 2. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` ### Una instrucción para tu proyecto ``` Usa @adobe/react-spectrum v3 con Provider y defaultTheme. Crea el TableView con claves y el inspector de exportación proporcionados mediante Picker, Item, Flex, View y Button. Gestiona la selección como un Set o como «todo», conserva el formato al cambiar la selección y denomina el resultado receta local hasta que se conecte un servicio de conversión real. Usa claves explícitas tablet/desktop para los puntos de interrupción y propiedades de estilo compatibles. Mantén separadas las API de v3 y Spectrum 2. ``` ## Adobe Spectrum Fuentes y alcance del sistema de diseño Estudio de implementación de OpenDesign basado en la documentación mantenida de Spectrum v3 React, con @adobe/react-spectrum. Spectrum 2 también está disponible y tiene API diferentes; esta página no presenta v3 como la implementación más reciente. La vista previa independiente del panel de recursos es una interpretación original de HTML/CSS, con ilustraciones orientativas y colores elegidos por la aplicación; no es un componente nativo de Spectrum ni un editor de imágenes con gestión de color. - Provider Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. - estilos Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. - temas Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. - TableView Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. - Picker Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. - Heading Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. - Button Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. - migración Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí. ## Adobe Spectrum Recursos relacionados del sistema de diseño ### Alaska Airlines Auro Explora el tema Alaska de Auro con tokens semánticos reales para color y tipografía, tipografía basada en clases y el componente de vuelo nativo. Dos registros de vuelo originales muestran el filtrado y la selección locales, sin representar inventario de aerolíneas ni permitir reservas. ### Arco Design Crea un selector de secciones de informes con el componente Transfer controlado de Arco. Explora sus escalas reales de espaciado y tamaño, las convenciones de variables de CSS, las superficies semánticas y la diferencia entre seleccionar filas y moverlas. ### Atlassian sistema de diseño Crea un tablero de planificación de incidencias con tokens semánticos de Atlassian, una escala de espaciado de ocho píxeles, las API reales de Button, Lozenge y Toggle, y la configuración de estilos requerida para Compiled. Consulta una incidencia, filtra el tablero y mueve un elemento de trabajo local sin confundir la selección con el estado. - [Referencia de implementación](https://react-spectrum.adobe.com/v3/TableView.html) - [Fuente](https://react-spectrum.adobe.com/v3/Provider.html) - [Fuente](https://react-spectrum.adobe.com/migrating) - [Fuente](https://react-spectrum.adobe.com/v3/styling.html) - [Fuente](https://react-spectrum.adobe.com/v3/TableView.html) - [Fuente](https://react-spectrum.adobe.com/v3/Picker.html) - [Consulta la especificación complementaria](https://react-spectrum.adobe.com/migrating) - [Consulta la especificación complementaria](https://react-spectrum.adobe.com/v3/theming.html) - [Consulta la especificación complementaria](https://react-spectrum.adobe.com/v3/styling.html) - [Consulta la especificación complementaria](https://react-spectrum.adobe.com/v3/Heading.html) - [Consulta la especificación complementaria](https://react-spectrum.adobe.com/v3/TableView.html) - [Consulta la especificación complementaria](https://react-spectrum.adobe.com/v3/Picker.html) - [Consulta la especificación complementaria](https://react-spectrum.adobe.com/v3/Provider.html) - [Referencia de código](https://react-spectrum.adobe.com/v3/TableView.html) - [Referencia de código](https://react-spectrum.adobe.com/v3/Provider.html) - [Provider Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/v3/Provider.html) - [estilos Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/v3/styling.html) - [temas Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/v3/theming.html) - [TableView Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/v3/TableView.html) - [Picker Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/v3/Picker.html) - [Heading Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/v3/Heading.html) - [Button Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/v3/Button.html) - [migración Referencia oficial de React Spectrum para la implementación y las limitaciones que se comentan aquí.](https://react-spectrum.adobe.com/migrating)