Transcription
1. Introduction: Je
me considère certainement comme une personne créative, mais j'ai toujours
été intéressée par l'organisation,
les processus et les systèmes. L'efficacité, la cohérence
et une communication claire sont énormes avantages que
vous trouverez étant sur la même longueur d'onde
avec votre équipe sur Figma. [MUSIQUE] Je suis Maddie Beard. Je suis concepteur UI/UX et le cours d'
aujourd'hui porte sur les tactiques permettant de développer
un processus organisé avec votre équipe à Figma. D'habitude, je fais partie
des membres de
l' équipe qui rassemblent
tout le monde pour essayer d'améliorer nos flux de travail, nos processus
et notre communication. Comme la plupart des designers,
j'adore Figma. Donc, si vous aimez aussi Figma ou
si c'est tout nouveau pour vous, alors ce cours est fait pour vous. Je travaille
professionnellement en
tant que designer depuis 2017, fois pour des entreprises technologiques, grandes et petites, y compris Adobe. J'ai également travaillé pour moi-même en tant que freelance
et entrepreneur. systèmes et les processus sont si puissants sur les lieux de travail
modernes. Leur application à Figma permettra non seulement aux designers d'être
sur la même longueur d'onde, mais aussi aux chefs de produit, aux ingénieurs et à d'autres partenaires
interfonctionnels. Nous allons passer en revue
six tactiques pour
vous aider à passer à un
processus qui vous convient. Lorsque vous aurez terminé
ce cours, j'espère que vous
repartirez en comprenant comment travailler plus intelligemment et non plus dur
avec votre équipe à Figma. Ce cours s'adresse à tous les
designers d'une équipe, que vous
soyez un contributeur
individuel ou que vous gériez d'autres designers. Surtout si vous
débutez dans le travail en équipe ou si vous avez remarqué que votre équipe pourrait avoir besoin d'
améliorations matière de processus, de flux de travail
et de collaboration. Je sais que vous allez ressentir un regain de confiance dans votre façon travailler et de communiquer
après ces six leçons.
2. Présentation de votre équipe: Lorsque vous élaborez un
processus pour votre équipe, il est vraiment bon de garder à l'esprit personnes avec lesquelles vous travaillez afin de
vous assurer que le processus est bénéfique pour
toutes les personnes impliquées. Dans cette leçon,
nous allons faire un exercice rapide de gymnastique pour
décrire vos parties prenantes et déterminer quels sont
leurs objectifs en ce qui
concerne ce processus que
nous sommes sur le point de développer. Vous pouvez le faire seul ou avec quelques autres membres de votre équipe. Si vous préférez une méthode plus
traditionnelle, vous pouvez également le faire avec des notes
autocollantes sur votre
mur ou votre tableau blanc. Commencez par créer des sections
à l'aide de l'outil de section pour chaque petite équipe
au sein de votre plus grande équipe. Qui va consulter vos fichiers Figma tous les jours ou juste de
temps en temps ? Pour mon équipe, ce sont les concepteurs, les chefs de
projet,
les directeurs de conception et les ingénieurs. Ensuite, prenez quelques notes
autocollantes et
notez les objectifs pour
chacune de ces disciplines. Je vais te montrer ce que
j'ai trouvé, même si le tien est
peut-être un peu différent. Les autres designers doivent être
capables de reprendre là où vous vous êtes arrêté sans
trop d'explications. Les développeurs doivent savoir
où trouver les designs, comprendre comment l'
écran doit se comporter et comment poser des questions
ou faire part de leurs préoccupations. Les PM doivent savoir où
trouver des conceptions, comment fournir des commentaires et comment rédiger des exigences en
fonction des conceptions finales. Enfin, les responsables de la conception
devraient être en mesure de connaître
à tout moment l'état d'avancement d'un
projet, de
se faire une idée de la progression des concepteurs
sous leurs ordres et de savoir s'
ils ont besoin d'améliorations dans certains domaines . Toutes ces choses peuvent
également s'appliquer à votre équipe, mais les équipes sont également très différentes. Assurez-vous de
les parcourir et de
réfléchir à votre cas d'utilisation spécifique. Maintenant c'est ton tour. Allez-y et complétez
cet exercice seul ou avec
un membre de votre équipe. Si vous
le complétez individuellement, vous pourriez penser à le
partager avec un membre de votre équipe
pour connaître son opinion et échanger des idées les uns sur pour connaître son opinion et les autres. Le plus important
dans cet exercice est vraiment de faire oublier
que Figma est réservé aux designers. mon expérience au moins, la relation entre la conception, ingénierie et la gestion des
produits commence par la communication. Maintenant, en parcourant
toutes ces leçons,
vous serez en mesure de garder ces personnes et leurs objectifs à l'esprit,
ainsi que les vôtres.
3. Configuration d'un fichier Figma de modèle: Lorsque vous commencez
un nouveau projet, vous arrive-t-il de perdre du temps à regarder
un fichier Figma vierge ou peut-être
êtes-vous tout à fait à l'aise de
repartir de zéro,
mais chaque designer de votre
équipe le fait un peu différemment
? un fichier Figma vierge ou peut-être êtes-vous tout à fait à l'aise de
repartir de zéro, mais chaque designer de votre
équipe le fait un peu différemment aboutissant finalement à une
désorganisation à long terme ? Quoi qu'il en soit, je
peux vous dire par expérience que la
création d'un modèle fichier
Figma est l'une des
meilleures choses que vous puissiez faire pour votre équipe,
c'est pourquoi j'en ai fait le projet pour ce cours. Si vous aimez la
constance et la rapidité, c'est le point de départ
idéal. Si vous aimez les raccourcis,
j'ai de bonnes nouvelles pour vous. En fait, j'ai déjà
créé un modèle que je vais partager avec vous
pour l'utiliser pour votre équipe. C'est quelque chose
qui a très
bien fonctionné pour moi et mon équipe, mais vous pouvez
le télécharger dans la section des ressources et apporter modifications que vous
souhaitez pour votre propre usage. Dans cette leçon, je
vais vous expliquer chaque
partie une par une. Commençons par la page de couverture. Il s'agit de la page de couverture, et ce que nous avons
ici n'est en fait que la
couverture qui apparaîtra votre page d'accueil Figma, comme
votre image miniature. J'aime vraiment que ce soit
très simple
pour que quelqu'un sache exactement dans
quoi il se lance, en termes de projet
et de statut. Vous pouvez inscrire le titre de votre
projet ici. Vous pouvez mettre le nom de votre équipe ici. Cela n'est vraiment pertinent que
si votre équipe de conception est divisée en équipes
distinctes. Il s'agit d'un composant, vous pouvez
donc changer de
statut très facilement ici. Une fois qu'il est lancé,
vous pouvez le remplacer par cela. Ou si jamais cela
devient inutile, alors j'aime le
changer pour l'archiver,
juste pour que quelqu'un sache
qu'il ne devrait pas être comme construction basée sur
ces conceptions ou
quoi que ce soit d' autre. C'est très facile
de changer ici. Passons maintenant au
reste de ces pages. Transfert. J'ai toujours cette page premier et je ne l'
ai pas séparée par un titre appelé Handoff que les développeurs sachent que
c'est pour eux. Il y a une coche verte indiquant Ready For Dev,
puis la date à laquelle il a été mis à jour pour
la dernière fois. C'est exactement là que
vous allez
lancer tous vos designs prêts à être développés
et
ils sont vraiment à l'épreuve. C'est la première
chose que quelqu'un devrait remarquer en descendant sur le panneau de gauche et en
ne mettant rien ici s'
il n'est pas prêt à être construit, c'est essentiellement
l'essentiel. Vous pouvez également le
diviser en plusieurs sections si vous le souhaitez en fonction de phases, MVP, puis d'une itération suivante. Cependant, vous
voulez que cela fonctionne, mais j'aime vraiment
avoir ça au sommet. Ensuite, nous passons au design. Wireframes, c'est ici que vous conserverez
tous vos wireframes. La section suivante est consacrée
aux critiques de conception, et vous pouvez en créer
autant que vous le souhaitez si vous avez des
critiques tout le temps. Mais j'aime l'avoir sur cette
page séparée juste pour pouvoir copier et coller les écrans sur lesquels
je travaille et un commentaire sur cette page, de la rendre plus nette afin
que pendant la création, je ne On dirait un vrai bordel. Puis le bac à sable. est vraiment là que vous
voulez garder votre désordre, où vous voulez
garder tout ce avec quoi vous jouez,
peut-être de l'inspiration, des choses
que vous êtes
encore en train d'essayer, c'est là que cela peut mener. Et peut-être plus tard. C'est si je propose des designs et qu'ils sont poussés à
peut-être être lancés après MVP. Je veux garder ces
écrans, je les aime vraiment beaucoup. Peut-être que ce sont des écrans finis, peut-être que ce ne sont que des idées. Je vais
les mettre dans Maybe Later afin que nous puissions
y revenir lors d'une prochaine itération. Ensuite, la recherche. Discovery, je pourrais mettre ici quelques
analyses concurrentielles ou toute autre recherche menée notre chercheur en UX, mais cela peut être des notes à
puces, captures d'écran, peu importe ce que c'est. Puis des prototypes. Si nous testons également des prototypes
pour une recherche, je veux les conserver dans
ces pages séparées afin qu'ils ne
confondent pas les développeurs car parfois, moins pour moi en
tant que designer, je vais faire de petits trucs rapides pour mon prototype fonctionne
bien afin de le tester. Ces types de choses
ajouteront des formes ou de la confusion à des conceptions que vous ne voudriez pas nécessairement que les
ingénieurs voient . C'est pourquoi j'ai particulièrement abordé
ce sujet dans le cadre
de nos recherches. J'ai publié ce modèle
à la communauté Figma, il est
donc totalement gratuit
pour vous de
dupliquer et de modifier
tout ce que vous voulez, que vous
modifiiez simplement certaines pages ou des sections entières. Vous pouvez modifier les émojis ou les options de
statut et vous pouvez même personnaliser cette page de couverture pour qu'elle corresponde davantage à l'image de marque de
votre entreprise. Dans la leçon suivante,
nous allons
parler plus en détail étiquetage et de l'annotation de vos
conceptions pour des raisons de cohérence.
4. Étiquetage et annotation de vos créations: Nous savons tous qu'une bonne communication
asynchrone est essentielle pour que les équipes puissent
produire efficacement un
travail de haute qualité. D'après mon expérience, les concepteurs peuvent
communiquer de manière asynchrone
de deux
manières : en boucle, dont nous parlerons
dans une prochaine leçon, et en
étiquetant et en annotant nos designs dans Figma. L'étiquetage consiste à donner vos coéquipiers et à votre
futur moi une idée
du terrain lorsque vous accédez
à une page
de Figma, parfois
pour la première fois, tandis que les annotations sont
davantage une question de communication un comportement intentionnel qui pourrait ne pas être évident simplement en
regardant les designs. Approfondissons
cette question et regardons les choses
en action, en commençant par les étiquettes. J'utilise trois niveaux d'
étiquettes dans mon processus. commençant par le titre,
puis le sous-titre et enfin le nom de
l'écran individuel. Comme vous l'avez vu brièvement dans
la leçon précédente, ce modèle que j'ai créé
comporte un composant que vous pouvez utiliser pour titrer et
sous-titrer vos flux. L'objectif du titre est de le
faire ressortir si
quelqu'un
fait un zoom arrière sur une page afin de
pouvoir affiner le flux
qu'il recherche. Le sous-titre ou la
description vise davantage à mettre en contexte
ce qu'est ce flux, qui devrait le voir,
ce qui le déclenche et d'
autres choses de ce genre. Une équipe de conception peut choisir
d'utiliser des conventions de
dénomination pour titrer des écrans individuels d'
une multitude de manières équipe de conception peut choisir
d'utiliser des conventions de
dénomination pour titrer . Chaque équipe sur laquelle j'ai travaillé a fait un peu différemment, mais je dois dire que
dans la plupart des
cas, plus
vous obtiendrez de précision et de précision, moins il y
aura de confusion entre concepteurs ,
ingénieurs et chefs de projet. Permettez-moi de vous montrer un exemple de convention de dénomination que j'ai
utilisée dans ma plus récente entreprise pour vous montrer ce que je veux dire, puis vous pouvez utiliser cet exemple et le modifier un peu pour
qu'il fonctionne pour toi. Voici une série d'écrans
montrant le flux pour un nouvel utilisateur qui commande un
retrait dès que possible dans un restaurant. Pour ce projet, nous avons utilisé une convention de dénomination
avec cette structure : type d'
écran, utilisateur, type de
commande, écran, État. Vous pouvez voir cette structure en action avec tous ces
écrans dans le flux. Ainsi, chaque écran possède un nom unique basé sur une convention de dénomination
cohérente. Honnêtement, vos conventions de
dénomination seront probablement jamais parfaites, et c'est tout à fait normal. N'oubliez pas les objectifs
de chacun de vos
partenaires interfonctionnels lorsque vous
définissez comment nommer
vos cadres à l'avenir. conventions de dénomination cohérentes seront également d'une grande utilité lorsque des personnes travaillent avec des liens vers vos designs Figma
dans des espaces extérieurs. Plus d'informations à ce sujet dans la leçon suivante.
5. Obtenir du granulaire avec Figma Links: Dans cette courte leçon, je vais vous montrer comment obtenir le bon niveau de
granularité lorsqu'il s'agit de générer et partager des liens vers
vos designs Figma. Même si nous, les designers,
souhaiterions que ce ne soit pas vrai, tout
ne
se passe pas au sein de notre équipe au sein de Figma. Vous pouvez souvent avoir besoin de créer un lien
vers Slack, Jira, Confluence, Asana, Trello, Google Docs, Drive et bien d'autres encore. Selon le scénario, vous souhaiterez peut-être
lier l'intégralité du fichier, une page ou même
un écran individuel. Voyons donc
comment procéder pour chacun d'entre eux. Ici, j'ai un exemple de quelques écrans
prêts pour le développement. Disons que je souhaite partager l'intégralité de
ce fichier. C'est très simple. Tout ce que je vais faire, c'est accéder au gros bouton bleu de partage. Une fois que j'aurai cliqué dessus, je
pourrai partager en
fonction de l'adresse e-mail de quelqu'un ou
obtenir un lien à copier. D'habitude, je reçois juste un lien, mais je peux aussi modifier ce que
cette personne peut faire : modifier, visualiser, visualiser
des prototypes uniquement. C'est très simple. Vous
savez probablement déjà comment procéder si vous
connaissez Figma. Mais que se passe-t-il si je souhaite simplement créer un
lien vers une page spécifique ? Et si je voulais
envoyer quelqu'un vers un endroit plus direct afin qu'il n'ait pas à
déterminer la page qu'il doit consulter ? Disons que sur cette page, je vais juste
contrôler le clic sur
cette page, puis appuyer sur « Copier le lien vers la page ». Désormais, chaque fois que
quelqu'un clique sur ce lien, il accède
directement à cette page et non automatiquement à la page de
couverture ou à toute autre page. Maintenant, que faire si vous
souhaitez envoyer un lien vers un cadre spécifique ou vers
un écran très spécifique ? Je vais me concentrer
sur ce modal
ici et je vais passer
la souris sur le titre. Encore une fois, cliquez sur la touche Contrôle et vous allez faire
du copier-coller en tant que lien de copie. Un autre aspect
amusant est que vous pouvez également copier au format PNG, puis coller dans peut-être
Google Slides ou quelque chose comme
ça pour ne
pas avoir à exporter. Cela rend la vie
tellement plus facile, tellement amusant. Si l'un de ces éléments est nouveau pour vous,
allez-y, entraînez-vous à copier et à
vérifier si le lien
vous renvoie au bon endroit. Tout ce dont nous avons
parlé jusqu'à
présent visait à améliorer la communication et à vous mettre sur la même longueur d'onde que votre équipe. Mais qu'est-ce que
les annotations écrites ne suffisent pas ? Parfois, il est très
nécessaire pour un designer parcourir ses créations et de leur parler en temps réel. C'est là que l'un de mes
outils préférés entre en jeu. Nous parlerons de
Loom dans la prochaine leçon.
6. Mise à niveau de la communication Async: est un outil qui m'
a vraiment aidé Loom est un outil qui m'
a vraiment aidé à améliorer
ma communication. Si vous n'en avez pas entendu parler,
il s'agit essentiellement d'
une vidéo asynchrone destinée à aider les équipes à réduire les réunions
inutiles. Dans cette vidéo, je vais vous
montrer comment utiliser Loom
pour communiquer avec votre
équipe en tant que designer, mais avant d'entrer dans le vif du sujet, je voudrais juste vous dire
que si vous êtes quelqu'un qui devient un
peu nerveux le fait de vous voir devant
la
caméra ou d'entendre le son de votre propre voix et l'idée d'utiliser Loom pour communiquer avec votre équipe vous
rend un peu anxieux, je voulais juste vous dire
que je vous ressens totalement. Avant, j'étais très, très nerveuse devant la caméra et même lorsqu'il s'agissait de
présenter mon travail, je trouvais cela beaucoup
plus intimidant de le faire caméra que je ne
le faisais en personne. Il y a
quelque chose de
vraiment anormal dans la caméra et le fait d'
entendre le son de
votre propre voix au début, mais je suis juste là pour vous
encourager à dire que plus vous
le faites, plus vous
le faites vous serez à l'aise et
confiante. Avec chaque vidéo Loom que vous ferez, vous serez de plus en
plus à l'aise et cela vous semblera de
plus en plus facile. À ce stade, lorsque je
fais une vidéo Loom pour un client
avec qui je travaille ou pour un membre de mon équipe, ai littéralement l'
impression d'être une seconde nature, je n'
y repense même pas. Faites-moi confiance là-dessus
et après cette leçon, vous pourrez même m'envoyer une vidéo d'entraînement
à quelqu'un qui n'a aucun jugement,
juste pour
surmonter la peur d'
envoyer votre première vidéo. J'ai découvert que cela m'a donné
plus de confiance pour présenter mon travail dans d'autres
scénarios, comme en personne ou sur
Zoom en temps réel Je vous encourage donc à vraiment vous
y intéresser si vous
peut. Vous n'avez vraiment rien
à perdre car Loom est totalement gratuit
pour commencer, vous pouvez avoir jusqu'à 25
vidéos de 5 minutes
chacune avant
de devoir commencer
à payer
pour un abonnement. Si votre équipe souhaite
utiliser Loom dans son ensemble, vous pourriez probablement
obtenir un budget de la part de votre entreprise. Une fois que vous avez créé votre compte, téléchargez
l'extension pour un ordinateur Mac ou Windows. Cela vous permettra de commencer à enregistrer en
quelques clics. Lorsque vous cliquez sur l'
icône Loom dans votre barre d'état, l'application s'ouvre et vous permet de configurer l'enregistrement
que vous allez effectuer. abord, décidez si
vous souhaitez enregistrer uniquement votre écran ou votre
écran et votre appareil photo. Choisissez la partie de
l'écran que vous souhaitez capturer et assurez-vous utiliser la
webcam et le microphone appropriés. Commencez ensuite à enregistrer. Vous pouvez déplacer votre caméra
faciale à tout moment tout
au long de l'enregistrement, ce qui est très pratique Vous pouvez également utiliser la
petite barre d'outils sur la gauche pour suspendre ou arrêter l'enregistrement ou
ce crayon ici pour dessiner sur votre écran, attirer l'attention sur des choses ou montrer vos idées plus en temps réel. J'ai inclus un lien dans
la section des ressources de ce cours pour que vous puissiez regarder
une vraie vidéo de Loom que j'ai créée pour
l'une des équipes sur lesquelles j'ai travaillé
ces dernières années afin que vous puissiez
Je vois un vrai problème de conception
au lieu que j'invente quelque chose pour le
bien de ce cours. J'ai pensé que cela
pourrait être utile pour certains contextes réels,
un exemple du monde réel, alors n'
hésitez pas à y jeter un œil si vous pensez que cela
pourrait être utile. Cela ne dure que quatre minutes. Passons maintenant au partage de
la vidéo Loom avec votre équipe, ce qui est très simple. Une fois que vous avez cliqué sur l'icône d'arrêt, votre vidéo
s'arrête automatiquement et commence à être téléchargée votre bibliothèque Loom Une fenêtre de navigateur
s'ouvre pour vous le montrer. Tout ce que vous avez à faire est de cliquer, copier le lien et le tour est joué ! Vous pouvez le coller
où vous le souhaitez pour le
montrer à votre équipe
et obtenir des commentaires. Toute personne disposant de ce
lien pourra
commenter directement
dans Loom, soit en saisissant simplement un commentaire, soit
en vous enregistrant un
commentaire, mais bien sûr, elle peut
également simplement laisser des commentaires dans un fil de discussion Slack ou tout autre
moyen qui fonctionne pour votre équipe. Loom possède des tonnes d'
autres fonctionnalités intéressantes, mais pour les besoins
de ce cours, se familiariser avec le
partage de votre travail plus
important est de
se familiariser avec le
partage de votre travail de
cette façon. C'est vraiment un gain de temps. Si vous voulez vous
entraîner, enregistrez
une vidéo de Loom pour moi et envoyez-la à mon adresse e-mail,
maddy@maddybeard.com, maddy@maddybeard.com, et je m'assurerai de répondre.
7. Documenter votre travail: Vous avez enfin terminé
le projet sur lequel vous et votre équipe
travaillez depuis des mois. C'est la fin de votre processus ? Nan. Il reste encore une étape, mais je
vous recommande vivement de le faire. Mais ne vous inquiétez pas, c'
est super simple et facile. J'ai créé un autre modèle pour vous permettre de le rendre encore plus rapide. Documenter tous les
projets que vous avez réalisés est plus une tactique pour vous-même
que pour n'importe quel autre membre de votre équipe, mais c'est tout
aussi important. C'est un excellent moyen de
suivre
votre impact, de sorte que
lorsque vous
postulez à une promotion ou que vous
mettez à jour votre portefeuille, vous pouvez commencer par un point de départ. Passons directement au
modèle que vous pouvez trouver dans la
section des ressources de cette classe. Comme vous pouvez le constater, ce modèle est essentiellement destiné à vous permettre de
cataloguer tous les projets sur lesquels
vous avez travaillé
dans votre entreprise. J'ai inclus des espaces pour
le titre, la description, votre rôle et les personnes avec lesquelles vous avez
travaillé, les dates, heures du projet, la date de son lancement, des liens
vers la documentation. Comme les designs, les quais de confluence, le projet en direct, un prototype, tout ce qui peut être pertinent. Ainsi qu'un endroit
pour mettre des visuels ou simplement une capture d'écran rapide pour que vous sachiez quel
projet est quel. Je pense qu'il est
important d'inclure toutes les choses sur lesquelles
vous avez travaillé, pas seulement les grands projets. Si l'un de ces
éléments n'a pas de
sens pour l'un de vos projets, vous pouvez totalement vous en
débarrasser ou le modifier. Je recommande même
d'y inclure des activités extrascolaires. En gros, chaque fois que vous avez eu
un impact sur votre entreprise. Peut-être avez-vous créé un
club de lecture pour votre équipe de conception, participé à un hackathon, écrit quelques articles pour le site Web de votre entreprise
ou même organisé un événement hors site pour aider
votre équipe à créer des liens incluez également tout
cela. Allez-y, prenez ce
modèle et commencez à
le remplir avec tous les projets
que vous avez réalisés jusqu'à présent. Il est facile d'oublier toutes
les petites choses sur lesquelles vous
consacrez du temps et de l'énergie. Le suivi de ces informations aura un
impact sur vous, à la fois sur le
plan professionnel et personnel.
8. Réflexions finales: Félicitations pour
avoir réussi ce cours. J'espère vraiment que
vous repartirez avec les outils
dont vous avez besoin pour travailler plus intelligemment, et non plus dur, avec
votre équipe à Figma. N'oubliez pas de télécharger
les modèles de cette classe dans la section
des ressources. Si vous avez des
questions pendant les leçons, hésitez pas à les laisser dans
la section de discussion ci-dessous, et je m'assurerai d'y répondre. Merci beaucoup d'
avoir passé du temps avec moi aujourd'hui et
j'espère vous voir dans un prochain cours ou plus sur ma chaîne YouTube. Au revoir. [MUSIQUE]
Maddy Beard, Product Designer & Educator
