Un panneau des propriétés et des annotations, maintenant dans Figma Make
Avec l'édition visuelle et les annotations, Figma Make comble le fossé entre le design et le code. Sélectionnez un élément à modifier, ajustez-le directement dans le panneau des propriétés ou rédigez des prompts contextualisés avec des annotations.
Partager Un panneau des propriétés et des annotations, maintenant dans Figma Make
Nous lançons aujourd'hui un panneau des propriétés et des annotations dans l'éditeur Figma Make. Que vous partiez de zéro ou que vous modifiiez du code existant, ces fonctionnalités vous offrent un moyen interactif et visuel d'apporter directement vos modifications.
Le panneau des propriétés propose dans Make les contrôles familiers de Figma Design, comme l'ajustement de l'espacement, de la typographie, de la mise en page, et plus encore. Et pour les modifications qui vont au-delà des propriétés visuelles, comme une interaction ou une animation, les annotations vous permettent de donner du contexte à l'agent directement dans votre design. Ainsi, pour une modification spécifique, vous pouvez ajuster les contrôles dans le panneau des propriétés, ou utiliser des annotations lorsque vous avez besoin de pointer et de prompter, le tout en restant dans un flux continu.
Remarque sur la consommation de crédits
La manipulation directe fournit à Make un objectif précis, sans passer par les recherches et les essais qu'un prompt textuel implique. Chaque modification utilise beaucoup moins de tokens et se termine plus rapidement qu'avec la description du même changement dans un prompt. Les modifications s'empilent d'abord dans le panneau de discussion, progressivement, sans utilisation de crédit, jusqu'à ce que vous les appliquiez. Une fois que vous appliquez les modifications, Make consomme des crédits et met à jour votre fichier vers une nouvelle version.
Utilisation du panneau des propriétés pour les modifications visuelles
Le panneau des propriétés est l'endroit où vous pouvez effectuer des modifications détaillées avec des contrôles visuels. Vous pouvez essayer différentes marges intérieures, tester des rayons d'angle, jouer avec les épaisseurs de police et faire glisser les éléments pour les réorganiser jusqu'à ce que le résultat vous convienne. Pour commencer, sélectionnez « Modifier » dans la barre d'outils en haut à droite, puis réalisez tous les ajustements souhaités, de la hauteur de ligne ou de l'espacement des lettres à l'opacité, l'index Z et le style de bordure. Vous pouvez également voir l'arborescence DOM complète (un panneau des calques pour votre code) pendant que vous travaillez, et sélectionner chaque instance d'un élément pour les mettre à jour ensemble au lieu de cliquer sur chaque élément.
Actuellement, les modifications avec le panneau des propriétés utilisent les tokens de couleur et de typographie déjà définis dans votre base de code. Avec Code Connect, bientôt disponible, Make établira également un lien vers vos composants Figma Design, assurant ainsi la cohérence entre le design et le code.
Les manipulations directes permettent d'ajouter chaque modification dans l'interface de prompt pour pouvoir examiner chaque changement, avant de l'accepter ou de rejeter tout ce qui ne semble pas correct. Une fois que vous êtes satisfait, Make applique les modifications et met à jour le code sous-jacent, de sorte que ce que vous construisez visuellement est effectivement ce qui est livré.
Annoter pour lier prompts et précision
Pour les modifications au-delà des propriétés visuelles, les annotations donnent à l'agent un contexte et peuvent couvrir plusieurs éléments à la fois. Elles sont précises en matière d'emplacement mais vous donnent la flexibilité d'expliquer le changement avec vos propres mots. Sélectionnez « Annoter pour l'agent » dans la barre d'outils, marquez les zones concernées directement sur le plan de travail, et décrivez ce que vous souhaitez mettre à jour, par exemple « zoome légèrement sur cette vignette quand elle est survolée », « fais apparaître ce bouton au bout de 300 ms » ou « ajoute un effet de pression subtil lorsqu'on appuie sur ce bouton ». L'agent lit ensuite le contexte exact que vous avez marqué et applique vos modifications sur tous les éléments sélectionnés dans le code.
Le panneau des propriétés et les annotations permettent de modifier le code plus précisément que la rédaction de prompts. Que vous utilisiez une manipulation directe pour modifier un élément ou des annotations pour décrire un changement et orienter spécifiquement l'agent, vous pouvez désormais concevoir dans le code avec des contrôles intuitifs et visuels. La même expérience d'édition est en cours de développement sur les calques de code, vous pourrez donc bientôt travailler de cette manière en codant directement sur le plan de travail Figma.
Le panneau des propriétés et les annotations sont en cours de déploiement et seront disponibles pour toutes les licences et tous les forfaits dans Figma Make. Les deux fonctionnalités consommeront des crédits. Attention : le panneau des propriétés ne fonctionne qu'avec les nouveaux designs Make. Les designs créés précédemment continueront d'utiliser l'ancien outil d'édition.
Visitez notre centre d'aide pour commencer. Pour d'autres idées pour tirer le meilleur parti de chaque crédit, consultez nos conseils pour utiliser les crédits Figma Make plus efficacement.
