Créer et réutiliser un système de design
Transformez les références de votre marque en règles réutilisables pour les couleurs, la typographie et les composants, puis sélectionnez ce système pour un projet.
Rassembler les références qui définissent votre marque
Ouvrez Design systems (Systèmes de design) dans la barre latérale de Home (Accueil), puis choisissez Create (Créer). Ajoutez des sources avant la génération : un lien vers un site Web ou GitHub, une référence de marque, des fichiers ou une description écrite. L’écran de création accepte des fichiers d’une taille maximale de 12 MB chacun. Utilisez des références que vous êtes autorisé à fournir au service sélectionné.
Collez DESIGN.md si vous disposez déjà de règles de design écrites. Vous pouvez également copier un système de design existant comme point de départ. Indiquez ce qui doit rester inchangé, comme les couleurs de la marque, la typographie, l’espacement autour du logo ou le comportement des composants.
Utiliser du code ou Figma comme référence
Développez Advanced (Avancé) pour ajouter un dépôt GitHub, du code local, un fichier .fig ou l’URL d’un fichier Figma. Sélectionnez la source pertinente au lieu de charger un dossier de projet sans rapport. Conservez ensemble les ressources et les fichiers qui expliquent les composants.
Une URL Figma constitue une référence source, mais ne garantit pas que tous les fichiers privés pourront être lus. Si l’accès échoue, fournissez une copie locale .fig autorisée ou des captures d’écran claires. L’importation d’une référence Figma ne permet pas de l’exporter directement vers un fichier Figma natif.
Générer, examiner et affiner le système
- Vérifiez les références fournies et choisissez Generate (Générer). Attendez la fin de l’extraction ou de la génération avant de considérer le système comme prêt.
- Examinez les aperçus générés et le fichier DESIGN.md. Comparez les couleurs, les tailles de caractères, les espacements et les composants avec vos références ; corrigez les omissions ou les règles contradictoires.
- Enregistrez le fichier DESIGN.md modifié avec Save (Enregistrer). Si vous demandez à l’agent de réviser le système, examinez à nouveau le résultat avant de le publier.
Rédigez des exigences qu’un autre projet pourra suivre : l’usage prévu de chaque couleur, la police à employer pour les titres et le corps du texte, ainsi que le comportement attendu des boutons, des formulaires et de leurs différents états. Une simple collection de captures d’écran attrayantes ne suffit pas à définir ces règles.
Publier le système et le sélectionner pour un projet
- Une fois le système vérifié, utilisez sa commande Published (Publié). Un brouillon reste disponible pour que vous puissiez l’examiner ; publiez-le avant de vous attendre à ce que d’autres projets puissent l’utiliser.
- Revenez à Home (Accueil) ou au sélecteur de système de design du projet. Sélectionnez le système voulu et confirmez son aperçu.
- Décrivez le travail à créer et les règles importantes. Comparez l’élément généré au système, puis effectuez des révisions ciblées pour corriger les éventuelles différences.
L’enregistrement des règles, la publication d’un système et son application à un projet sont des actions distinctes. La modification d’un système de design ne prouve pas que les résultats existants ont été régénérés. Rouvrez le projet concerné et vérifiez son résultat.
Pour un workflow d’interface, poursuivez avec les prototypes. Pour apporter de petites modifications à un élément HTML existant, consultez la page sur la modification dans le canevas.
Si un système est introuvable ou en lecture seule
Vérifiez l’espace de travail actif et si le système est publié. Les ressources d’équipe et les ressources personnelles peuvent différer. La copie synchronisée d’un membre de l’équipe peut être en lecture seule ; pour modifier sa source ou son état de publication, utilisez le compte du propriétaire ou un compte disposant des autorisations requises dans l’espace de travail.
Si l’extraction échoue, vérifiez l’URL source, la taille du fichier et les droits d’accès. Supprimez une source inaccessible ou remplacez-la par une référence locale autorisée, puis réessayez. Si l’enregistrement échoue, conservez une copie de vos règles modifiées avant de quitter l’écran. La publication dans OpenDesign ne répercute pas les modifications sur GitHub.