Comment utiliser : Figma CSS vers Webflow
- Dans Figma, sélectionnez un calque et ouvrez Dev Mode → Code → CSS (ou faites un clic droit → Copy as → Copy as code → CSS). Vous pouvez copier plusieurs calques à la fois.
- Collez le CSS ici. Chaque commentaire
/* Nom du calque */devient son propre bloc. - Choisissez si vous voulez convertir les px en rem et si vous souhaitez conserver les tailles fixes (en général, ce n’est pas utile).
- Copiez les valeurs individuelles depuis le tableau du panneau Style, ou le CSS nettoyé pour du code personnalisé.
Pourquoi le CSS de Figma doit être nettoyé avant Webflow
Figma génère du CSS qui décrit le calque exactement tel qu’il est dessiné sur le canevas, y compris position: absolute avec des coordonnées left/top, des largeurs et hauteurs fixes en pixels, ainsi que des résidus d’auto-layout comme flex: none; order: 0; flex-grow: 0;. Copier ces éléments dans Webflow produit des mises en page rigides qui cassent sur les petits écrans. Ce dont vous avez réellement besoin lors d’un handoff, ce sont les choix de design : tailles de texte, graisses, hauteurs de ligne, couleurs, espacements, rayons et ombres.
Ce qui est converti
| Sortie Figma | Devient | Pourquoi |
|---|---|---|
font-size: 32px | 2rem | rem respecte la taille de police du navigateur de l’utilisateur et se met à l’échelle de façon cohérente. |
line-height: 120% ou 38.4px | 1.2 | Un line-height sans unité s’adapte à la taille de police partout où il est hérité. |
letter-spacing: -0.64px | -0.02em | L’interlettrage en em reste proportionnel lorsque la taille de police change (typographie fluide). |
var(--Text-Primary, #141827) | #141827 + liste des variables | Indique quelles variables Figma recréer dans le panneau Variables de Webflow. |
position: absolute; left; top, flex: none | supprimé | Positionnement sur le canevas, pas une intention de mise en page. |
Correspondance avec le panneau Style de Webflow
Les valeurs sont regroupées selon la section du panneau Style où vous les saisissez : Layout (display, direction, gap, alignement), Spacing (padding, margin), Size, Typography, Backgrounds, Borders et Effects (ombres, opacité). Dans Webflow, vous pouvez saisir les unités directement dans les champs, donc 2rem ou 1.2 fonctionnent tels quels.
Aller plus loin
Pour des espacements et une typographie qui s’adaptent entre mobile et ordinateur, convertissez des paires de valeurs Figma en clamp() fluide avec le Calculateur clamp. Pour des conversions ponctuelles, utilisez PX vers REM, et pour les icônes, SVG vers Webflow.
Aussi recherché comme : figma vers webflow, figma dev mode css, panneau style webflow, px vers rem, line-height, letter-spacing, handoff design.
Outils complémentaires : Figma CSS vers Webflow
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Redirections WordPress vers Webflow — Migrer un site de WordPress vers Webflow modifie presque toutes les URL : chemins d'articles datés, archives /category/, slashes finaux et slugs de pages.
- HTML et CSS vers Webflow — Collez le HTML et son CSS, cliquez sur Copier vers Webflow puis collez dans le Designer.
Questions fréquentes
Où trouver le CSS dans Figma ?
Pourquoi la largeur et la hauteur sont-elles supprimées ?
Puis-je coller plusieurs calques à la fois ?
/* Nom du calque */ démarre un nouveau bloc, et chaque bloc obtient son propre tableau dans le panneau Style.