Présentation du Mode Dev de Figma
Découvrez le mode dev de Figma, désormais en bêta, qui réduit la barrière entre le design et le développement. Transformez rapidement vos designs en code adapté pour sites internet, app iOS ou Android.
Introduction à Figma
Projet Figma
Les outils de Figma






Les styles et variables dans Figma
Importation de ressources externes
Responsive Design
Les Composants
Les Plugins
Le mode prototype








Détails de la leçon
Description de la leçon
Au fil des mises à jour, Figma n'a cessé de réduire la barrière entre le design et le développement. Ce nouvel espace de travail, le mode dev, permet aux développeurs de convertir les designs en code rapidement, en fonction des besoins spécifiques du projet (site web, app iOS, app Android).
Le mode dev n'est pas disponible pour les utilisateurs de comptes gratuits et est actuellement en version bêta pour les autres comptes. Cependant, il peut être utilisé pour transformer facilement votre design en différents types de code.
Avec mode dev, les développeurs peuvent ajuster les unités de mesure (pixels, REM) et bénéficier de l'intégration avec des outils de développement tels que Visual Studio Code, GitHub ou Jira. Les changements et autosaves peuvent être suivis et comparés en temps réel, facilitant une collaboration fluide entre designers et développeurs.
Objectifs de cette leçon
Les objectifs de cette vidéo sont de :
- Présenter le mode dev de Figma.
- Démontrer comment transformer un design en code.
- Expliciter les intégrations possibles avec des outils de développement.
Prérequis pour cette leçon
Pour suivre cette vidéo, il est recommandé d'avoir :
- Des notions de base en design et développement web.
- Une connaissance de l'utilisation de Figma et ses fonctionnalités essentielles.
Métiers concernés
Cette vidéo est particulièrement utile pour les :
- Développeurs Web.
- Designers UI/UX.
- Chefs de projet travaillant sur des projets numériques.
Alternatives et ressources
En alternatives, vous pouvez explorer des outils tels que :
- Sketch avec des plugins de développement.
- Adobe XD avec ses fonctionnalités d'exportation de code.
Questions & Réponses
