Tutoriel vidéo Figma : Figma côté développeurs
Bienvenue dans cette vidéo où je vous propose de découvrir comment vous pouvez utiliser Figma en tant que développeur. L’objectif est de voir les points clés qu’il va falloir analyser lorsque l’on veut intégrer une maquette en HTML / CSS.
Le mode développeur
Dans les versions récentes de Figma un mode développeur a été intégré afin de vous permettre d’inspecter plus facilement une maquette. Ce mode peut être activé en cliquant sur le bouton qui se situe en haut à droite de l’interface. Une fois activé vous pourrez voir les espacements et les dimensions des éléments lorsque vous les survolez. Le contenu du panneau de droite sera aussi modifié pour afficher les informations clefs sur l’élément que vous avez sélectionné et proposera aussi des morceaux de code CSS pour vous aider (vous pouvez aussi générer du code pour le développement mobile).
Extraire les styles
La première chose à regarder dans une maquette c’est l’utilisation de styles. En effet, dans Figma les designers ont la possibilité de créer une librairie de styles prédéfinis qu’ils vont pouvoir ensuite réutiliser dans leur maquette.
- Palette de couleurs, que l’on va traduire par des variables CSS (
--color-success,--color-accent…) - Styles de texte, que l’on peut traduire en classe utilitaires (
.text-heading,.text-body…) - Styles d’ombre, que l’on peut aussi sauvegarder dans des variables (
--elevation-1,--elevation-2)
En créant ces variables et ces styles on peut s’aligner avec la manière de travailler du designer pour pouvoir suivre les évolutions plus facilement. Si le designer change la couleur associée à un élément de la palette il nous suffit de changer notre variable CSS.
Les composants
Lorsque l’on crée un design complet on va souvent avoir besoin de répéter certains éléments avec quelques variation (carte, boutons, formulaire…). Pour éviter d’avoir à faire le travail plusieurs fois et de rendre les modifications plus difficiles les designers ont la possibilité de créer des composants qu’ils vont ensuite pouvoir utiliser pour construire les pages. Ce découpage en composants est sensiblement identique à ce que l’on va faire nous, en tant que développeur.
- Si vous travaillez en CSS vous pouvez créer des classes qui correspondent au nom des composants qui sont utilisés dans la maquette (
.product-card,.product-card__title…) - Si vous utilisez un framework JavaScript comme React par exemple vous pouvez créer des composants qui correspondent à ceux utilisés dans la maquette (
<ProductCard>,<Button>…).
Dans les versions récentes de Figma les designers peuvent aussi ajouter des propriétés qui permettent de piloter l’apparence d’un composant. Encore une fois c’est quelque chose que l’on va traduire de notre côté en CSS ou avec notre framework JavaScript.
- Au travers de class ()
.btn--primary,.btn--secondary) - Ou via des propriété dans nos composants
<Button variant="primary">,<Button variant="secondary" disabled/>
Cela permet d’avoir un découpage qui va être similaire à celui du designer et qui permet une meilleure évolution par la suite.
Auto layout
Enfin, le dernier point intéressant est l’utilisation de l’AutoLayout dans Figma. Cette fonctionnalité permet au designers de créer des règles de placement pour les éléments enfants. Dans notre cas, cela est très similaire à ce que l’on peut faire avec le display:flex par exemple. Lorsque vous voyez un groupe qui utilise ce système de positionnement vous pouvez automatiquement traduire ça par l’utilisation d’un display:flex. D’ailleurs, il est intéressant de noter que Figma fera automatiquement cette traduction dans le code CSS généré.
Exporter les images
Si le designer a utilisé des images externes vous avez la possibilité d’exporter ces images dans le mode développeur tout en bas de la colonne de droite. Vous avez aussi la possibilité de rajouter des formats d’export et des dimensions supplémentaires pour par exemple prendre en compte les différentes densité de pixels.
