# Système de design Adobe Spectrum ## Aperçu de l’interface du système de design Adobe Spectrum Examinez trois variantes d’illustrations originales, sélectionnez un lot à exporter et préparez une configuration locale pour PNG ou JPEG. ## Référence de conception du système de design Adobe Spectrum API React Spectrum v3 et correspondances des dimensions. La colonne des dimensions numériques indique la conversion de base du tableau de migration d’Adobe ; les valeurs size-* sensibles à l’échelle peuvent s’adapter à l’affichage tactile. Il ne s’agit pas d’un export de jetons Spectrum 2. Les couleurs de l’aperçu et les illustrations personnalisées sont des choix propres à l’application. ### Configuration du fournisseur et du thème | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | theme | defaultTheme | Objet de thème racine requis, importé depuis @adobe/react-spectrum. | | colorScheme | light \| dark | Remplacement explicite des préférences du système d’exploitation. | | scale | medium \| large | Échelle adaptée aux pointeurs fins ou grossiers ; en général, laissez Provider faire le choix. | | locale | BCP 47 language tag | Contexte de langue et de sens d’écriture. | | breakpoints | custom name → pixel width | Ce guide définit explicitement tablet: 640 et desktop: 1024 afin d’éviter les valeurs par défaut contradictoires dans la page de référence. | | isDisabled / isReadOnly | boolean group defaults | Les fournisseurs imbriqués et les propriétés individuelles peuvent remplacer le comportement du groupe. | ### Correspondances des dimensions de base | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | size-50 | 4px base | Petit espacement. | | size-100 | 8px base | Commandes associées. | | size-150 | 12px base | Espacement de la barre d’outils. | | size-200 | 16px base | Espacement entre les groupes de l’inspecteur. | | size-250 | 20px base | Espacement intermédiaire. | | size-300 | 24px base | Marge intérieure du panneau. | | size-400 | 32px base | Regroupement plus ample. | | size-500 | 40px base | Espacement entre les sections. | | size-600 | 48px base | Structure étendue. | | size-1000 | 80px base | Zone d’illustration de taille fixe. | | size-2400 | 192px base | Largeur d’inspecteur à titre d’exemple. | | size-6000 | 480px base | Grande surface délimitée. | ### Propriétés de style et valeurs adaptatives | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | marginStart / marginEnd | DimensionValue | Espacement logique ; à privilégier par rapport à left/right pour prendre en charge le sens d’écriture. | | padding / backgroundColor | View style props | Créez une surface externe personnalisée plutôt que de remplacer les éléments internes des contrôles natifs. | | width | size-* \| CSS length \| calc(...) | Exemple : calc(100% - size-2000). | | responsive value | {base: value, tablet: value} | Les clés correspondent aux points de rupture explicites de Provider. | | UNSAFE_style / UNSAFE_className | last-resort escape hatch | Ne vous appuyez pas sur le DOM ni sur les styles privés des composants. | | single-line-height | 32 base mapping | Utilisez la dimension sémantique plutôt que d’affirmer que tous les contrôles font toujours 32px. | ### Contrat de sélection de collection | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | selectionMode | none \| single \| multiple | L’exemple utilise le mode multiple pour un traitement par lot. | | selectedKeys | Set of row keys \| all | Un état contrôlé doit gérer la valeur sentinelle all. | | onSelectionChange | callback with selection | N’interprétez pas la sélection comme une approbation ni comme la réussite d’un export. | | disallowEmptySelection | boolean | Utile pour une sélection unique obligatoire ; omis pour les lots d’export facultatifs. | | TableHeader → Column | column anatomy | Attribuez des clés stables aux colonnes pour un rendu dynamique. | | TableBody → Row → Cell | row anatomy | Les identifiants des enregistrements assurent une identité de collection stable. | ### Composition du sélecteur et du texte | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | label | persistent text | Nommez le sélecteur de format d’exportation. | | selectedKey | one item key | Format contrôlé, par exemple png ou jpeg. | | onSelectionChange | key callback | Contrat différent de celui d’un gestionnaire d’événement DOM. | | Item key | stable key | Identité de la valeur indépendante du libellé affiché. | | Heading level | 1–6 | Niveau de titre sémantique ; le style natif dépend du contexte. | | Button onPress | press callback | Activation depuis différents champs de saisie plutôt qu’une action personnalisée réservée à la souris. | ## Guide complet du système de design Adobe Spectrum Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Adobe Spectrum : choisissez délibérément v3 et ne mélangez pas les générations de Spectrum ### Ce que cet exemple installe > Adobe documente désormais Spectrum 2 parallèlement à la bibliothèque v3. Cette page choisit @adobe/react-spectrum@3, car ses contrats Provider, collection et propriétés de style constituent un exemple complet et documenté de revue des ressources. Une recette v3 est utile dans une application v3 existante, mais ne doit pas être présentée comme l’implémentation Spectrum la plus récente. Avant de choisir une génération pour une nouvelle adoption, consultez la référence de migration liée. La différence pratique se voit dans le code. La v3 transmet size-300 via les propriétés de style et fournit defaultTheme à Provider. Le guide de migration transpose ces conventions dans un système de style différent API. Remplacer uniquement le nom du package ne suffit pas à migrer l’exemple ; les imports des composants, le style et les propriétés prises en charge doivent être examinés ensemble. Consultez la spécification associée ## Le Provider du système de design Adobe Spectrum coordonne l’apparence, l’échelle et la langue ### Une racine, plusieurs paramètres indépendants Provider établit l’environnement utilisé par le tableau, le sélecteur et le bouton. L’objet de thème regroupe les définitions du jeu de couleurs et de l’échelle. colorScheme peut remplacer la préférence du système d’exploitation, tandis que scale tient compte des caractéristiques des périphériques de saisie. Ces paramètres sont distincts : une interface sombre sur ordinateur n’exige pas de grandes cibles tactiles, et un écran tactile clair ne doit pas hériter par inadvertance d’une mise en page dense prévue pour la souris. En production, laissez l’échelle se régler automatiquement. Dans une étude de composants, choisir explicitement medium ou large peut aider à comparer les contrôles, mais il faut présenter ce choix comme un paramètre d’inspection. locale définit le contexte linguistique, mais ne traduit pas les données de votre projet. Les noms de campagne, les notes de révision et les libellés de configuration restent du contenu applicatif. Consultez la spécification associée ## Système de design Adobe Spectrum : utilisez les dimensions prises en charge et les propriétés de mise en page externes ### Une échelle nommée ne se résume pas à une valeur en pixels La correspondance de base est size-100 pour 8, size-200 pour 16 et size-300 pour 24. Le tableau de référence comprend d’autres valeurs utiles. Une dimension size-* peut s’adapter à l’échelle de la plateforme ; une valeur static-size-* reste volontairement fixe. Tenez compte de cette distinction pour dimensionner un inspecteur ou une cible d’interaction. Reprendre toutes les valeurs résolues sur ordinateur dans CSS supprimerait l’adaptation fournie par l’environnement des composants. Flex et View confèrent à l’exemple une structure externe stable sans réécrire les éléments internes de TableView. Le tableau peut s’agrandir avec flex et rétrécir avec minWidth={0} ; l’inspecteur s’empile à la taille de base et adopte une largeur limitée au point de rupture tablette défini explicitement. Le padding doit être appliqué au View qui gère la surface. La documentation déconseille de remplacer les couleurs, bordures et styles typographiques internes au moyen de mécanismes de contournement non sûrs. Consultez la spécification associée ## Système de design Adobe Spectrum : laissez le thème gérer les couleurs natives et la typographie ### Distinguez la palette de l’exemple de la spécification des jetons L’aperçu présente un fond gris sobre, des contrôles neutres et des illustrations originales colorées. Ces couleurs d’illustration ne sont pas des valeurs certifiées de jetons Spectrum. Dans l’exemple natif, l’apparence des composants pris en charge provient de defaultTheme. Pour une surface native personnalisée, utilisez les valeurs backgroundColor documentées au lieu de supposer qu’une même valeur hexadécimale convient aux deux jeux de couleurs. Heading fournit une structure sémantique ainsi qu’une présentation Spectrum dans son contexte. Le titre de la page utilise level={1} ; Text affiche du contenu courant, comme le nombre d’éléments sélectionnés. L’aperçu personnalisé HTML utilise une police de système choisie par l’application, avec une police de remplacement, ainsi que des tailles de texte définies par l’application. Il illustre le flux de travail et la hiérarchie relative ; il ne prétend pas que la police environnante de OpenDesign ou la typographie de ses illustrations corresponde aux spécifications typographiques de Spectrum. Consultez la spécification associée ## Système de design Adobe Spectrum : un tableau de collection repose sur des clés, des colonnes et une sémantique de sélection ### La sélection est un contrat de données Le tableau est composé de TableHeader et Column, ainsi que de TableBody, Row et Cell. Chaque élément créatif possède un id stable. selectedKeys et onSelectionChange permettent de contrôler la sélection ; l’inspecteur d’exportation peut ainsi calculer le nombre d’éléments à partir du même état. Un utilisateur peut renommer un élément sans en changer l’identité. Utiliser la position de la ligne comme identifiant rendrait la sélection fragile après un réordonnancement. La sélection peut prendre la valeur sentinelle all. Le code d’initialisation la résout en l’ensemble des éléments créatifs actuels avant de créer une configuration. Un Set vide reste valide, car le lot est facultatif ; disallowEmptySelection n’est volontairement pas activé. Dans une application distante ou paginée, définissez ce que signifie all pour cette source de données au lieu de supposer sans vérification que les lignes affichées constituent toute la collection. - Identité de l’élément créatif : clé stable utilisée par la collection. - Inspection : illustration affichée en plus grand dans l’exemple autonome. - Sélection du lot : clés incluses dans la configuration préparée. Consultez la spécification associée ## Adobe Spectrum Le sélecteur de système de design et le bouton complètent l’inspecteur d’exportation ### Le format est géré indépendamment du lot Le sélecteur utilise un libellé visible et des clés Item stables. selectedKey vaut png ou jpeg ; onSelectionChange fournit la clé sélectionnée. Cette approche diffère de la lecture de event.target.value dans une liste native. Le format reste sélectionné lorsque le lot est effacé, ce qui permet de modifier la sélection sans recréer de préréglage. Le bouton utilise onPress pour l’activation et isDisabled lorsqu’aucun élément n’est sélectionné. L’exemple natif sérialise les identifiants et le format dans une recette locale. Il ne transforme pas les données d’image, ne génère pas de véritable fichier d’exportation et ne contacte aucun service de ressources. Cette limite d’implémentation est utile : l’action et ses paramètres sont concrets, même si le moteur de conversion ne fait pas partie du système de design. Consultez la spécification associée ## Système de design Adobe Spectrum Adaptez la composition au lieu de comprimer l’illustration ### Définissez le contrat des points de rupture Cet exemple définit tablet:640 et desktop:1024. Ce choix est explicite, car la page Provider présente actuellement des valeurs par défaut incohérentes entre le texte explicatif et les métadonnées API générées. Les valeurs adaptatives font référence à ces clés précises. L’inspecteur occupe toute la largeur à la base, puis se place à côté du tableau flexible. Ces points de rupture relèvent de l’application ; ils ne constituent pas une nouvelle norme universelle de Spectrum. L’illustration autonome utilise une grande zone de travail, un inspecteur latéral et un bandeau de miniatures. Sur petit écran, l’inspecteur reprend le flux normal et l’illustration conserve ses proportions. Les informations comme les dimensions et le format sont affichées à l’extérieur de l’illustration : elles restent ainsi lisibles sans modifier l’œuvre inspectée. Consultez la spécification associée ## Système de design Adobe Spectrum Inspecter, sélectionner et préparer sont des actions distinctes ### Rendez la démonstration testable Cliquer sur une miniature modifie la grande illustration et ses métadonnées descriptives. Une case à cocher modifie le lot d’exportation. En gardant ces actions indépendantes, il est possible d’inspecter un élément non sélectionné sans l’inclure involontairement dans l’exportation. L’aperçu indique le nombre d’éléments sélectionnés et conserve le format lorsque l’utilisateur modifie le lot. Le TableView natif fournit ses propres interactions de collection ; l’exemple HTML utilise des boutons et des cases à cocher ordinaires et ne prétend pas reproduire l’intégralité du modèle de navigation au clavier de la grille. Les deux solutions permettent d’effectuer au clavier les actions présentées. Le résultat de la recette est affiché sous forme de texte, et non uniquement comme un effet visuel temporaire : l’utilisateur peut donc vérifier précisément les identifiants et le format préparés. Consultez la spécification associée ## Système de design Adobe Spectrum Intégrez d’abord la base native avant de faire évoluer l’outil ### Connectez un véritable service d’exportation à une limite clairement définie Installez la suite v3 dans une application React existante, puis utilisez l’exemple complet ci-dessous. Il comprend le fournisseur, les imports, les données de collection, l’état de sélection, l’état du format et l’état du résultat. Dans une intégration en production, remplacez la préparation de la recette par une requête d’exportation et affichez le résultat confirmé pour chaque élément. Ne renommez pas la réponse locale « Exportation terminée » tant que ce service n’existe pas. Lors de la migration vers Spectrum 2, utilisez les correspondances d’Adobe pour les dimensions, les points de rupture et les modifications de composants. Vérifiez à nouveau le comportement de sélection et la persistance du format : un tableau visuellement similaire peut tout de même présenter un contrat différent. Indiquez explicitement la génération source afin que les personnes qui contribueront par la suite ne combinent pas un Provider v3 avec des exemples incompatibles. 1. Sélectionnez un élément et vérifiez que son identifiant apparaît dans la recette locale. 2. Sélectionnez tout, remplacez PNG par JPEG et examinez l’ensemble complet des éléments sélectionnés. 3. Effacez la sélection et vérifiez que l’action est désactivée tandis que le format reste sélectionné. 4. Réduisez la largeur de la fenêtre et vérifiez que les actions d’inspection, de sélection et de génération de la recette restent accessibles. Consultez la spécification associée ## Adobe Spectrum Exemples de composants du système de design ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation originale de HTML/CSS du flux de travail d’inspection et de collection v3 documenté. La palette et les illustrations sont données à titre indicatif ; aucun environnement d’exécution Spectrum natif ni aucune conversion d’image ne sont inclus. ``` Spectrum asset inspector study
Campaign library / Autumn collection
Campaign master1600 × 1200

Original artwork · illustrative preview

``` Référence du code - L’illustration est un contenu d’exemple original. La préparation d’une recette produit des métadonnées de sélection, et non des fichiers image convertis ; ce document ne charge ni Spectrum v3 ni Spectrum 2. ### Entrée complète de l’implémentation native L’implémentation complète présentée dans la configuration, réunie ici avec les explications ciblées sur API. Suivez les prérequis documentés concernant les packages et la compilation dans la section de configuration. ``` // 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(); ``` Référence du code - Exemple complet de collection et d’inspecteur v3 pour une application React existante. Il crée une recette d’exportation dans l’état local, et non des fichiers image. Conservez la version résolue du package dans le fichier de verrouillage et ne combinez pas cette entrée avec des imports de Spectrum 2. ### La sélection peut prendre la valeur all, et pas seulement être un Set Normalisez le contrat de collection avant de calculer le lot ou d’activer l’action. Cet extrait utilise les assets et les clés de la configuration complète. ``` const selected = keys === 'all' ? assets : assets.filter(asset => keys.has(asset.id)); ``` Référence du code - Les identifiants stables résistent au tri et au renommage. - Un lot vide désactive uniquement l’action de création de la recette ; il n’efface pas le format actuel. ### Inspecteur adaptatif avec noms de points de rupture explicites Utilisez les mêmes clés dans Provider et dans les propriétés adaptatives. Les valeurs numériques correspondent à une configuration d’application délibérée. ``` Asset table Export inspector ``` Référence du code - Le texte de référence de Provider et le tableau des valeurs par défaut générées sont en désaccord sur les points de rupture par défaut ; une configuration explicite lève toute ambiguïté. - Les marges logiques marginStart et marginEnd s’adaptent mieux que les marges physiques gauche et droite. ## Adobe Spectrum Configuration de l’agent du système de design ### Point de départ de l’implémentation Exemple complet de collection et d’inspecteur v3 pour une application React existante. Il crée une recette d’exportation dans l’état local, et non des fichiers image. Conservez la version résolue du package dans le fichier de verrouillage et ne combinez pas cette entrée avec des imports 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(); ``` ### Un prompt pour votre projet ``` Utilisez @adobe/react-spectrum v3 avec Provider et defaultTheme. Créez le TableView avec clés et l’inspecteur d’exportation fournis, à l’aide de Picker, Item, Flex, View et Button. Gérez la sélection sous forme de Set ou de all, conservez le format lorsque la sélection change et appelez le résultat une recette locale jusqu’à la connexion d’un véritable service de conversion. Utilisez les clés explicites tablet/desktop pour les points de rupture et les propriétés de style prises en charge. Séparez les API de v3 de celles de Spectrum 2. ``` ## Adobe Spectrum Sources et périmètre du système de design Étude d’implémentation de OpenDesign basée sur la documentation maintenue de React Spectrum v3, avec @adobe/react-spectrum. Spectrum 2 est également disponible et possède des API différentes ; cette page ne présente pas la v3 comme l’implémentation la plus récente. L’aperçu autonome du tableau de ressources est une interprétation originale de HTML/CSS, avec une illustration à titre indicatif et des couleurs choisies par l’application ; il ne s’agit ni d’un composant Spectrum natif ni d’un éditeur d’images avec gestion des couleurs. - Fournisseur Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. - styles Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. - thèmes Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. - TableView Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. - Picker Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. - Heading Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. - Button Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. - migration Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici. ## Ressources associées au système de design Adobe Spectrum ### Alaska Airlines Auro Explorez le thème Alaska d’Auro à travers de véritables jetons sémantiques de couleur et de typographie, une typographie fondée sur des classes et le composant de vol natif. Deux vols fictifs d’origine illustrent le filtrage et la sélection locaux sans représenter l’inventaire ni les réservations d’une compagnie aérienne. ### Arco Design Créez un sélecteur de sections de rapport avec le composant Transfer contrôlé d’Arco. Découvrez ses véritables échelles d’espacement et de taille, ses conventions de variables CSS, ses surfaces sémantiques et la différence entre sélectionner des lignes et les déplacer. ### Atlassian système de design Créez un tableau de planification des tickets avec les jetons sémantiques Atlassian, une échelle d’espacement de huit pixels, les véritables API de Button, Lozenge et Toggle, ainsi que la configuration de style Compiled requise. Consultez un ticket, filtrez le tableau et déplacez un élément de travail local sans confondre sélection et statut. - [Référence de mise en œuvre](https://react-spectrum.adobe.com/v3/TableView.html) - [Source](https://react-spectrum.adobe.com/v3/Provider.html) - [Source](https://react-spectrum.adobe.com/migrating) - [Source](https://react-spectrum.adobe.com/v3/styling.html) - [Source](https://react-spectrum.adobe.com/v3/TableView.html) - [Source](https://react-spectrum.adobe.com/v3/Picker.html) - [Consultez la spécification associée](https://react-spectrum.adobe.com/migrating) - [Consultez la spécification associée](https://react-spectrum.adobe.com/v3/theming.html) - [Consultez la spécification associée](https://react-spectrum.adobe.com/v3/styling.html) - [Consultez la spécification associée](https://react-spectrum.adobe.com/v3/Heading.html) - [Consultez la spécification associée](https://react-spectrum.adobe.com/v3/TableView.html) - [Consultez la spécification associée](https://react-spectrum.adobe.com/v3/Picker.html) - [Consultez la spécification associée](https://react-spectrum.adobe.com/v3/Provider.html) - [Référence du code](https://react-spectrum.adobe.com/v3/TableView.html) - [Référence du code](https://react-spectrum.adobe.com/v3/Provider.html) - [Fournisseur Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/v3/Provider.html) - [styles Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/v3/styling.html) - [thèmes Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/v3/theming.html) - [TableView Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/v3/TableView.html) - [Picker Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/v3/Picker.html) - [Heading Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/v3/Heading.html) - [Button Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/v3/Button.html) - [migration Référence officielle de React Spectrum pour l’implémentation et les contraintes présentées ici.](https://react-spectrum.adobe.com/migrating)