Figma : concevoir, prototyper et collaborer au sein de l’entreprise

Au cours des derniers mois, j’ai contribué au développement et à l’intégration d’une instance WordPress hautement personnalisée pour un client. C’est tout un équilibre entre le style, l’extension de WordPress via des champs personnalisés, des types de publication personnalisés, un cadre de conception, un thème enfant et des plugins personnalisés.

La partie difficile est que je le fais à partir de simples maquettes provenant d’une plateforme de prototypage propriétaire. Bien qu’il s’agisse d’une plate-forme solide pour la visualisation et la conception, elle ne se traduit pas facilement en HTML5 et CSS3. Ajoutez toutes les autres itérations, et mes journées deviennent assez frustrantes car les progrès sont extrêmement lents.

Une pièce du puzzle est que l’agence de design a simplement remis les prototypes, sans fournir aucun type de feuille de style principale… nous travaillons donc pour y parvenir en exportant les prototypes dans Zeplinpuis en traduisant le CSS pour notre thème enfant feuille de style dans WordPress. Le nombre d’étapes nécessaires et les écarts entre les plateformes rendent le processus difficile. Sans parler d’essayer de simplifier les complexités pour la vitesse et l’évolutivité

Figma

Figma fournit des outils de conception puissants avec une collaboration multijoueur, permettant aux équipes d’explorer des idées tout en capturant des commentaires de qualité en temps réel.

Figma centralise une grande partie de ce travail avec une plate-forme qui permet la conception, les commentaires et la collaboration entre chaque membre de votre équipe, notamment :

• Créateurs: Collaborez en contexte et en temps réel. Ne craignez plus que vos fichiers soient obsolètes ou qu’ils écrasent le travail de chacun.
• Parties prenantes: Envoyez un lien pour recueillir des commentaires, obtenir des demandes de modification et permettre aux parties prenantes d’effectuer des mises à jour de copie dans vos conceptions.
• Développeurs : les ingénieurs ont toujours accès à la source de vérité actuelle et peuvent inspecter des éléments, exporter des ressources et copier du code.

Figma a quelques fonctionnalités uniques :

• Opérations booléennes: Avec quatre formules : union, soustraction, intersection et exclusion, vous pouvez combiner n’importe quel ensemble de calques de forme avec précision.
• Composants: Créez plus rapidement et de manière plus cohérente avec des éléments réutilisables et évolutifs dans vos fichiers. Accédez aux calques dans chaque instance pour modifier et remplacer intuitivement le texte et les images en ligne.
• Contraintes: Adaptez votre conception à n’importe quelle taille d’écran en fixant des objets sur un cadre parent, en les alignant sur une grille ou même en créant des composants à l’échelle.
• Cadres de périphérique: Présentez vos créations dans les bons environnements. Vous pouvez même choisir entre les modes portrait et paysage.
• Interactions: Donnez vie à vos prototypes en définissant des interactions au clic, au survol, à l’appui, etc.
• Superpositions: Avec le positionnement relatif et manuel, vous avez un contrôle total sur où et comment les superpositions apparaissent.
• Perfection des pixels : L’édition interactive à 60 ips vous offre des aperçus et des exportations ultra nets et au pixel près.
• Prototypage: Créez rapidement des flux en connectant des écrans et en ajoutant des éléments tels que des interactions, des transitions, des superpositions, etc. Au lieu de vous synchroniser avec d’autres outils, partagez simplement une URL pour recevoir des commentaires.
• Conception réactive: étirez vos mises en page et voyez comment elles réagiront aux changements de taille de l’écran.

• Défilement: Activez le défilement horizontal, vertical ou dans n’importe quelle direction dans des formes individuelles ou dans l’ensemble du cadre parent.
• modes: Synchronisez les couleurs, le texte, les grilles et les effets sur tous vos projets. Conservez moins de styles de texte et alignez vos conceptions sur différents appareils grâce aux styles de grille uniques de Figma.
• Bibliothèques d’équipe: Partagez des composants et des styles dans Figma : pas besoin de lecteurs partagés ou d’outils supplémentaires. Vous et votre équipe contrôlez comment et quand les modifications sont déployées grâce à des flux de publication simples.
• Réseaux vectoriels: Figma a créé l’outil plume pour qu’il soit plus intuitif, permettant une manipulation directe tout en préservant la rétrocompatibilité avec les chemins.

Pour entreprise clients, Figma peut garantir la cohérence, l’efficacité et la sécurité à grande échelle. La plate-forme permet aux entreprises clientes de gérer facilement les systèmes de conception avec des bibliothèques d’équipe et la possibilité de télécharger et de partager des polices personnalisées au sein de votre organisation. Authentification unique (SSO), les contrôles d’accès et les journaux d’activité sont inclus.

Commencez avec Figma

Figma propose une grande sélection de tutoriels qu’ils maintiennent sur leur Chaîne Youtubevoici une vidéo de démarrage :

Figma offre également aux développeurs la possibilité d’inspecter, de copier, d’exporter des actifs et de copier CSS directement à partir du fichier de conception. Vous pouvez également activer vos flux de travail existants avec des intégrations, notamment Zeplin, Oui, Boîte de dépôt, Protopique et Principe pour Mac. Ils ont également un robuste API.

Essayez Figma gratuitement