Transcription
1. Introduction: Bonjour, merci d'avoir participé à Coursera badness pendant actuellement chef de designer produit dans une société de logiciels basée à Portland, Oregon. Et je suis vraiment excité aujourd'hui dans cette classe, nous allons apprendre quelques trucs et astuces de productivité et de gain de temps dans Figma. Cela vous fera économiser beaucoup de maux de tête et l'avenir. Cela vous permettra d'économiser du temps et de prouver votre équilibre professionnel et de faire de vous un meilleur designer à long terme. Si vous travaillez en tant que designer, nous savons que parfois vous en avez d'autres à qui vous devez remettre votre dossier. Qu' il s'agisse d'un autre concepteur ou d'un développement. Figma dispose d'un outil incroyablement collaboratif. Ainsi, d'autres coéquipiers avec lesquels vous travaillez pourraient entrer
directement dans votre fichier et interagir avec votre travail de conception. C' est la beauté de Sigma. Vous pouvez voir les curseurs de vos coéquipiers travailler côte à côte rendement. Il est vraiment facile de laisser des commentaires et a appelé les gens
et se fait demander des commentaires directement dans Figma, C'est gratuit, c'est basé sur un navigateur, mais c'est toujours un outil de conception incroyablement puissant et beaucoup de concepteurs l'utilisent dans leur flux de travail quotidien. Mais si vous faites une chose où vous savez que si vous n'avez
pas fichier organisé et que l'écriture ne fonctionnait pas avec la productivité à mon genre de début,
alors il est beaucoup plus difficile de revenir en arrière, résoudre ces problèmes plutôt que si vous venez de commencer penser à la façon dont vous pouvez être le concepteur le plus productif, rapide et efficace. Vous pouvez être dès le début lorsque vous démarrez votre fichier pour la première fois. Et nous en parlerons dans ce cours. Nous allons vous parler de la façon de créer votre système de conception, comment créer une bibliothèque de conception, bibliothèques de
couleurs, des bibliothèques de texte. Nous parlerons également de certaines fonctionnalités géniales de sigmas qui sont intégrées à la productivité, comme la fonctionnalité de mise en page automatique. Ensuite, nous allons parler de quelques commandes et raccourcis clavier qui feront de vous un designer si grand, rapide et efficace. Et il va vous mettre, jusqu'à présent, j'ai eu beaucoup dans les jeux. Et si ça sonne comme un bon, c'est un bon ajustement pour toi. Je vous recommande de rester dans le coin et nous pouvons commencer.
2. Créer des systèmes de conception: D' abord, on va parler d'échange d'un système de design. Un système de conception vous permet de mettre à l'échelle vos conceptions rapidement avec le moins d'effort possible. Donc, si nous allons à Pinterest, vous pouvez commencer à avoir une idée de ce à quoi ressemblent les systèmes de conception. Vous pouvez même commencer à les enregistrer. Si vous êtes fan de Pinterest. Vous pouvez en faire une collection si vous voulez commencer un brainstorming ici je possède des idées de la façon dont vous voulez organiser votre système de conception. Si vous ne savez pas ce qu'est un système de conception ou un logement, ou si vous n'avez pas travaillé avec un auparavant. Ils sont vraiment importants car ils vous permettent de travailler avec des composants et de conserver, ils gardent vos fichiers de conception aussi propres que possible et aussi efficaces que possible pendant que vous travaillez. Vous ne voulez pas travailler avec des morceaux cassés d'un dessin. Parce que disons si vous avez une mise à jour de la marque et que vous devez changer la couleur, disons, Oh, dans cet exemple sur Pinterest, le guide de style de l'interface utilisateur pauvre oeuf, dites qu'il y avait un changement de marque où ils devaient changer cette couleur pourpre en un bleu ou tout simplement une couleur totalement différente de ce qui est montré ici tout au long de l'application. Ils utilisent cette couleur dans leur système de couleurs comme indiqué ici. Une couleur très commune tout au long. Et il arrive souvent qu'une entreprise passe par un changement de marque et que vous devrez changer les composants de couleur primaires. Vous ne voulez pas travailler avec des composants cassés individuels où vous devrez passer par et changer chaque composant à la main, pas ce qui peut prendre des mois. Il est donc extrêmement important de travailler dans des systèmes de conception avec une bibliothèque de conception. De cette façon, vous pouvez effectuer ces changements en quelques secondes plutôt qu'en heures et en heures. Et cela facilite la tâche pour tout concepteur qui entre dans votre fichier à l'avenir et qui doit également effectuer des mises à jour. Une méthodologie populaire de conception, biologie
du système comme Atomic Design par Brad Frost. Et je vais effectivement lier cet e-book gratuit que vous pouvez lire ou commander le livre physique. Vous pouvez en savoir plus sur cette méthodologie. Et ceci, je vais lier cet article Adobe XD aussi qui va dans un peu de profondeur sur la conception atomique aussi bien. Et la façon dont cela fonctionne est que nous avons des atomes, molécules, des organismes, des modèles et des pages, et sans contextes qui peuvent sembler un peu déroutants, mais essentiellement, c'est un bon exemple que j'ai trouvé sur Google du système conçu par une entreprise. J' ai également construit le mien, mais beaucoup d'entreprises avec lesquelles je travaille, je ne peux pas vraiment partager le travail publiquement, donc j'utilise des exemples publics dans lesquels je me suis retrouvé. Vous pouvez continuer à trouver vos propres exemples aussi pour obtenir des idées. Mais d'après ce que nous voyons ici à gauche, et comme nous allons plus loin et la complexité, nous avons les atomes, les molécules, les organismes, les modèles et les pages que nous avançons. Ainsi que cela ressemble à un type,
un guide de style de texte, et quelques exemples de leur utilisation de la visualisation de données tout au long. Il est donc vraiment bon de trouver ces exemples en ligne et cela vous aidera à donner des idées. On peut commencer à chercher sur Figma. Si vous n'avez pas créé de compte sur Figma, vous allez simplement sur figma.com. Vous pouvez vous connecter ou vous inscrire et vous pouvez réellement travailler dans le navigateur, ou vous pouvez travailler directement dans Figma. Et c'est ce que vous verrez ici. Vous verrez si vous téléchargez l'application physique sur votre ordinateur, vous pouvez aller à la section communauté ici et chercher simplement taper dans le système de conception. Et vous verrez en fait beaucoup de kits système de conception de démarrage. Et vous pouvez littéralement commencer à les télécharger. Ce premier, le système de conception d'ampli par fragment à 0,03 démo. Donc, il semble que vous pourriez réellement acheter ça. Vous pouvez dupliquer toutes ces ressources impressionnantes dans la communauté Figma. Donc, c'est un excellent moyen si c'est si écrasant, si vous ne connaissez pas très bien un outil de conception. Mais si vous allez à gauche ici sur les pages de Figma, et vous pouvez faire Commande, barre oblique inverse et masquer l'interface utilisateur dans pages sur la gauche, vous pouvez voir tous ces composants et commencer à jouer avec cela.
3. Outil de mise en page automatique de Figma: Ok, alors nous allons parler de la mise en page automatique de Figma. C' est un outil génial que vous pouvez utiliser pour créer des composants dynamiques super réactifs. Sur Figma, cela vous fera économiser une tonne de temps et de maux de tête, et c'est incroyable et chaque concepteur devrait certainement l'utiliser. Ce sera un tel gain de temps. Et juste l'un des meilleurs composants et fonctionnalités comme figma a à offrir. Donc ils en fait, si vous allez à la section de la communauté
et, et si vous allez à la première page en ce moment, vous pouvez trouver que dans les fichiers de tendance, figma a réellement créé ce guide vraiment utile appelé l'auto Figma aire de jeux de disposition. Si, pour une raison quelconque, vous ne trouvez pas sur la page d'accueil, vous pouvez rechercher ce titre et le localiser. Donc, si nous ne connaissons pas Sigma et
dupliquons ceci, il s'ouvrira automatiquement et sauvegardé dans vos brouillons dans votre zone de projet. Si jamais vous voulez y revenir et jouer avec elle,
il vous donnera quelques chemins afin que nous puissions soit choisir l'ELL débutant,
si vous n'avez jamais utilisé la mise en page automatique, ce qui est nouveau et la mise en page automatique si vous voulez juste voir les nouvelles fonctionnalités, quelques exemples. Juste pour vous de vous référer. Ainsi, vous pouvez commencer à construire vos propres cadres de mise en page automatique une fois que vous êtes à l'aise. Et puis quelques ressources aussi. Je vais lier cet article. Si vous voulez en savoir plus sur la mise en page automatique, Allons simplement avec les options débutants. Donc, ce sera un bon aperçu de ce qu'est la mise en page automatique et pourquoi vous devriez l'utiliser. Et c'est un tutoriel assez amusant pour jouer avec aussi. La mise en page automatique est essentiellement une fonctionnalité de Figma qui vous permet créer des images dynamiques qui répondent à leur contenu. Donc, si vous avez déjà fait bouton dans Sketch ou Figma ou Adobe XD, et vous venez de créer un bouton statique. Vous savez que vous devez changer la largeur
du bouton pour ajuster manuellement les textes que vous entrez. Donc, par exemple, nous avons un bouton statique ici. Si nous tapons juste, oups, je suis un bouton et j'adore la mise en page automatique. Oh non. Donc on ne veut pas ça. Nous voulons que ce bouton utilise, réponde dynamiquement, redimensionne dynamiquement à ce que nous tapons. Donc, notre première étape consiste à appliquer manuellement la mise en page automatique. Vous arriverez dans le panneau latéral droit, cliquez sur Mise en page automatique. Et puis automatiquement, nous pouvons ajouter, j'adore laïc. Et regardez cela maintenant, nous avons un bouton de redimensionnement dynamique. Il maintient le rembourrage cohérent. Et si nous créons un composant maître de ceci, nous
serons en mesure de réutiliser ce composant dans l'application ou le site Web que nous concevons. Et tous vos boutons s'adapteront automatiquement au type, au texte que vous devez utiliser en fonction chaque flux utilisateur et de l'écran pour lequel vous concevez. Un autre exemple de la façon d'aligner plusieurs éléments. Si nous sélectionnons et faisons glisser ces trois composants ici. Et nous pouvons effectivement appuyer sur Maj a, et cela va automatiquement clavier commande mise en page automatique. Et je pense que les raccourcis clavier sont très, très utiles et vous aident à être très efficace. Mais cela montre juste qu'ils se sont réalignés un peu. Nous pouvons également sélectionner ces, déplacer un peu réaligné comment nous pouvons aligner ces verticalement. Cet outil sur le côté droit vous permet de choisir votre alignement. Donc, pour l'alignement vertical, nous voulons, si nous voulions l'avoir centré, nous pouvons également sélectionner l'un de ces composants et en fait vraiment très facilement changer la disposition et toute
la taille du cadre s'adapte aux changements que vous faites ici. Et il est si facile d'ajouter d'autres composants, comme nous pouvons simplement l'ajouter mais nous pouvons le ramener à cet alignement. Si nous voulons aligner horizontalement, nous pouvons également le faire ici. Alors attendez une minute. Oh, vous devez sélectionner le cadre entier. Et puis on y va. Il y a donc beaucoup de choses que vous pouvez faire avec la mise en page, et il est tellement plus rapide de réaligner les choses avec la mise en page automatique appliquée. Ceci montre le réglage du rembourrage pour un bouton. Ce deuxième outil. Donc, ici, vous pouvez réellement passer le curseur sur ces morceaux et faire glisser pour ajuster le remplissage automatiquement. Et cela, cela adopte tout le rembourrage. Vous pouvez également appliquer un rembourrage individuel. Donc, si je voulais comme des
tonnes de rembourrage sur le dessus et puis un peu de rembourrage sur la droite, qui si vous voulez être vraiment audacieux et des modèles de conception comme sûr, mais c'est juste un exemple de la façon dont vous pourriez avoir certaines instances sont certains éléments auxquels vous voudriez un rembourrage spécifique. Un autre exemple de rembourrage individuel. Donc, si vous allez à cet espacement entre les éléments, vous pouvez changer. Si vous avez une liste, vous pouvez facilement modifier la quantité d'espace entre chacune d'elles. C' est un outil vraiment utile aussi. Cela montre comment les différents éléments définis pour redimensionner avec les options de redimensionnement. Donc, si nous cliquons sur chacun d'entre eux, nous pouvons réellement voir comment le redimensionnement est ajusté pour définir deux. Donc, pour ces verticales, ces remplissent verticalement. Ils rempliront le récipient entier verticalement. Celle-ci horizontale. Il étreindra le conteneur horizontalement, mais il gardera cette quantité d'espace. Donc, 32 pixels de rembourrage
est beaucoup, va rester année cohérente. Et à quoi cela ressemble que nous pouvons redimensionner. Et cela continue à s'adapter à leur redimensionnement horizontal. Et puis, si nous redimensionnons verticalement, ces composants verticaux adopteront également. C' est donc vraiment utile si vous travaillez avec des cadres qui tiennent. Par exemple, ici, c'est un excellent exemple. Ces messages sur les médias sociaux, je maintiens l'option enfoncée et vous pouvez réellement
redimensionner en même temps les deux extrémités de l'image dans laquelle vous travaillez. Plutôt que si je maintiens simplement mon option de souris enfoncée, vous pouvez en faire deux en même temps. C' est donc un excellent exemple de l'endroit où le redimensionnement entre en jeu. Parce que, comme disons, si j'éteins la mise en disponibilité
automatique, la mise en page automatique, elle ne répond plus. Il ne le redimensionne pas dynamiquement. C' est une fonctionnalité plus récente qui est vraiment génial si vous travaillez avec des composants que vous voulez être réactifs mais qui ont plusieurs éléments à l'intérieur. Et vous voulez dire que ces pièces répondent dynamiquement à la largeur du conteneur. Voici un exemple de mise en page de la distribution du pacte. Donc, fondamentalement, vous iriez ici et il montre emballé ou l'espace entre les moyens emballés qu'ils restent emballés ensemble que vous développez la largeur. Ou nous voulions cet espace vertical entre si nous devions changer. Donc, si vous avez vu cela adopter ce changement lorsque nous changeons cela pour emballer, l'espace entre signifie fondamentalement que vous n'avez pas à vous
soucier de l'espace entre tant que vous avez votre ensemble de rembourrage. Nous avons donc 16 pixels de rembourrage tout au long. Et alors que nous étirons cela, ces éléments répondront. Les chats super mignons chaton répondront. Et puis ils garderont la distance égale et propre. Et les 16 pixels de rembourrage sur les côtés. La fonction d'alignement vous permet d'ajuster l'emplacement des éléments dans un conteneur ou flottant. Un morceau impressionnant de magma qui permet un transfert très facile aux développeurs. C' est en fait ainsi que j'interagis avec mes coéquipiers de développement. Ma main vient directement à Figma. Cet outil d'inspection permet aux développeurs
de saisir les spécifications de vos éléments de conception très facilement. Et cela montre un très bon exemple de cela. Dans le panneau Inspecter, vous pouvez voir toutes
les caractéristiques et propriétés de ce tableau d'art ici. Ainsi, lorsque vous cliquez sur différents éléments, vous pouvez réellement voir. Ainsi, par exemple, il suffit de cliquer ici comme montre le code de cet arrière-plan, par exemple. Mais si nous cliquons ici, nous pouvons voir toutes les propriétés dans ce cadre. Et c'est vraiment facile pour vos développeurs d'entrer et de saisir ces spécifications. Mais nous sommes à la fin ici et nous avons ce petit défi amusant avec plus de gaz vertigineux. Si nous avons nos compétences. Fondamentalement, ce que je demande est d'interagir avec cette mise en page ici. Donc, notre première tâche est de, si vous cliquez sur une image dans Figma, vous pouvez effectivement sélectionner directement des images, ensemble de
silicium de clic et un tas de composants imbriqués. Si je survole cela et que je clique ou maintiens la touche Commande C enfoncée, l'image vient de mettre en surbrillance. Je peux ensuite le sélectionner automatiquement sans avoir à cliquer. Vous souhaitez lancer un composant imbriqué. Donc, si nous faisons la commande D qui vient de dupliquer notre image. Nous pouvons mise en page automatique activé. Nous pouvons l'ajouter aux troisième poteaux et voir où il est disposé et l'ajouter là. Ensuite, il nous demande de déplacer le quatrième poste vers le haut. Donc, nous ne voyons que trois, mais avec la mise en page automatique activée, nous pouvons élargir la façon dont nous voyons le quatrième. Nous cliquons sur tout ce composant. Donc, cette pièce de carte groupe ici, nous retournons vers le haut. Maintenant, nous pouvons redimensionner notre mise en page, à nouveau vers le bas. Maintenant, il nous demande de changer la largeur de l'image de l'iPhone 11 à 750 pixels. Donc, si nous cliquons, puis cliquez à nouveau, nous avons sélectionné l'ensemble du cadre. Donc, si nous changeons la largeur à 700150 pixels, tout étiré. Donc maintenant, il nous demande de changer la distribution des rangées de statistiques. Donc, ces statistiques sur les médias sociaux ici, nous voulons les sélectionner. Et puis si nous changeons ça pour emballer, maintenant nous pouvons voir toute la liste du personnel. Alors oui, donne une chance à ça. C' est vraiment facile, guide simple. Et puis nous allons continuer à parler d'autres commandes et raccourcis de mots-clés impressionnants.
4. Raccourcis de base essentiels: Maintenant, nous allons parler des raccourcis clavier dans Figma. Si vous allez dans une île du design, Figma, je vais couvrir les raccourcis clavier Mac parce que c'est ce que j'utilise. Vous pouvez utiliser Figma sur un PC avec Windows. Mais si vous allez dans Figma et un fichier et que vous cliquez sur Aide et ressources dans le coin inférieur droit, vous pouvez en fait aller dans le menu des raccourcis clavier. Et tous ces éléments seront disponibles pour vous et ils devraient être mis à jour sans rapport avec votre système. Donc, les raccourcis clavier essentiels que nous avons qui vont vraiment
accélérer votre flux de travail et être vraiment utile dans une variété de situations que celui-ci j'utilise tout le temps comme
la barre oblique inverse de commande et qui vous permet de cacher les panneaux de l'interface utilisateur . Je l'utilise beaucoup quand je marche à travers les designs avec mes coéquipiers juste parce que cela permet à l'écran de ne pas être si encombré quand je ne travaille pas. Choisissez la couleur. Donc c'est le contrôle C. Et ce que ça fait, c'est maintenant que nous avons l'outil compte-gouttes. Et si je sélectionne un autre élément, cette boîte grise ici, et je fais le contrôle C, je peux changer cela beaucoup plus vite que d'avoir à aller et manuellement et sélectionner l'icône hexadécimale et changer que ce que la barre latérale, c'est beaucoup plus rapide. Et le, s'il y a quelque chose que vous voulez rechercher, un menu ou une commande qu'il a déjà plugin, dont nous allons parler de plugins. plugins sont également parfaits pour gagner du temps. Vous pouvez appuyer sur la barre oblique avant de la commande, et cela vous permettra de voir différents éléments système ou plugins que vous avez téléchargés et auxquels vous pouvez accéder plus facilement.
5. Plonger profondes de raccourci du clavier: Ces outils sont assez simples, décrits dans beaucoup de ces éléments ici. Donc, si vous jouez avec ces éléments, les principaux outils de conception en haut, sur la barre latérale supérieure. Vous pouvez facilement commencer à obtenir un blocage pour ces raccourcis plus inconnus qui peuvent vraiment aider à accélérer votre flux de travail. Si jamais vous voulez passer d'un panneau à l'autre que vous voyez, il peut prendre du temps de
déterminer où vous essayez d'aller avec les boutons disposés ici. Il existe des raccourcis clavier qui vous permettent de basculer rapidement entre eux. Donc, si vous le souhaitez, si nous sommes sur des actifs, si vous êtes dans un autre, disons que le panneau Actifs ou composants de
votre système de conception en direct et que vous voulez accéder au panneau Calques, vous appuyez sur Option 1. Ensuite, vous pouvez facilement revenir au panneau Actifs avec l'option deux et au panneau de conception sur le côté droit. Ici, c'est l'option a. Et puis le panneau de prototypage, qui est l'endroit où vous utiliseriez pour créer des prototypes interactifs. Il peut en fait relier des pièces dans Figma et avoir des prototypes de vie ainsi que les conceptions, spécifications, les composants aussi bien. Le panneau prototype est l'option 9. Et si vous deviez inspecter en tant que développeur et que vous voulez Cloud perspective option 0. Ces outils peuvent donc être très utiles si vous essayez de naviguer rapidement entre les panneaux. Nous avons donc un texte très utile, des raccourcis clavier. Celle-ci que j'aime parce que pendant longtemps je ne savais pas que tu pouvais faire des listes et Figma. Et je pensais que c'était impossible. Et j'ai dit Qu'est-ce que tu plaisantes de moi, mais tu ne peux pas. Donc, si vous sélectionnez vos éléments de liste, juste ces lignes de texte, vous pouvez appuyer sur Maj Command 7, 8, et vous avez une liste à puces. Vous pouvez également modifier rapidement l'alignement de ces éléments avec les commandes du clavier d'alignement. Donc, si vous une fois de plus Nouvelles option commande et le, Je suppose que le lettrage correspondant pour chaque alignement. Donc Option Command T les aligne au centre. Option Commande L lignes de gauche, option commande droite ou nos lignes mem écrire une option Commande J les aligne comme justifié. Vous pouvez également ajuster la taille de la police, le poids de la police, l'espacement de la police et la hauteur de la ligne. Et vous pouvez le faire en utilisant les crochets d'angle. Donc, pour la taille de police de ces éléments de liste, si vous appuyez sur la commande Maj puis sur le crochet d'angle gauche, réduisez-les, le crochet d'angle droit augmentera leur taille. Et vous pouvez voir ce que cette taille est ici. Et nous pouvons également ajuster le poids de la police en faisant Option Command, angle bracket. Plus tôt, attendez que le dossier de gauche soit à droite, jusqu'à ce que vous ayez le montant maximum pour cette police spécifique. L' espacement des lettres est juste la touche de commande et les crochets d'angle en fonction de celui que vous utilisez. Et puis la hauteur de la ligne est Shift Option. Et puis les crochets d'angle. Encore une fois, nous ajusterons la hauteur de la ligne. Il y a donc des moments où vous pouvez travailler avec des images et Figma. Et il y a une transformation impressionnante en tant que raccourcis que nous pouvons utiliser lorsque nous travaillons avec des images. Ou ceux-ci s'appliquent également à d'autres éléments. Mais si vous voulez inverser l'alignement ou la direction de cette image, par
exemple, si nous utilisons Maj H, nous pouvons changer la direction horizontale. Maj B le retournera verticalement. L' outil de recadrage, vous avez en fait quelques capacités pour éditer une image dans Figma. S' il appuie sur cette option, nous viendrons ici. Et vous pouvez réellement recadrer et modifier la vue de cette image ici. Donc, si vous jouez avec ceux-ci, vous pouvez apprendre et voir comment ces changements. Voir. Mais l'outil de recadrage, vous pouvez changer. Combien de cela vous n'êtes pas montré. Si vous maintenez la touche Maj enfoncée, les cotes seront conservées comme dernier mot. Et vous pouvez également facilement, si vous appuyez sur Play, vous avez également toutes ces fonctionnalités pour changer l'apparence réelle de l'image avec ces leviers de réglage, vous pouvez très facilement remplacer l'image en cliquant sur Choisir. Imaginez. Vous pourrez sélectionner et télécharger une nouvelle image à partir de votre appareil. Si vous appuyez sur Échap et que vous affichez simplement l'émergence comme normale, vous pouvez vraiment facilement changer l'opacité de tous les éléments graphiques. Comme, sélectionnons ces éléments aussi. Si on appuie sur un, il change l'opacité à 10. Si nous appuyons sur F5, il change à 250, et si nous appuyons sur 100, il le change à 100. Donc, il y a quelques options ici si vous voulez changer l'opacité. Alors disons qu'on travaillait avec ça. Imaginez que nous le voulions comme une image de héros d'un site Web que nous construisons. Et puis nous voulions créer comme une superposition. Et si nous voulions cliquer sur la superposition supérieure là, vous appuyez sur F5, puis récurrencez. Et à propos ou quelque chose par exemple. Et si vous obtenez ce que je dis, mais si juste en utilisant les touches numériques, vous pouvez facilement changer cette opacité. Donc, si vous travailliez avec des superpositions, c'est un outil vraiment utile dans ces cas. Les raccourcis clavier arrangés sont vraiment utiles car sinon, si vous voulez réorganiser vos calques, vous devez entrer manuellement dans l'élément de menu Objet ici, puis faire défiler vers le bas,
cette liste de commandes. Et c'est tellement plus rapide pour le mot clé utilisateur. Donc si nous zoomons et nous sélectionnons ce type violet ici, et ensuite nous voulons envoyer le calque derrière cette plus grande forme rose ici. On peut appuyer sur le crochet gauche de la commande, et ça va envoyer, maintenant, il est caché derrière ce carré rose. Et si on voulait le ramener, on peut appuyer sur Commande, crochet
droit si ça amène. Cela amène le calque, juste un calque vers l'avant ou vers l'arrière. Et hue. Voir plus sur ce panneau ici, dans le panneau Calques, vous pouvez réellement regarder comme si je l'envoyais vers l'arrière, vous pouvez le regarder, juste naviguer dans les calques un par un. Et puis si nous voulons le ramener, nous devrions appuyer tous ces temps si nous voulions
envoyer le calque à l'arrière le plus possible,
en un clic, nous allons simplement appuyer sur les crochets latéraux. Donc j'ai juste cliqué sur le crochet gauche. Si je voulais le ramener en haut, entendu appuyer sur la droite. Maintenant, si je déplace ce calque hors de ce cadre, alors il disparaît et il n'est pas réellement visible même s'il est en haut, il est maintenant en haut d'une autre image. Donc, je ne serai pas en mesure de le voir parce que même si j'appuie sur pour
mettre en haut le crochet carré de droite. C' est dans le mauvais cadre. Donc, une fois que je, si je clique sur Commande Z, qui est annuler, il est visible Encore une fois parce qu'il est dans le bon cadre. Donc c'est quelque chose à garder à l'esprit. Quelques-uns trouvent que les couches de l'oreille sont en train de disparaître. Maintenant quelques raccourcis d'alignement que vous pouvez utiliser. Si vous utilisez les options a et D, vous pouvez aligner à gauche ou à droite très facilement avec celles-ci. Et si vous avez l'option W ou S, vous pouvez facilement changer l'alignement supérieur et inférieur. Aligner les centres est l'alignement vertical ou horizontal. Donc, si vous avez l'option H, il alignera horizontalement le calque au centre. Si vous avez l'option B, il sera aligné verticalement au centre du cadre ou du plan de travail ou du cadre dans lequel il se trouve. Et le Distribuer Spacing, si nous dupliquons ce rectangle ici, nous pouvons distribuer l'espacement. En fait, on en a besoin. Quoi de plus ? Vous souhaitez répartir l'espacement uniformément entre un certain nombre d'éléments. Vous contrôleriez l'option H ou l'option de contrôle B. Et qui alignera ces éléments cer, une fonctionnalité de rangement. Vous pouvez aussi le trouver. Ici, et vous avez quelques options là-bas. Mais si vous vouliez utiliser le raccourci clavier pour cela, c'est juste la touche Option de contrôle et vous pouvez voir comment il a pris plusieurs éléments et juste nettoyé la façon dont ils ont été alignés et l'ont fait dans une liste organisée ou un arrangement organisé d'éléments
plutôt que de les faire un peu en désordre dans leur organisation. Et revenons à la mise en page automatique si nous voulons ajouter la mise en page automatique, encore
une fois, cette commande clavier est Shift a. Et puis cela vient d'ajouter automatiquement la mise en page automatique à ces composants. Et si nous voulions le supprimer pour une raison quelconque, ce serait Option Shift a. Maintenant, ce n'est plus une mise en page automatique. La dernière chose que nous allons passer par la création de composants avec des raccourcis clavier, les
composants vont constituer la majeure partie de votre bibliothèque de conception dans votre système de conception. Et la façon dont ils sont présentés en ce moment, ce ne
sont pas des éléments, sauf l'ONU. Vous voyez ces afficher violet, les contours qui indiquent qu'il s'agit d'un composant. Et vous pouvez voir ici qu'il s'agit d'un enfant direct d'un composant maître. Donc, si nous allons cliquer sur le composant maître de champ de formulaire, nous pouvons réellement voir notre liste de composants de conception et fondamentalement la bibliothèque de conception nombreuses qui composent ce fichier de conception. Donc, par exemple, si nous, si nous changeons l'un de ces composants, comme nous allons changer la couleur de l'étiquette à lire. Nous verrons que la mise à jour a lieu
partout où le composant d'entrée de texte du titulaire de l'étiquette en place est utilisé. Nous verrons ce changement tout au long. Donc, c'est juste pour souligner combien il est important d'utiliser composants dans votre système de dieline parce que vous ne voudriez
pas avoir à changer chaque composant d'entrée manuellement et à créer un composant. Donc, si nous voulions faire tout ce haut, ces trois principaux éléments ou composants, ou simplement appuyer sur Option Command K. Et maintenant cela montre que c'est un composant. Et nous voudrions juste prendre ce composant maître et le placer dans notre système de conception ici dans la page des composants, de sorte que cela soit organisé. Et puis on peut en prendre une copie. Nous pouvons en prendre une copie à partir d'ici en appuyant sur la commande C, le raccourci clavier. Ou nous pouvons aller dans notre panneau d'actifs et ensuite nous pouvons voir ce nouveau composant. C' est le même. Donc, si nous revenons en arrière et que nous trouvons ce composant, nous pouvons le faire glisser et l'utiliser ici. Et puis maintenant, nous voyons qu'il s'agit d'un composant enfant du composant maître que nous venons de créer. Si vous voulez détacher ceci en tant que composant afin que vous puissiez faire un composant différent qui pourrait être un style similaire, mais peut-être vous devez créer un nouveau composant qui l'utilise, certains éléments de conception différents. Vous pouvez appuyer sur la commande Option B, ce qui le transformera en un contour bleu, qui indique qu'il ne fait plus partie
du système de composants que nous venons d'utiliser. Une autre chose, si vous ne voulez pas avoir à aller manuellement à votre panneau d'actifs. Vous pouvez appuyer sur la commande clavier Shift I et vous pouvez extraire une liste très pratique de vos composants que vous utilisez dans votre bibliothèque d'actifs et les saisir facilement de cette façon.
6. Composants de Renaming en vrac: Un autre raccourci que j'utilise souvent comme fonctionnalité de renommage en bloc. Donc, si vous voulez, Disons que nous avons quatre cadres, ou cadre 2, 3, 4, 5. Et nous sélectionnons tous les cadres. On peut, on peut appuyer sur la commande R, la commande RT, le raccourci, et ensuite on peut les renommer en, disons, arrondi, objectifs. Et nous pouvons ajouter même un nombre, ascendant ou descendant. Donc maintenant, nous avons des cercles arrondis, 1, 2, 3, 4. Donc, nous avons simplement facilement renommé tous ces composants sans avoir à le faire un par un. Vous pouvez également, si vous
souhaitez sélectionner un certain nombre de composants dans une zone générale, maintenez la touche Commande, Maj et faites glisser. Et puis cela va sélectionner tous ces ou juste, vous pouvez les cliquer aussi. Donc, si nous voulions seulement renommer ceux sur lesquels je viens de cliquer, alors vous pouvez le faire et ensuite appuyer à nouveau sur la touche Commande R. Et puis nous pouvons ajouter la séquence de nombres. Et puis ça a pris tout ça. C' est hors ligne parce que nous avons sélectionné au hasard les éléments. Mais maintenant, nous avons abc 1, 2, 3, 4, 5, 6. Il est donc vraiment facile de renommer rapidement les composants l'emportent, plutôt que d'essayer de le faire manuellement et le numéro de séquence ou triste ou quelque chose, il est beaucoup plus rapide de le faire de cette façon.
7. Astuce d'outil Nudge: Je vais parler de l'outil Nudge très vite. Donc, si vous avez travaillé sur Figma et vous, vous utilisez vos touches fléchées, vous pouvez pousser un élément d'un pixel. Et si vous maintenez Maj, vous pouvez le pousser de 10. Mais si vous allez dans l'élément de menu en haut à gauche ici et avec le logo, vous pouvez aller dans Préférences. Et puis au bas des préférences, vous pouvez définir votre pousser dehors. Donc, si tu voulais bouger ton, ton gros coup de pouce au lieu de dix, tu pourrais le mettre à jour. Et maintenant, il déplace un 120 pixels avec le raccourci clavier correspondant que j'appuie. Et tout en maintenant le décalage dans une direction que je voudrais qu'il aille. Donc, je pense que 10 fonctionne assez bien pour la plupart. Mais s'il y avait une raison que vous vouliez changer cela, c'est ainsi que vous pouvez le faire.
8. Plugins Figma: Ok, Maintenant, nous allons parler de plugins qui sont incroyables. Il y a tellement de plugins étonnants et Figma, si vous allez à la section communauté et vous allez vraiment trouver tant de ressources. Donc, vous pouvez trouver ce qui est tendance. Vous pouvez trouver des plugins. Thick jam est un outil de tableau blanc en ligne plus récent, ce qui est vraiment amusant si vous travaillez dans cet environnement virtuel distant, ce que beaucoup d'entre nous font maintenant, vous pouvez utiliser ces modèles pour remuer ensemble pour travailler avec des clients. C' est incroyable. Vous avez accès aux systèmes de conception des meilleures pratiques. Figma fournit des filaires, des illustrations, des
icônes, de la typographie, de la conception mobile, kits d'interface utilisateur de conception
Web, juste tout ce que vous pourriez penser comme une sorte de Kit de démarrage ou modèle. Vous avez accès à tant de modèles professionnels pour
jouer avec ou pour construire ou bien sûr,
vous savez, nous ne copions ni ne volons le travail de quelqu'un, mais ce sont des ressources utiles. Et la plupart du temps, s'ils sont libres de droits ou libres
d'utilisation ou sous licence Creative Commons et que vous n'avez pas à vous soucier des droits d'auteur, ils les listeront et ils le diront. Beaucoup d'entre eux sont des outils de marketing, donc ils peuvent être éteints, avoir un lien qui vous emmènera à l'éphédra pour acheter un kit filaire entier, par exemple. Mais d'une façon ou d'une autre, super génial pour obtenir l'inspiration. Et avec les plugins, il y a tellement de milliers de plug-ins qui sont faits pour Figma qui accéléreront votre flux de travail et vous simplifieront la vie. Un que j'utilise beaucoup est que je crée beaucoup de flux utilisateur et mon travail. Donc, si vous cliquez sur l'un de ces tests, sont des mots et cliquez sur Maj ou maintenez la touche Maj enfoncée et cliquez sur l'élément Suivant. Vous voyez simplement que la flèche est automatiquement renseignée pour se connecter à ce flux. Et vous pouvez soit sélectionner les éléments individuels, je vais les relier entre eux aussi. Donc, si vous liez des filaires ou des éléments pour montrer à quoi ressemble un flux utilisateur. C' est si facile. Vous pouvez facilement changer la couleur. Vous pouvez changer les bornes des flèches pour être un style différent. Et vous pouvez aussi, c'est dynamique, donc si vous le faites glisser,
il changera automatiquement la longueur des flèches pour vous. Un autre plug-in que j'utilise très souvent est le plugin Unsplash. Ceci est si utile si vous créez, surtout si vous obtenez les maquettes haute fidélité. Si vous créez, si vous avez besoin de créer un profil utilisateur, par exemple, et que vous avez ce cercle, avez une image utilisateur dans le cercle. Si nous avons tapé chez les jeunes adultes, nous pouvons obtenir cette liste impressionnante ou cette impressionnante sélection d'images de Unsplash, qui sont toutes libres d'utiliser, images
libres de droits que les photographes téléchargent sciemment pour permettre aux gens de utiliser leur travail sans droits commerciaux. Donc, êtes-vous en mesure d'utiliser ces pour les droits commerciaux sans vous soucier de problème de copywriting. Donc, si nous sélectionnons cette image de la façon dont cela est programmé, il sait à l'échelle pour détecter ce que le point focal de l'image. Ainsi, vous pouvez toujours changer le point focal,
si vous voulez ajuster cela en cliquant sur la section de remplissage et en cliquant sur l'image, puis en choisissant recadrer. Vous pouvez ajuster ça ici. Donc vous pouvez, si vous voulez qu'il soit plus concentré sur son visage, vous pouvez le faire avec cet outil aussi. Un autre plugin qui est vraiment utile si vous utilisez beaucoup la visualisation des données dans votre travail. Ensuite, il y a des outils ou vous pouvez entrer vos données. Et vous pouvez créer automatiquement un graphique en courbes, un diagramme de points, un pi de zone de barres un diagramme de points, un pi de zone de barres
ou un graphique en beigne sans avoir à en
construire manuellement un ou par un kit d'interface utilisateur avec visualisation des données, si vous cherchez simplement un simple vous pouvez entrer vos données et automatiquement à elle. Et vous pouvez ajuster cela au besoin pour s'adapter à vos conceptions. Donc ce dernier s'appelait des graphiques. Ce plug-in pour les graphiques est appelé graphique. Mais vous pouvez voir toutes les différentes options ici. Celui-ci est en fait offre une version pro, mais vous pouvez utiliser des données aléatoires. Vous pouvez importer une table ou utiliser un fichier JSON. Donc, c'est vraiment génial si vous avez ces ressources disponibles pour entrer les données. Et puis il dessinera automatiquement un graphique pour vous. Donc, si nous sélectionnons cet élément ici, puis nous allons à nos plugins et cliquez sur dégradés de l'interface utilisateur. Nous avons accès à une tonne de gradients précréés. Et les bons gradients sont en fait une sorte d'habileté. Vous ne voulez pas que ce soit trop dur ou la transition vers moi. Pas naturel. Donc, c'est une très bonne option si vous voulez juste une bonne sélection de. Vraiment beau bout des doigts de cidre dégradé sans avoir à y
penser trop ou passer trop de temps à les recréer. Un autre plugin que je vais passer sur l'option pour les plugins est les plugins de bibliothèque d'icônes. Donc, les icônes de conception de matériel. Material Design est le système de conception et les meilleures pratiques de Google. Et ils ont juste un énorme ensemble d'icônes pré-faites. Vous pouvez utiliser. Beaucoup de gens aiment concevoir leurs propres icônes. Je fais beaucoup de travail où l'interface utilisateur n'a pas vraiment besoin d'être créative. Il doit avoir une interface plus professionnelle ou familière. J' aime donc utiliser des icônes pré-faites car cela permet d'économiser beaucoup de temps et de conception matérielle. Si vous utilisez une bibliothèque de composants pour son développement qui utilise les meilleures pratiques de conception de matériaux et leurs directives de conception. Ensuite, il est vraiment facile de nommer les composants de votre système de conception pour correspondre à ceux-ci. Dans les spécifications du développeur dans vos développeurs sauront exactement quelles icônes utiliser et ils peuvent saisir les spécifications pour connaître la couleur, la taille, puis le nom. Tant qu'il est cohérent avec les icônes du bibliothécaire, Material Design, alors il sera très facile de transférer, mais vous pouvez simplement sélectionner toutes ces icônes. Et du matériel. Le design est open source. Oh, c'est génial, et tu n'as pas à t'en inquiéter. En ce qui concerne le droit d'auteur et des choses comme ça. On a une licence commerciale. Et puis il y a d'autres options aussi. Il y a des icônes de rationalisation est une énorme bibliothèque d'icônes. Et ils ont en fait une option pro pour accéder au fichier SVG. Donc, si cela se charge, mais ils ont une énorme quantité de catégories et leur bibliothèque d'icônes. Donc, vous avez toutes ces options différentes et il est vraiment facile de naviguer et de trier. Comme si vous, je veux dire, ils ont une catégorie de décoration de meubles, ils ont une catégorie pour tout. Donc, ils sont vraiment élégants et juste vraiment cool et il y a tellement d'options à choisir. Mais si vous voulez un peu plus d'une tendance proche ou mise à jour, je suppose. Genre d'ensemble unique d'icônes qui, je pense, streamline a une très bonne variété. Vous devrez peut-être, ça vaut la peine si vous allez l'utiliser beaucoup, Cela vaut vraiment la peine, mais vous devrez payer pour obtenir cet accès en tant qu'utilisateur premium. Et vous devez également vérifier quelle licence commerciale vous utilisez et le nombre d'utilisateurs que vous pouvez avoir une commande pour l'utiliser commercialement. Donc c'est quelque chose à penser aussi. Mais l'utilisation d'une bibliothèque d'icônes comme celle-ci vous fera gagner une tonne de temps et c'est amusant de passer à travers et de choisir ces icônes. Et puis vous pouvez réellement commencer à prendre ces icônes ici et créer ces composants. Et pesos ici pour commencer à construire sur votre icône Bibliothécaire, votre système de conception. Et vraiment facilement basculer d'avant en arrière entre les composants des lignes. Et la façon dont vous changez d'un composant à l'autre. Un raccourci plus rapide est si nous avons créé un composant maître de ceci. Et puis si nous l'avons fait pour celui-ci, celui-ci, si nous dupliquons tous ces éléments, nous avons maintenant ces composants enfants. Et nous pouvons facilement basculer entre l'instance de ces composants. Donc, ici, il dit l'instance d'icône parce que home solid, nous voyons réellement notre liste d'icônes que nous venons de créer, ces composants enfants apparaissent dans ce sélecteur d'instance. Et nous pouvons facilement changer l'instance que nous avons sélectionnée. C' est donc extrêmement utile. Il est bon de vous assurer que vous nommez les conventions sont cohérentes, car vous nommez conventions tout en déterminant comment elles apparaîtront dans ce sélecteur d'instance de swap. Donc c'est quelque chose à garder à l'esprit aussi.
9. Votre projet : Communauté Figma: D' accord. Nous avons eu beaucoup de raccourcis aujourd'hui et beaucoup de hacks de productivité maintenant nous pouvons commencer sur votre projet de classe. Je voudrais que vous naviguiez vers la section communauté et Figma et trouver un modèle de kit d'interface utilisateur que vous aimeriez jouer avec et aller de l'avant et télécharger un. Donc, je suis allé et dupliqué le kit de table de mise en page automatique. C' est donc un get de mise en page qui vous
permet de créer des tables dynamiques réactives très rapidement. Il y a beaucoup de ceux-ci disponibles dans la section communauté
Figma et télécharger ou duplet kit de ressources. Donc, si nous cliquons sur duplicate, il va créer un nouveau projet pour moi qui est ma propre copie et je peux modifier et changer comme je veux. Et donc ils ont la page des conseils et astuces ici qui vous montre comment utiliser le kit. Vous pouvez échanger la variance, vous pouvez tout personnaliser avec des composants pour répondre aux besoins de la table que vous concevez. Et là, vous avez vos textiles, votre système de couleurs. Donc, tout cela, vous pouvez trouver ce système de couleurs ici aussi sur les styles de couleurs. Donc, cela vous permet de changer dynamiquement ceux. Si vous allez de l'avant et cliquez sur une couleur, vous pouvez modifier cette couleur dans votre système de couleurs et elle changera tout au long. Et puis ils ont leurs composants d'interface utilisateur de base que vous pouvez changer le style de. Ils sont moins sur elle aussi. Et sélectionnez un bouton. Et maintenant tous les boutons de texte sont dans cette couleur sarcelle au lieu du bleu royal. Donc, il y a tellement de choses que vous pouvez faire dans les ressources disponibles dans la communauté pour Figma, j'aimerais que vous téléchargez un kit d'interface utilisateur qui vous parle. Il y en a beaucoup. Et si vous commencez à jouer avec ceux-ci et à créer quelque chose, il suffit de créer quelque chose et je lis, essayez d'utiliser tous les raccourcis que nous avons appris. Si vous voulez utiliser un kit système de conception et simplement essayer de créer votre première page de destination. Et vous êtes, si vous avez un projet sur lequel vous travaillez, mais que vous voulez essayer d'appliquer certains des raccourcis ou des hacks de productivité. Vous téléchargez une capture d'écran et partagez quel hack de productivité ou un raccourci que vous apprendrez de cet ensemble va vraiment
vous aider et vous allez de l'avant en tant que concepteur.
10. Merci !: Hey, bon travail en complétant ce cours sur les trucs et astuces de productivité Figma. Je suis vraiment heureux que vous soyez investis dans votre croissance professionnelle et votre croissance personnelle, améliorer votre flux de travail quotidien et investir dans votre éducation, formation
continue, ou tout simplement apprendre une nouvelle compétence que vous avez intéressé par. Et j'espère vous voir dans mes prochains cours. S' il vous plaît abonnez-vous et suivez-moi et vous resterez à jour sur le prochain contenu que je publierai. Et si vous avez des commentaires ou des commentaires sur les types de contenu autour du design et de l'industrie du design sur lesquels vous aimeriez en savoir plus. S' il vous plaît laissez-moi savoir, donnez-moi quelques commentaires et je peux essayer de répondre à certains cours à ce qui est demandé. Merci encore.
Sarah Bannister, UX/UI Designer | Dog Enthusiast
