Figma: conception, prototypage et collaboration dans toute l'entreprise

Figma

Ces derniers mois, j'ai aidé à développer et intégrer une instance WordPress hautement personnalisée pour un client. C'est tout à fait l'équilibre entre le style, l'extension de WordPress à travers 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 d'une plate-forme 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, les progrès étant 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 ballon dirigeable, puis en traduisant le CSS vers WordPress. Le nombre d'étapes nécessaires et les écarts entre les plates-formes en font un processus difficile. Sans parler d'essayer de simplifier les complexités de la vitesse et de l'évolutivité

Figma

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:

  • designers - Collaborez en contexte et en temps réel. Ne vous inquiétez jamais de la mise à jour de vos fichiers ou de l'écrasement du travail de chacun.
  • Les intervenants - Envoyez un lien pour recueillir des commentaires, obtenir des demandes de modification et permettre aux parties prenantes de faire 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 actifs et copier du code.

Figma a quelques caractéristiques 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 afin de pouvoir modifier et remplacer intuitivement le texte et les images en ligne.
  • contraintes - Mettez votre conception à l'échelle pour l'adapter à n'importe quelle taille d'écran en fixant des objets à un cadre parent, en accrochant un objet à une grille ou même en créant des composants à l'échelle.
  • Cadres de l'appareil - Présentez vos créations dans les bons environnements. Vous pouvez même choisir entre le mode portrait et paysage.
  • Interactions - Donnez vie à vos prototypes en définissant des interactions au clic, en survolant, en appuyant sur, etc.
  • Superpositions - Avec un 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 parfaits 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 synchroniser avec d'autres outils, partagez simplement une URL pour recevoir des commentaires.
  • Conception sensible - Étirez vos mises en page et voyez comment elles réagiront aux changements de taille de l'écran.

Prototypage réactif

  • Défilement - Activez le défilement horizontal, vertical ou dans n'importe quelle direction dans des formes individuelles ou dans tout le cadre parent.
  • Styles - Synchronisez les couleurs, le texte, les grilles et les effets dans tous vos projets. Conservez moins de styles de texte et alignez vos conceptions sur différents appareils avec les styles de grille uniques de Figma.
  • Bibliothèques d'équipe - Partagez des composants et des styles dans Figma - pas besoin de disques 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 workflows de publication simples.
  • Réseaux vectoriels - Figma a créé l'outil plume pour être plus intuitif, permettant une manipulation directe tout en préservant la rétrocompatibilité avec les chemins.

Pour un entreprise clients, Figma peut améliorer la cohérence, l'efficacité et la sécurité à grande échelle. La plate-forme permet aux clients d'entreprise 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. L'authentification unique, les contrôles d'accès et les journaux d'activité sont inclus.

Commencez avec Figma

Figma a une grande sélection de tutoriels qu'ils maintiennent sur leur la chaîne Youtube, voici une vidéo de mise en route:

Figma donne aux développeurs la possibilité d'inspecter, de copier, d'exporter des actifs et de copier du CSS directement à partir du fichier de conception. Vous pouvez également activer vos workflows existants avec des intégrations, notamment ballon dirigeable, Avocode, Jira, Dropbox, ProtoPieainsi que Principe pour Mac. Ils ont également une API robuste.

Essayez Figma gratuitement

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..