Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugins.pptx

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
System SG
System SG
Cargando en…3
×

Eche un vistazo a continuación

1 de 43 Anuncio

🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugins.pptx

Steven Houessou-Adin nous parle d'automatisation de tâche par l'usage de plugins, widgets et de raccourcis claviers sur Figma.

https://www.figma.com/community/file/1149310932961040375

------------------
Retrouvez-nous sur https://friends.figma.com/cotonou/

Steven Houessou-Adin nous parle d'automatisation de tâche par l'usage de plugins, widgets et de raccourcis claviers sur Figma.

https://www.figma.com/community/file/1149310932961040375

------------------
Retrouvez-nous sur https://friends.figma.com/cotonou/

Anuncio
Anuncio

Más Contenido Relacionado

Similares a 🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugins.pptx (20)

Más reciente (20)

Anuncio

🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugins.pptx

  1. 1. Quand la tâche parait répétitive, une automation s’impose. / 🗜 atelier design : organisation et … Plugins Search all plugins Recents
  2. 2. Plugins & Widgets Sur Figma comme pour d’autres outils, un Plugin c’est un programme non persistant auquel on a accès depuis l’interface de l’outil et qui ajoute des fonctionnalités spécifiques parfois manquantes tout en fonctionnant en arrière-plan. Le Widget, pareillement, ajoute des nouvelles fonctionnalités, mais a la particularité d’être visible, persistant et offre à l’utilisateur d’interagir avec lui sur sa page.
  3. 3. Liste des Ressources fn + ↓ fn + ↓ fn + ↓ • Plugins • Widgets • Toolkit (fichier community)
  4. 4. Quelle est mon objectif? Est-ce long à réaliser manuellement? Existe-t-il une solution native? Aurais je à le repété souvent? Quelles sont les repercutions possibles? Quelle est sa relation avec les autres objets ? Ma solution est elle utilisable ? Profondes réflexions UTILISABILITÉ “La notion d’utilisabilité englobe à la fois la performance de réalisation de la tâche, la satisfaction que procure l’utilisation de l’objet et la facilité avec laquelle on apprend à s’en servir.” On peut y associer l’accessibilité et la réutilisabilité.
  5. 5. Plugins
  6. 6. Pages Pages comme son nom l’indique est un plugin utile pour la gestion des pages sur Figma. Créez des pages depuis une liste ou effacez des pages en cascade aisément et gratuitement. Voir sur le community
  7. 7. Styler Styler permet de gérer plusieurs styles à la fois en modifiant les propriétés des Calques. Il est possible de créer, supprimer, renommer, mettre à jour les styles ou de les déplacer d'un fichier à un autre en les extrayant. Voir sur le community
  8. 8. Batch Styler Avec Batch Styler, modifiez plusieurs styles de texte et de couleur directement ! Vous avez besoin de changer les valeurs de plusieurs styles (texte ou couleurs) simultanément, mais vous ne voulez pas passer par le processus de modification de chaque style ? C’est ce à quoi ce plugin répond efficacement. Voir sur le community
  9. 9. Design System Organizer Design System Organizer est utile pour la plupart des tâches relatives à la réorganisation et au nommage de composant et de styles. N’hesitez pas à regarder cette vidéo démonstration. DSO offre 15jour d’essai gratuit et coûte actuellement 29 $ (à vie), un prix qui vaut la peine d’être payé quand on voit le gain de temps offert dans la gestion de bibliothèque de composants. Soutenez Arthur Savchenko et achetez une licence. Voir sur le community
  10. 10. Style Organizer Style organizer est l’outil idéal pour évaluer l’utilisation globale de style sur votre page. Vous pouvez identifier les éléments ayant le même style et les modifier, identifier les styles venant de librairies externes, identifier les éléments non liés à des styles et apporté une correction manuelle et il y a même une option pour faire automatiquement les corrections possibles en un seul clic. Voir sur le community
  11. 11. Edit in place Edit in place donne le superpouvoir de sélectionner n'importe quelle instance d'un composant local et éditez le composant parent dont il dérive à la place. Note : Il ne fonctionne pas très bien avec les variantes Voir sur le community
  12. 12. Find in page Find in page comme la plupart des plugins de recherche, permet d’identifier des calques et des textes dans votre conception, naviguez entre les les résultats et remplacez le tout-en-un seul clic. Sa particularité réside dans le champ de recherche qu’il offre. À savoir, la possibilité de chercher sur Une page, suivant une Sélection ou Tout le fichier (toutes les pages). Notez qu’il est fonctionnel sur Figjam également. Voir sur le community
  13. 13. Rename It Rename It à l’instar de la fonction de Renommage native à Figma, permet de rapidement renommer plusieurs calques de manière personnalisée. Sa particularité se trouve dans les différentes personnalisations qu’il offre. Un plus, est qu’il intègre les plugins parameters, donc permet de renommer rapidement avec quelques touches de claviers. Voir sur le community
  14. 14. Master Master vous permet de Créer, attacher, cloner ou déplacer des composants en quelques clics sans perdre les overrides ! Super-pouvoir : Imaginez que vous commencez un nouveau projet dans Figma, puis réalisez un peu tard que vous auriez dû utiliser des composants pour la construction d’un lot d’élements que vous utilisez 🤦🏽♂️. Master offre de remplacer en un clic ces éléments par des instances d’un Composant parent qui sera auto- génerer. Aussi chaque instance gardera les overrides qu’ils devraient avoir 💖. Mais il n’est pas gratuit :/ Voir sur le community
  15. 15. Component Utilities Component utilities Voir sur le community
  16. 16. Similayer Similayer permet de sélectionner des calques similaires, en fonction de toutes sortes de propriétés. C’est l’un des meilleurs plugins de ce genre. Voir sur le community
  17. 17. Add numbers to texts Change du texte devient un jeu d’enfant. Ce plugin permet de changer du texte en offrant des moyens de personnalisations comme l’incrementation de chiffre ou de lettres. Voir sur le community
  18. 18. Find and replace Recherchez des textes sur votre page et remplacez-les aisément. Vous avez la possibilité de rechercher du contenu texte ou le nom d’un calque sur la page ou depuis une sélection. Voir sur le community
  19. 19. Google Sheets Sync Synchronisez du contenu de Google Sheets directement dans votre fichier Figma. Il est simple d’usage et dispose d’une documentation. Voir sur le community
  20. 20. JSON to Figma Ce plugin peut parcourir des fichiers JSON en local ou à partir d'une URL afin de vous permettre de remplir vos calques avec du texte ou des images. Voir sur le community
  21. 21. Content Reel Remplissez rapidement vos interfaces avec des chaines de caractères, des images et icônes. Content Reel vous permet de créer du contenu personnalisé que vous pouvez utiliser en privé ou partager avec d'autres utilisateurs en le rendu public. Voir sur le community
  22. 22. Photos Recherchez et insérez des photos (y compris des gifs) dans vos fichiers Figma depuis Unsplash, Google, Flickr, Pixabay, Pexels, Giphy et Tenor. Vous pouvez insérer 20 photos par fichier depuis Unsplash, Pixabay, Pexels, Flickr, Giphy et Tenor. Ce qui est génial est que le plugin propose des offres d’achat de licence à vie à côut très abordable. Soit 20$ pour un Basic Plan et 30$ pour le Pro Plan. Voir sur le community
  23. 23. Automater Automater peut être présenté comme une collection d'utilitaires simples ou avancés qui répondent à divers problématiques. Voir sur le community
  24. 24. Automator Automator permet de créer des automations personnalisées par glisser-déposer afin de résoudre des tâches chronophages. Le plugin coûte aujourd’hui 9$ pour une licence personnelle. Un espace community spécial est disponible pour les utilisateurs pour partager des automations. Alors parfois, selon la tâche à accomplir, pas besoin de créer une nouvelle automation ou de démarrer à zéro. Voir sur le community
  25. 25. Figma Workflows Accélérez votre processus de conception grâce à de puissantes automatisations. À l’instar de l'outil Shortcuts sur iOS, créez des automations en combinant différentes actions que propose Figma Worflows pour répondre à vos problématiques d’éxecution de tâches. Ce plugin est completement gratuit et opensource sur github. Voir sur le community
  26. 26. Node Inspector Node Inspector permet de voir et copier les propriétés des nœuds pour développer des plugins. Voir sur le community
  27. 27. Clean Document Organisez et nettoyez automatiquement votre Fichier Figma. Voir sur le community
  28. 28. Translations for figma Translations for Figma vous permet de tester vos page avec différentes langues à la volée. Vous pouvez l'utiliser gratuitement ou en tant que service payant. Le service gratuit ne nécessite pas d'inscription et est celui activé par défaut. Vérifiez ce qui est disponible avec un accès privilégié sur la page de pricing. Voir sur le community
  29. 29. Figma Section Utilisez les sections dans Figma pour organiser facilement vos conceptions. Superpouvoir : Il ne se comporte pas comme un Frame, donc n’affecte pas la structure des éléments dans une librairie ou encore les liens de prototypage par exemple. Ce plugin coûte 5$. Voir plus de détails sur la page officielle. Voir sur le community
  30. 30. Section分区 Utilisez les sections dans Figma pour organiser facilement vos conceptions. Note : Le plugin fonctionne plutôt bien outre quelques petits bugs, sachant qu’il est complètement gratuit. Voir sur le community
  31. 31. Team Library Component Browser Le plugin permet de lister, parcourir et faire usage des composants de vos bibliothèques partagées et locales. Pro Usage : Remplacé la ou les sélection·s par une instance tout en retenant les tailles respectives. Voir sur le community
  32. 32. Strings Strings UX est un outil d’UX writting qui permet de gagner du temps à l’écriture en proposant des exemples de phases/mots et d’autres corrections utiles à l’amelioration du score de lisibilité. De plus, il intègre un verificateur/correcteur de grammaire et orthographe dans diverses langues dont le français. La version gratuite de l’outil est largement suffisante pour des travaux personnels ou pour des PME. Voir détails Disclamer 🤦 : Apparemment Strings ne sera plus disponible dès fin août. Voir sur le community
  33. 33. Widgets
  34. 34. Calendar Calendar est un widget de calendrier utile pour vos besoins de planification, qui inclut des vues par semaine ou mois et des plages de temps personnalisable avec une disposition flexibles. Go to community page
  35. 35. Activity Tracker Ce simple widget vous permet de suivre le temps passé sur vos tâches ! Considérez-le comme un chronomètre perfectionné pour vos activités. Go to community page
  36. 36. Translate Traduisez de/vers n'importe laquelle de 125 langues disponibles sans quitter votre espace de travail. Go to community page
  37. 37. lil todo Créer rapidement une todo list pour vos taches journalières. Go to community page
  38. 38. Changelog Un widget pour créer de manière fluide des Changelogs pour vous et votre équipe. Go to community page
  39. 39. Asana Vous pouvez utiliser le widget Asana pour récupérer les projets Asana et toutes leurs tâches associées dans le Canvas pour en discuter et les mettre à jour en équipe. Ajustez les dates d'échéance, les attributaires, les étiquettes, les sections, les projets et tout autre champ personnalisable, tout en conservant votre source de vérité dans Asana. Go to community page
  40. 40. Jira Utilisez le widget Jira pour transférer les projets Jira et toutes les questions qui y sont associées dans le canvas pour en discuter et les mettre à jour en équipe. Ajustez l'attributaire, la priorité, le statut et le type de problème directement depuis votres espace de travail, tout en conservant votre source de vérité dans Jira. Go to community page
  41. 41. Navigate Utilisez ce widget pour guider les gens à travers vos planches avec des animations fluides. Go to community page
  42. 42. Merci stevenkejjad@gmail.com figma.com/@steven @mrstev3n

×