Code Snippet Editor et Tokens Studio

J’ai testé Code snippet Editor et l’export JSON de variables via Tokens Studio. Idéalement, j’aurais aimé tester via l’API REST de Figma mais malheureusement cette option n’est disponible que depuis l’abonnement entreprise. Aussi, je me suis tourné vers Tokens Studio dans sa version gratuite. Là encore, je n’ai pu utiliser que l’export simple (fichier JSON unique, contrairement à la version premium qui elle permet l’export multi-fichier) mais suffisant pour me familiariser avec les flux opératoires.

Code Snippet Editor

Ce plugin permet de générer des morceaux de code dynamique dans divers langages, (HTML, CSS, Go, Javascript, Typescript, Python, etc.) via des paramètres (déjà fournis et à adapter à ses propres propriétés).

Pour mon besoin simple, je suis parti d’un bouton d’une librairie personnelle que je souhaitais convertir en HTML. Ainsi avec un unique snippet bien configuré je peux générer un code HTML dynamique pour chaque propriété d’un composant (ex: button-size-xs, button-size-sm, button-size-lg, etc.)

Snippet HTML avec les propriétés du composant bouton

<button\
{{?property.state=disabled}}disabled\type="button"
class="\\
button\
{{?property.type}}button-type-{{property.type}}\
{{?property.variant}}button-variant-{{property.variant}}\
{{?property.size}}button-size-{{property.size}}\
{{?property.icon=left|property.icon=right}}button-icon-{{property.icon}}\
\">
    Label Button
</button>

Code généré en HTML

<button class="button button-type-primary button-variant-bold button-size-normal">
    Label Button
</button>

Tokens Studio

Ce plugin permet de créer des Tokens, de les organiser et de les synchroniser de manière bidirectionnelle (depuis figma ou depuis GitHub, GitLab, etc.)

Maintenant que la structure HTML et les Class sont définies, je peux m’atteler aux styles CSS. Via Tokens Studio, je pousse ma librairie de styles et tokens au format JSON sur GitHub et je les récupère sur mon dépôt local dans un fichier _variables.scss (ce dernier fichier a été généré grâce à Style Dictionary).

Test des variables et du code html

En suivant une convention de nommage stricte dans Figma il est ensuite plus aisé de faire appel aux variables dans nos fichiers scss ou css. Pour la génération du code html on fait appel au snippet html des boutons et on peut rapidement créer sa bibliothèque de boutons dans différents types et variantes

Exemple d’un document html avec les différents types et variantes de boutons

CSS & variables/tokens

button{
    border-radius: $global-size-0;
    border: none;
    font-weight: 600;
    &.button-size-xs{
        padding: $components-buttons-size-spacing-y-xs $components-buttons-size-spacing-x-xs;
        font-size: 0.75rem;
        line-height: 1.125rem;
    }
    &.button-size-sm{
        padding: $components-buttons-size-spacing-y-sm $components-buttons-size-spacing-x-sm;
        font-size: 0.75rem;
        line-height: 1.125rem;
    }
    &.button-size-normal{
        padding: $components-buttons-size-spacing-y-normal $components-buttons-size-spacing-x-normal;
        font-size: 0.875rem;
        line-height: 1.5rem;
    }
    &.button-size-lg{
        padding: $components-buttons-size-spacing-y-lg $components-buttons-size-spacing-x-lg;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    &.button-type-primary {
        color: $components-buttons-color-text-primary-default;
        &.button-variant-bold{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: $components-buttons-color-background-primary-default;
            }
        }
        &.button-variant-subtle{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: $components-buttons-color-background-primary-subtle-default;
                border: 1px solid $components-buttons-color-border-primary-subtle-default;
            }  
        }
        &.button-variant-minimal{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: transparent;
            }  
        }
    }
    &.button-type-secondary {
        color: $components-buttons-color-text-secondary-default;
        &.button-variant-bold{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: $components-buttons-color-background-secondary-default;
            }
        }
        &.button-variant-subtle{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: $components-buttons-color-background-secondary-subtle-default;
                border: 1px solid $color-border-neutral-subtle;
            }  
        }
        &.button-variant-minimal{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: transparent;
            }  
        }
    }
    &.button-type-inverse {
        &.button-variant-bold{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: $color-background-neutral-primary-default;
                color: $components-buttons-color-text-secondary-default;
            }
        }
        &.button-variant-subtle{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: $color-background-neutral-primary-default-95;
                border: 1px solid $color-border-neutral-inverse;
                color: $color-text-neutral-inverse-default;
            }  
        }
        &.button-variant-minimal{
            &.button-size-xs,&.button-size-sm,&.button-size-normal,&.button-size-lg{
                background-color: transparent;
                color: $color-text-neutral-inverse-default;
            }  
        }
    }
}

Exercice très intéressant qui vient confirmer le bond en avant quant à la manière de travailler en mode collaboratif avec des outils puissants. Maintenant designers et développeurs n’ont plus aucune raison d’entrer en dur des valeurs propres à des variables ou non.