Édition visuelle et aperçu

L’édition visuelle fonctionne directement dans la Visionneuse d'App. Utilisez la barre d’outils sous l’aperçu pour sélectionner des éléments, modifier le texte, remplacer des images, appliquer un thème et prévisualiser vos modifications avant la publication.

Utilisez Select element pour les modifications assistées par l’IA, Edit Text pour les modifications directes du texte, et Theme pour les styles globaux tels que les couleurs, les polices et les effets.

Fonctionnement de l’édition visuelle

Lorsque les agents IA terminent une tâche, la Visionneuse d'App apparaît en haut du projet. La barre d’outils d’édition visuelle se trouve sous l’aperçu.

• Select element vous permet de sélectionner un ou plusieurs éléments et de demander aux agents de les modifier.
• Edit Text vous permet de modifier le texte directement dans l’aperçu.
• Theme ouvre les contrôles du thème pour les styles globaux.

La barre d’outils peut être réduite lorsque vous n’en avez pas besoin.

Avant de commencer

Avant de commencer à modifier, assurez-vous que :

• votre projet dispose d’un build terminé. Les outils d’édition visuelle sont disponibles depuis la Visionneuse d'App une fois que les agents ont terminé une tâche.
• vous savez que les modifications ne sont pas en ligne tant que vous ne publiez pas. Votre URL publique n’est pas affectée tant que vous ne publiez pas la version mise à jour.
• vous savez qu’un thème n’affecte que les styles partagés. Les éléments construits avec des valeurs fixes conservent leur ancien aspect après un changement de thème. Voir Si un thème ne s’affiche pas correctement ci-dessous.

Définir des styles globaux avec Theme

Un thème est le système de design de votre projet. Il définit des variables globales — palettes, typographie et espacement — qui s’appliquent à toute votre app, plutôt que des réglages sur un seul élément.

Theme s’utilise de préférence pendant l’étape de préparation, avant de commencer à construire. En appliquer un tôt signifie que tout ce que les agents génèrent le suit dès le départ.

Choisir un thème

Sélectionnez Theme dans la barre d’outils sous la Visionneuse d'App. Le panneau Theme comprend un champ Search Themes et regroupe les thèmes en sections :

• Current Theme — ce que votre projet utilise actuellement. Avant que vous n’appliquiez quoi que ce soit, il affiche No theme applied yet, et le bouton + à côté crée un nouveau thème.
• Featured Theme — 15 préréglages sélectionnés par des designers. Chacun est affiché comme un aperçu d’une page construite avec ce thème, avec son nom et une rangée d’échantillons montrant sa palette. Ils ne peuvent pas être supprimés.
• Your Theme — les thèmes que vous avez créés ou personnalisés. Ils peuvent être renommés et supprimés.

Chaque thème apparaît comme un aperçu d’une page construite avec lui, avec son nom et une rangée d’échantillons montrant sa palette, afin que vous puissiez évaluer la direction avant de l’appliquer.

L’onglet Theme, avec un thème appliqué en haut et vos thèmes enregistrés en dessous.

Pour en appliquer un :

1. Sélectionnez le thème souhaité.
2. Atoms demande "Do you want to apply theme name?"
3. Sélectionnez Apply pour confirmer, ou Cancel pour revenir en arrière.
4. Vérifiez l’aperçu.

Résultat attendu : l’aperçu se met à jour avec le thème choisi, et celui-ci apparaît maintenant sous Current Theme.

Remarque : Si vous avez des modifications de texte ou d’image non enregistrées, Atoms vous demande de les enregistrer ou de les ignorer avant d’appliquer un nouveau thème.

Mettre à jour un thème appliqué

Un point sur l’onglet Theme signifie qu’une version plus récente de votre thème appliqué est disponible.

Pour l’utiliser, sélectionnez Update sur votre thème actuel et confirmez Do you want to re-apply theme name? Votre projet utilisera alors la version plus récente.

Vous n’êtes pas obligé de le mettre à jour. Si vous ne le faites pas, votre projet continue d’utiliser la version que vous avez appliquée.

Remarque : Remarque : si votre app ne ressemble pas au thème que vous avez sélectionné, certains éléments peuvent avoir des styles qui remplacent le thème. Ces remplacements ciblent un contenu spécifique et subsistent après un changement de thème.

Créer ou modifier un thème dans Theme Manager

Sélectionnez + à côté de Current Theme pour en créer un à partir de zéro, ou ouvrez un thème existant pour le modifier. Dans les deux cas, cela ouvre Theme Manager, où vous affinez un thème avec un aperçu en direct.

Ses réglages sont répartis sur trois onglets :

• Color — les rôles de couleur utilisés par votre app, regroupés par usage : Base Colors, Card, Popover, Primary, Secondary, et plus encore. Chaque rôle a sa propre valeur, donc modifier Primary affecte chaque élément qui l’utilise.
• Fonts — vos polices Serif, Sans-serif et Mono.
• Effects — le Radius des coins, et une Shadow que vous contrôlez par la couleur, l’opacité, le flou, l’étalement et le décalage.

L’aperçu à côté est construit à partir de composants réels — formulaires de connexion, boutons, champs de saisie, texte courant et monospace — afin que vous puissiez évaluer immédiatement une modification au lieu de la deviner. Utilisez le basculeur clair/sombre en dessous pour vérifier les deux, car une palette qui fonctionne sur des surfaces claires peut perdre en contraste sur des surfaces sombres.

Sous l’aperçu, vous disposez aussi de Undo et Redo pour parcourir vos modifications, ainsi que de Reset pour ramener le thème à son état initial.

Theme Manager. L’aperçu se met à jour lorsque vous modifiez une valeur, et les contrôles en dessous couvrent l’annulation, le rétablissement, l’exportation, l’importation et la réinitialisation.

Enregistrer un thème

1. Sélectionnez Save.
2. Donnez-lui un Theme Name, ou conservez celui proposé.
3. Sélectionnez Save pour confirmer.

Résultat attendu : votre thème apparaît sous My Theme dans l’onglet Theme, avec sa palette affichée sous forme d’échantillons. Appliquez-le de la même manière que n’importe quel autre thème.

Remarque : Les modifications ne sont pas conservées tant que vous ne les enregistrez pas. Atoms vous arrêtera et vous proposera d’enregistrer ou d’ignorer si vous essayez d’appliquer un thème différent alors que des modifications non enregistrées sont encore en attente.

Réutiliser un thème dans plusieurs projets

Theme Manager propose Export et Import sous l’aperçu. Exportez un thème dans un fichier, puis importez-le dans un autre projet pour réutiliser la même direction de design, ou transmettez-le à un coéquipier afin que son projet corresponde au vôtre.

Si un thème ne s’affiche pas correctement

L’application d’un thème n’est pas une vérification de compatibilité, elle n’échoue donc normalement pas. Un thème remplace les valeurs de style partagées sur lesquelles votre app est construite, ce qui signifie que n’importe quel thème du sélecteur peut généralement être appliqué à n’importe quel projet.

Ce que vous pouvez voir à la place, c’est un thème qui s’applique correctement mais n’affecte pas tout. Il n’y a pas de message d’erreur pour cela — cela semble simplement incorrect.

Une partie de votre app conserve son ancien aspect. C’est le problème le plus courant. Un élément auquel une valeur fixe a été attribuée, une couleur spécifique ou une police définie directement sur lui, plutôt qu’un des styles partagés de votre app — ne peut pas être affecté par un changement de thème, il conserve donc son apparence précédente et peut jurer avec tout ce qui l’entoure. Sélectionnez l’élément concerné et décrivez la modification dans le chat du projet.

Le texte devient difficile à lire. Un thème sombre appliqué à une mise en page conçue pour des surfaces claires peut laisser le texte avec trop peu de contraste. Ajustez les éléments concernés dans l’Éditeur visuel, ou choisissez un thème plus proche de votre design existant.

Atoms vous indique que le thème ne peut pas être appliqué. C’est rare, et cela signifie que l’interface de votre projet n’a pas été construite sur le système de thèmes Atoms. Utilisez plutôt l’Éditeur visuel — tout reste possible élément par élément.

Important : Choisissez un thème tôt lorsque c’est possible. Lorsque les agents construisent avec un thème déjà appliqué, ils utilisent ses styles partagés dès le départ, de sorte que moins d’éléments finissent avec des valeurs fixes qu’un changement de thème ultérieur ne peut pas affecter.

Modifier des éléments avec l’Éditeur visuel

1. Survolez la barre d’outils d’édition visuelle et sélectionnez Select element.
2. La barre d’outils affiche Click to select, Ctrl/Cmd + Click for multiple.
3. Sélectionnez un élément dans l’aperçu. Pour sélectionner plusieurs éléments, maintenez Ctrl sous Windows ou Cmd sur Mac pendant la sélection.
4. Vos sélections sont jointes au chat du projet. La barre d’outils affiche le nombre sélectionné, par exemple Edit 1 selection in chat window.
5. Décrivez la modification souhaitée dans le chat du projet et envoyez votre message.
6. Sélectionnez à nouveau Select element pour quitter le mode sélection.

Utilisez le chat du projet pour des modifications telles que la mise en page, les couleurs, l’espacement, le style ou des changements affectant plusieurs éléments sélectionnés.

Modifier le texte directement

1. Sélectionnez Edit Text dans la barre d’outils sous la Visionneuse d'App.
2. Lorsque Click text content to edit apparaît, sélectionnez le texte que vous souhaitez modifier.
3. Modifiez le texte directement dans l’aperçu.
4. Vous pouvez modifier plusieurs éléments de texte avant d’enregistrer. La barre d’outils affiche le nombre de modifications en attente, par exemple 1 text change ou 2 text changes.
5. Sélectionnez Save pour conserver toutes les modifications de texte en attente, ou Discard pour les supprimer.

Vous pouvez aussi double-cliquer sur le texte tout en utilisant Select element pour commencer à le modifier directement.

Enregistrer ou ignorer vos modifications

Les modifications directes de texte et d’image ne sont pas appliquées tant que vous ne les enregistrez pas. Lorsque des modifications sont en attente, la barre d’outils affiche leur nombre avec Discard et Save.

• Save applique toutes les modifications directes en attente.
• Discard supprime les modifications en attente et remet les éléments concernés dans leur état précédent.

Si vous essayez de quitter le mode édition avec des modifications en attente, Atoms affiche :

Modifications non enregistrées

Vous avez des modifications non enregistrées. Veuillez enregistrer ou ignorer les modifications avant de quitter le mode édition.

Sélectionnez Cancel pour continuer à modifier ou Discard pour quitter sans conserver les modifications.

L’enregistrement met à jour le projet de travail. Il ne met pas à jour le site en ligne tant que vous ne publiez pas.

Remplacer une image

1. Passez en mode Select element.
2. Sélectionnez l’image que vous souhaitez remplacer.
3. Choisissez une image dans la bibliothèque d’images, ou utilisez le contrôle d’upload sur l’image sélectionnée.
4. Vérifiez le remplacement dans l’aperçu.
5. Sélectionnez Save pour appliquer le changement d’image, ou Discard pour le supprimer.

Si vous saisissez également une instruction dans le chat du projet, le remplacement d’image et l’instruction du chat peuvent être envoyés ensemble.

L’onglet Library avec des catégories d’images et Popular Images.

D’où viennent les images

Image est la collection intégrée. Utilisez Search assets pour quelque chose de spécifique, ou parcourez une catégorie — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings et People, avec More tags pour le reste. Sélectionner une catégorie l’ouvre ; utilisez la flèche de retour pour revenir. Popular Images en dessous affiche une sélection générale. Survolez une image et sélectionnez Use asset pour l’appliquer.

Generate crée une nouvelle image à partir d’une description, et nécessite un forfait Pro ou Max. Saisissez ce que vous voulez sous Describe the image you want to generate et sélectionnez Generate. Les résultats apparaissent sous le champ. Sélectionnez une miniature terminée pour l’appliquer à votre élément.

Upload ajoute votre propre fichier par glisser-déposer, collage ou clic. Les images peuvent être aux formats JPEG, PNG, GIF, BMP, TIFF ou WEBP, jusqu’à 4 Mo. Les images importées apparaissent sous la zone de dépôt — sélectionnez-en une pour l’appliquer.

Remarque : Use asset apparaît uniquement sur les images intégrées. Les images que vous générez ou importez s’appliquent à la place en sélectionnant leur miniature.

Décrire les modifications dans le chat

Après avoir sélectionné un ou plusieurs éléments avec Select element, décrivez le résultat souhaité dans le chat du projet.

Par exemple :

• "Rendez cette section plus apaisante, avec plus d’espace blanc et un titre plus petit."
• "Faites correspondre le style de ces boutons à celui de la page des tarifs."

Soyez précis sur le résultat attendu. Des instructions telles que "make it look better" peuvent produire des résultats imprévisibles

Prévisualiser vos modifications

Utilisez la barre d’outils au-dessus de l’aperçu :

• Device view — basculez entre les tailles d’écran pour tester la réactivité. Les changements de thème et de typographie qui semblent corrects sur desktop se cassent souvent sur mobile, alors vérifiez toujours le mobile avant de publier.
• Page selector — naviguez entre les pages de votre app.
• Refresh — rechargez l’aperçu s’il semble obsolète.
• Open in a new tab — affichez l’app en pleine largeur dans un onglet de navigateur séparé.
• Console — ouvrez le panneau de journal lorsqu’un problème semble présent.

Résultat attendu : vos modifications sont visibles sur chaque page et à chaque largeur d’appareil que vous souhaitez prendre en charge.

Résoudre un problème d’aperçu

Si l’aperçu semble obsolète, continue à charger ou affiche des erreurs en rouge, le problème peut venir de la Visionneuse d'App plutôt que de vos modifications visuelles. Consultez Résolution des problèmes de build et d’aperçu pour les étapes de dépannage — Refresh, le panneau Console, Resolve, et comment signaler une erreur persistante.

Si vos modifications directes de texte ou d’image semblent avoir disparu, vérifiez si vous les avez enregistrées. Les modifications non enregistrées peuvent être ignorées lorsque vous quittez le mode édition — voir Enregistrer ou ignorer vos modifications.

Publier vos modifications

Les modifications visuelles restent dans votre projet de travail jusqu’à ce que vous les publiiez. Sélectionnez Publish en haut à droite, ou Update si le projet est déjà en ligne.

Remarque : Si votre projet utilise Specify Version plutôt que Always Latest, le site en ligne reste verrouillé sur la version choisie, et vos modifications de design n’apparaîtront pas publiquement tant que vous ne publierez pas une nouvelle version.

Pour les erreurs signalées par les agents pendant un build, consultez Signaler un problème.