Skip to main content
Votre marque vit dans un dossier Drive, un fichier Figma ou un design que vous aimez déjà. Transformez-la en un design system enregistré dans votre espace de travail : des couleurs par rôle, une échelle typographique, des tokens et quelques composants d’exemple. Les nouveaux travaux démarrent alors aux couleurs de votre marque, et vous pouvez reconstruire vos applications existantes sous le même système. Appliquer un système à une application déjà livrée est une vraie reconstruction, pas un simple changement de feuille de style.

​
Idéal pour

  • Les product designers qui ont besoin d’une source de vérité unique avant de concevoir les cinq prochaines pages.
  • Les fondateurs dont les applications ont fini par diverger et qui veulent les remettre toutes dans la même apparence.

​
Connecteurs

​
Avant de commencer

Rassemblez tout ce qui définit votre marque, où que cela se trouve aujourd’hui : fichiers de marque, un design que vous aimez déjà, votre site web ou un fichier Figma. Connectez Drive si votre logo, vos couleurs ou votre typographie y sont stockés. Ayez à portée de main une URL Figma, une URL de site ou un fichier DESIGN.md existant si vous en avez un.

​
Donner le prompt à l’agent

​
À quoi s’attendre

Agent transforme la source que vous lui avez donnée en guide de style vivant : vos couleurs avec un rôle pour chacune, une échelle typographique, les tokens auxquels le reste du système fait référence, deux ou trois composants d’exemple et les éléments de marque que vous avez fournis. Examinez-le, puis sélectionnez Save design system pour le conserver dans votre espace de travail. À partir de là, les nouveaux travaux sont générés aux couleurs de votre marque dès le premier cadre. Pour placer une application déjà construite sous le système, sélectionnez la cible et appliquez le système.

​
Adaptez-le à vos besoins

​
Dépannage

Pointez vers une source au lieu de la décrire. Un dossier de marque Drive, une URL Figma, un site en ligne ou un fichier DESIGN.md fonctionnent tous comme entrée.
Appliquer un système à un travail existant régénère la couche de style au lieu de remplacer une feuille de style. L’avertissement sur la durée et les crédits affiché avant le lancement est normal.
Les modifications suivantes devraient continuer à utiliser le système. Quand vous repérez une dérive, signalez-la dans le chat et nommez l’écran.
Enregistrez-le d’abord. Un guide de style non enregistré reste dans le projet où il a été généré.

​
Voir aussi

Concevoir une landing page

Mettez le système enregistré au travail sur une page de liste d’attente ou de lancement.

Refondre votre site web existant

Extrayez le système du site que vous avez déjà.