Figma Config 2023 : Le futur du design dévoilé

L'équipe Digidop, a eu la chance de participer à la Figma Config 2023, à la fois à Paris et à Bordeaux, en compagnie des Friends of Figma. Entre découvertes de nouvelles fonctionnalités, aperçu des défis passionnants du futur du design et partage d'expériences avec la communauté, ces événements ont été riches en apprentissages.

Voici un retour sur ces moments forts et les enseignements que nous en tirons !

1.Les Nouvelles Fonctionnalités de Figma

1.1 Dev Mode : une passerelle entre Design et Développement

Figma a annoncé l'arrivée du Dev Mode, un espace dédié aux développeurs. Ce mode est une véritable passerelle entre design et développement, rendant l'interaction entre les deux plus fluide et plus productive que jamais. Voici un aperçu des principales fonctionnalités :

1. Inspection simplifiée : Obtenez facilement des informations précises, sur les marges, les paddings, les styles, les composants, etc. en inspectant les éléments de design dans Figma. En savoir plus sur la navigation du dev mode
2. Extraits de code : Copiez directement le code CSS, iOS et Android depuis Figma. Personnalisez même l'apparence du code des plugins. Obtenez un contrôle total sur la manière dont le code est généré à partir des maquettes. En savoir plus sur les code snippets
3. Puissants plugins : Automatisez vos tâches de développement avec des plugins dédiés. Générez du code, exportez des ressources facilement, et intégrez de manière transparente des outils populaires tels que Jira, GitHub et Storybook. Utilisation des plugins
4. Design System : Synchronisation parfaite entre vos composants et votre code Figma. Assurez-vous que tous les membres de l'équipe travaillent avec les mêmes éléments et évitez les incohérences. En savoir plus
5. Statut d'avancement : Identifiez rapidement les frames prêts à être développés grâce au nouveau système de tags. Les concepteurs peuvent marquer facilement les sections prêtes à passer à l'étape suivante, permettant une meilleure collaboration entre les équipes. En savoir plus sur les sections statuts
6. Comparaison des modifications : Visualisez et comparez facilement les modifications apportées à un fichier en examinant différentes versions de cadres. Identifiez les changements et les évolutions avec précision. En savoir plus sur les options de comparaison

1.2 Variables

L'introduction de Variables marque une avancée majeure dans la personnalisation et la flexibilité des projets de design. Cela facilite grandement le travail des designers, leur permettant de créer des systèmes de design évolutifs et réutilisables. Les designers peuvent maintenant exploiter des variants de couleurs, de nombres, de textes, de variables booléennes pour stocker des valeurs réutilisables et ensuite définir des thèmes.

Oui, le Dark & Light mode peut maintenant s'étendre à vos projets en un simple drag & drop !

En savoir plus sur les variables Figma

1.3 Prototypage Avancé & Auto Layout

Figma a également annoncé plusieurs autres améliorations, dont des mises à jour de l'Auto Layout et des avancées dans le prototypage. Un nouvel outil de sélection de polices et une refonte du navigateur de fichiers ont également été dévoilés, rendant l'expérience utilisateur encore plus intuitive et agréable. Parmi les fonctionnalités les plus marquantes :

• Définir des actions de variables : permet de définir des types de variables pour rentre le prototypes plus efficaces
• Intégrer des fonctions mathématiques : pour attribuer des valeurs numériques à un prototype, à l'aide d'opérations mathématiques (additions, multiplications, divisions, etc.)
• Actions multiples et logique conditionnelle : déclenchement de plusieurs actions sur une variable spécifique avec des scénarios conditionnels : si ... alors ...

1.4 Extention Figma for VS Code

L'extension Figma pour VS Code (Visual Studio Code) offre est un intermédiaire parfait entre le design et le développement. Naviguez dans les fichiers de conception, collaborez en temps réel, obtenez des suggestions de code basées sur les designs et liez les fichiers de code aux composants de design, le tout sans quitter votre environnement de développement.

En savoir plus sur l'extention Figma for VS Code

1.5 Des fonctionnalités "on top"

• Notion de "Max Min" : définissez des largeurs et hauteurs maximales avec des Max ou Min Width et Max ou Min Height
• Nouvelle fonctionnalité auto-layout : des auto-layout responsive et une fonctionnalité d'Auto Gap re-localisée
• Sélecteur de polices : ENFIN ! Une prévisualisation des polices est disponible depuis le sélecteur. Plus besoin de toutes les tester pour avoir un aperçu.
• Navigateur de fichier : navigateur amélioré pour trouver les fichiers plus rappidements

1.6 Prise en main des nouveautés

Figma met à disposition de toute la communauté des fichiers playground pour apprendre toutes ces nouvelles fonctionnalités. Immergez vous dans ces nouvelles fonctionnalités et apprenez à les utiliser pas à pas :

• Dev mode
• Auto layout
• Advanced prototyping
• Variables

2. Les challenges futurs de Figma

2.1 L'intégration de l'IA

Figma a présenté un aperçu de l'intégration de l'IA dans ses outils. Nous croyons fermement que cette fusion entre IA et design ouvre la voie à une nouvelle ère de créativité et d'efficacité.

2.2 Figma: un outil tout en un ? (Framer + Webflow)

Avec l'acquisition de Diagram, Figma semble se positionner pour devenir un leader incontesté du design, rassemblant divers outils sous un même toit. On a vraiment l'impression que Figma essaie de se positionner pour prendre un jour le contrôle de l'espace de développement visuel. Et il semble qu'ils pourraient avoir un avantage significatif sur les autres outils de développement visuel car :

1. Figma a déjà une importante communauté
2. L'outil de plus en plus intégrée dans les entreprises et écoles dans le monde
3. C'est historiquement un outil de design
4. La collabroation est simple et intuitive sur Figma

La présentation à laquelle nous avons assisté lors de la Figma Config semblait même être une introduction très similaire à l'approche de Webflow : "HTML & CSS dans une interface visuelle, sans écrire de code".

Qu'en pensez vous ?

2.3 Design Ops : Le Présent et l'Avenir

L'approche Design Ops est désormais une réalité et le futur du design. Avec Figma, nous voyons une opportunité unique de développer des offres de consulting, en proposant des nouvelles méthodes de travail et des conseils en marketing digital.

Digidop aux rendez-vous Figma Config de Paris et Bordeaux

Enfin, nous avons a eu le privilège d'être présent aux événements Figma Config à Paris et Bordeaux. Un grand merci à @fof_pariss pour avoir rendu cela possible !

Une expérience enrichissante, riche de rencontre. C'est une chance incroyable de faire partie de cette communauté vibrante.

Conclusion

Aucun doute le futur du design est ici, et avec Figma, et nous sommes ravis d'être aux premières loges de cette révolution. Merci Figma, et à l'année prochaine pour la Config 2024 !

Découvrir les nouveautés de la Config 2024