Variables Figma pour Accélérer la Mise en Page de 50 %

Variables Figma des bibliothèques UI pour accélérer le développement frontend

Les développeurs passent jusqu’à 50 % de leur temps à décoder les spécifications de design dans Figma : termes ambigus comme flow, espacements et couleurs dupliqués, absence de lien direct avec la base de code. La solution ? Utiliser directement des variables provenant de bibliothèques UI établies (Tailwind CSS, Bootstrap, MUI) dans Figma. Cela transforme le design en un système vivant — le développement frontend devient aussi simple que l’application de classes utilitaires.

Par exemple, prenons un modal avec un titre, un sous-titre, un champ de saisie et un bouton. Sans variables, le designer voit padding: 32px, background: #F9F9F9 ; le développeur copie manuellement les codes HEX dans le code.

<div class="modal-window">
  <h1 class="modal-title">Abonnez-vous pour ne rien manquer !</h1>
  <p class="modal-subtitle">Entrez votre email ci-dessous et cliquez sur "Envoyer"</p>
  <input type="email" class="modal-input" placeholder="[email protected]" />
  <button class="modal-button">Envoyer</button>
</div>

.modal-window {
  width: 600px;
  padding: 32px;
  background: #F9F9F9;
  border: 1px solid #F2F2F2;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.modal-title {
  color: #323232;
  font-size: 20px;
  font-weight: 500;
}
/* Styles similaires pour les autres éléments */

Des styles dupliqués signifient des mises à jour manuelles dans plusieurs fichiers lorsqu’une modification est nécessaire.

Problèmes de l’approche traditionnelle

Les développeurs redéfinissent chaque composant depuis zéro :

• Nommage flou : radius au lieu de border-radius, flow au lieu de flex-direction.
• Propriétés ignorées : width est pertinent, mais height/top/left sont négligés.
• Valeurs redondantes : border 1px solid répété plusieurs fois.
• Pas d’intégration système : les valeurs du design ne sont pas liées à la bibliothèque réelle.

Avec 10 modaux, les mises à jour exigent une recherche, une décodage et une copie dans tous les fichiers. Ce travail répétitif ralentit la livraison et rend l’évolutivité difficile.

Règle : Toute valeur réutilisable doit être une variable.

Mise en œuvre des variables Tailwind CSS

Choisissez une bibliothèque comme source unique. Tailwind propose des classes utilitaires pour le padding, les couleurs et le rayon des coins.

Étape 1 : Rassembler les variables

Couleurs :

• white-100 : #FFFFFF
• white-200 : #F2F2F2
• blue-500 : #066BE8

Espacement :

• p-3 : 12px
• p-4 : 16px
• p-6 : 24px
• p-8 : 32px

Coins arrondis :

• rounded-lg : 8px
• rounded-3xl : 24px

Bordure : border : 1px

Si une valeur manque, créez-la avec une nomenclature cohérente (ex. p-9 : 36px).

Étape 2 : Importer dans Figma

Créez des groupes de variables. Après synchronisation, Figma affiche directement les valeurs sur les composants (padding, rayon, etc.).

Étape 3 : Appliquer au design

Modal : p-8, bg-white-400, border, rounded-3xl.

Champ : bg-white-100, border, rounded-lg, p-4 (16px × 12px).

Bouton : bg-blue-500, rounded-lg, p-3 (12px × 36px).

Le développeur voit p-8 bg-white-400 rounded-3xl et écrit :

<div class="p-8 bg-white-400 border rounded-3xl flex flex-col gap-6">

Pas de codes HEX. Pas de mesures. Juste des classes utilitaires propres.

Adaptation pour d'autres bibliothèques

Bootstrap :

p-3, bg-light, border, text-primary.

<div class="p-3 bg-light border border-1 rounded">
  <h5 class="text-primary">Titre</h5>
  <button class="btn btn-primary">Envoyer</button>
</div>

Material UI :

theme.spacing(4), grey.100.

import { Box, Button, TextField } from "@mui/material";

export default function Modal() {
  return (
    <Box sx={{ p: 4, backgroundColor: "grey.100", border: "1px solid", borderColor: "grey.200", borderRadius: 3, display: "flex", flexDirection: "column", gap: 3 }}>
      <TextField placeholder="Email" />
      <Button variant="contained" color="primary">Envoyer</Button>
    </Box>
  );
}

Chakra UI :

p="8", bg="gray.100".

import { Box, Button, Input } from "@chakra-ui/react";

export default function Modal() {
  return (
    <Box p="8" bg="gray.100" border="1px" borderColor="gray.200" borderRadius="3xl" display="flex" flexDirection="column" gap="6">
      <Input placeholder="Email" />
      <Button colorScheme="blue">Envoyer</Button>
    </Box>
  );
}

Variables personnalisées avec SASS/SCSS

Pour les projets sans framework, utilisez les préprocesseurs :

$white-100: #FFFFFF;
$p-8: 32px;
$rounded-3xl: 24px;

@mixin modal-base {
  padding: $p-8;
  background: $white-400;
  border: 1px solid $white-200;
  border-radius: $rounded-3xl;
}

.modal {
  @include modal-base;
  display: flex;
  flex-direction: column;
  gap: $gap-6;
}

Les mixins standardisent les composants ; les variables centralisent les valeurs.

Points clés

• Les variables basées sur des bibliothèques éliminent la duplication et l’interprétation — la vitesse de développement augmente jusqu’à 50 %.
• Figma + Tailwind/MUI : les designers appliquent les classes, les développeurs les copient.
• Évolutivité : modifier une variable met à jour tout le projet.
• Pour les devs intermédiaires et seniors : se concentrer sur les systèmes, pas sur le travail fastidieux.
• Bonus : Figma affiche les valeurs numériques des variables en temps réel.

— Editorial Team