Tutoriel vidéo : ranger et renommer les calques automatiquement
Utilisez l’onglet Tidy pour transformer un ensemble désordonné de calques Figma en un canevas et une liste de calques bien organisés. Tidy peut détecter le sens de lecture visuel de la sélection, aligner les calques sur une grille d’espacement, faire correspondre l’ordre des calques à leur position sur le canevas, renommer les frames avec des numéros séquentiels et mettre à jour le texte de pagination d’une présentation.
Préparer votre sélection
- Dans un fichier Figma Design, sélectionnez les calques à organiser.
- Vérifiez que les calques sélectionnés sont frères, avec le même parent.
- Ouvrez TinyImage et sélectionnez l’onglet Tidy.
L’état de la sélection indique combien de calques sont prêts et quel parent les contient. Tidy ne déplace et ne réordonne pas les calques situés dans un parent en Auto Layout ; sélectionnez plutôt des calques sur le canevas ou dans un frame ordinaire.
Choisir les actions Tidy
Ouvrez Actions et activez la combinaison d’options de votre choix :
Alignement sur la grille
Détecte la disposition en lignes ou en colonnes la plus marquée et aligne les calques sélectionnés en utilisant l’espacement horizontal et vertical défini dans Preferences. Tidy tolère les petits décalages et les calques de tailles différentes lorsqu’ils partagent un bord ou un centre visuel. C’est la seule action activée par défaut.
Renommage
Ajoute des numéros séquentiels selon la position de chaque calque sur le canevas. Avec le numéro de départ par défaut, 000, les calques sont nommés 000, 001, 002, et ainsi de suite.
Ordre des calques
Réordonne les calques sélectionnés dans le panneau Layers de Figma pour qu’ils correspondent à leur ordre visuel sur le canevas. Les calques sélectionnés restent regroupés en haut de la pile de calques de leur parent.
Pagination de présentation
Recherche les calques de texte correspondants dans chaque calque sélectionné et remplace leur texte par un numéro qui suit l’ordre du canevas en commençant à 1 : 1, 2, 3, et ainsi de suite. Activez Leading zero dans Preferences pour obtenir 01, 02, 03, et ainsi de suite.
Configurer les préférences de Tidy
Ouvrez Preferences pour configurer le fonctionnement des actions activées.
| Préférence | Ce qu’elle contrôle |
|---|---|
| Grid spacing | L’espacement horizontal et vertical entre les calques alignés. Les deux valent 100 px par défaut. |
| Layout | Auto détecte le sens de lecture visuel. Choisissez Rows ou Columns pour l’imposer. |
| Wrap component instances | Place les instances sélectionnées dans des frames de même taille lors de l’alignement sur la grille. |
| Pager variable | Le nom exact du calque de texte de pagination à mettre à jour. La valeur par défaut est {current}. |
| Pager number | Ajoute un zéro initial aux numéros de pagination, ce qui donne 01, 02, 03, et ainsi de suite. |
| Starting frame number | La première valeur de {n} et le nombre de chiffres utilisé par {n} et {total}. La valeur par défaut est 000. |
| Rename strategy | Remplace les noms existants, fusionne le numéro avec chaque nom ou applique un modèle personnalisé. |
Détection automatique de la disposition
La disposition Auto, utilisée par défaut, compare les bandes visuelles horizontales et verticales de votre sélection. Une liste horizontale ou une grille large est organisée en lignes, tandis qu’une liste verticale ou une grille haute est organisée en colonnes. Tidy reconnaît les calques alignés par le haut, le centre ou le bas : les légers décalages et les frames de tailles différentes restent donc naturellement regroupés.
Choisissez Rows ou Columns lorsque vous voulez imposer un ordre de lecture précis au lieu d’utiliser le sens détecté.
Stratégies de renommage
- Replace utilise le numéro séquentiel comme nom complet du calque, par exemple
000. - Merge combine le numéro et le nom existant, par exemple
000_Home. - Custom pattern associe votre propre texte à des variables de nommage facultatives. Utilisez-le pour contrôler précisément l’emplacement des numéros et des noms de calques existants.
Variables de nommage
Saisissez le texte de votre choix dans Name pattern, puis ajoutez des variables là où leurs valeurs doivent apparaître. Les variables sont facultatives : vous pouvez donc aussi appliquer le même nom fixe à tous les calques sélectionnés.
| Variable | Ce qu’elle ajoute |
|---|---|
{n} | Le numéro séquentiel dans l’ordre du canevas, complété par des zéros selon Starting frame number. |
{total} | Le nombre de calques sélectionnés, complété par des zéros jusqu’à la même largeur que {n}. |
{name} | Le nom existant du calque. |
{parent} | Le nom du calque parent commun. Pour les calques de premier niveau, il s’agit du nom de la page Figma. |
{type} | Le type de calque, par exemple Frame, Instance ou Component Set. |
{page} | Le nom de la page Figma actuelle. |
{row} | Le numéro de ligne visuelle du calque, en commençant à 1. |
{column} | Le numéro de colonne visuelle du calque, en commençant à 1. |
Par exemple, avec Starting frame number défini sur 001 :
| Modèle de nom | Exemple de résultat |
|---|---|
{n} Client Name | 001 Client Name |
Client Name {n} | Client Name 001 |
{n} {name} | 001 Home |
{n} of {total} {name} | 001 of 024 Home pour une sélection de 24 calques |
{parent} — {n} {name} | Client Screens — 001 Home |
{page} / {type} / {name} | Presentation / Frame / Home |
{n} Row {row}, Column {column} | 001 Row 1, Column 1 |
Client Name | Client Name pour chaque calque sélectionné |
Lancer Tidy
Après avoir vérifié les Actions et les Preferences, sélectionnez Tidy n Layers. TinyImage applique chaque action activée à la sélection actuelle et indique combien de calques ont été rangés.
Utilisez la commande Undo habituelle de Figma si vous voulez rétablir les positions, les noms, l’ordre des calques, les conteneurs et les numéros de pagination précédents.
Auto fonctionne mieux lorsque la sélection suggère déjà un sens de lecture visuel. Si une disposition volontairement irrégulière est détectée autrement que prévu, choisissez Rows ou Columns dans Preferences.
La police utilisée par les calques de texte de pagination correspondants doit être disponible dans Figma pour que TinyImage puisse mettre à jour leurs caractères.