Transcription
1. Introduction du cours: Êtes-vous intéressé par l'apprentissage d'
un puissant outil de conception capable de faire passer vos compétences en
conception
d'interface utilisateur à un niveau supérieur ? Alors ce
cours Figma pour débutants est parfait
pour débuter Ce cours est conçu pour toute personne ayant peu ou
pas d'expérience avec Figma Que vous soyez un
débutant souhaitant apprendre les bases ou
que vous souhaitiez parfaire
ses connaissances sur Figma, ce cours vous
fournira une base solide pour
utiliser Figma pour la conception d'interfaces utilisateur ? Il n'y a aucune
configuration logicielle requise pour ce cours. Cependant, des connaissances
informatiques de base et une
connaissance des
principes de conception seront très utiles ? Au cours de cette formation
complète sur Figma, nous aborderons un
large éventail de sujets, notamment ce qu'est Figma et ses principaux avantages
pour la conception d'interfaces utilisateur Comment configurer votre compte Figma et naviguer dans l'interface Nous allons apprendre comment installer l' application de bureau
Figma pour des fonctionnalités
supplémentaires Dans le même cours, nous apprendrons également
à créer des fichiers, à utiliser le panneau des propriétés et à superposer des éléments Nous apprendrons également à
concevoir et à travailler avec des cadres, des grilles et des guides, à
ajouter et à personnaliser
diverses formes, à utiliser des outils de stylo et de colis, nous maîtriserons l'utilisation des opérations
booléennes pour manipuler et combiner Nous apprenons à créer des boutons
interactifs et des composants de design réutilisables. Dans le même cours, nous
explorerons la vaste bibliothèque de plugins
Figma pour étendre
vos capacités de conception Et à la fin de tout cela,
nous apprendrons à exporter et à partager vos conceptions
pour diverses utilisations. À la fin de ce cours, vous aurez acquis les compétences et
les connaissances nécessaires pour utiliser Figma
en toute confiance pour créer des interfaces utilisateur de qualité
professionnelle Je suis le docteur Rashi, professeur,
conférencier et YouTuber passionné, et je vais être l'
instructeur de ce Alors, prêts à plonger dans le monde de Figma ?
Commençons.
2. Qu'est-ce que Figma ?: Alors, qu'est-ce que Figma ? FGMA est un
outil de conception basé sur le cloud pour créer des interfaces
utilisateur et des expériences
utilisateur, ce que nous appelons l'UI UX, n'est-ce pas ? Dans la conception de sites Web et le développement d'
applications. Il est donc similaire à
des programmes tels que Sketch, mais avec une focalisation et une
collaboration, il favorise la collaboration
entre les équipes , entre vos partenaires
ou vos collègues. Vous pouvez facilement travailler sur un projet
spécifique en temps réel. Ensuite, il permet de
créer des graphiques vectoriels, concevoir des mises en page et d'
ajouter des animations L'un des avantages de Figma est sa facilité
d'apprentissage Il possède une interface
conviviale pour les débutants, ce qui le rend idéal pour ceux qui débutent dans
la conception de logiciels. Ensuite, nous parlons de collaboration
en temps réel. C'est très, très
important et c'est l'un des principaux objectifs de Figma, de pouvoir travailler avec d'autres sur le design simultanément, quel que soit
votre emplacement Ainsi, où que vous
soyez dans le monde, vous pouvez travailler en collaboration sur un projet ou sur un fichier
en particulier En temps réel, vous pouvez
apporter des modifications directement. Nous examinons donc comment
collaborer dans le cadre de ce cours
en particulier. Ensuite, nous
parlons de prototypage. Vous pouvez créer des prototypes
interactifs pour tester et affiner
vos idées de conception. C'est très simple avec Figma. Ensuite, nous parlons de
la nature basée sur le cloud. Dans Figma, vous avez
accès aux fichiers depuis n'importe quel appareil connecté à
Internet Il est donc facile de
synchroniser les éléments et vous
pouvez y accéder n'importe où. Comme il est basé sur le cloud, vous n'avez rien à enregistrer. Il enregistre automatiquement votre travail lorsque vous travaillez
directement sur le cloud. Même si vous avez
la version de bureau
, elle permet
également de synchroniser facilement la version en ligne. Cela fonctionne donc facilement. Une fois connecté à
Internet, vous pouvez continuer à travailler
directement sur Figma Enfin, nous
parlons des fonctionnalités de la poignée. vous pouvez facilement
faire passer vos designs Avec Figma, vous pouvez facilement
faire passer vos designs du
concept
au développement C'est très, très simple. Il s'agit d'un
outil tout-en-un que vous pouvez utiliser pour développer des applications,
concevoir des sites Web, concevoir différents types
d'éléments interactifs, et vous pouvez passer au prototypage et
profiter de votre expérience J'espère que cette vidéo vous plaira. Merci de votre attention,
et j'ai hâte de vous
voir au prochain cours.
3. Créer un compte et s'inscrire: Pour commencer, vous pouvez accéder à
n'importe quel endroit de votre navigateur. Vous pouvez ouvrir n'importe quel
navigateur. Vous arrivez dans la barre de recherche ici et recherchez simplement Google, et vous pouvez rechercher
Figma très facilement Vous pouvez simplement rechercher Figma
et vous le verrez ici. L'outil de conception d'
interface collaborative et vous pouvez le voir
avec la première option. Ou bien, vous
pouvez simplement vous rendre sur figma.com et cela vous
redirigera vers
la même plateforme Très bien, cela vous amènera sur cette même plateforme. Voici donc le site Web de la FGMA. Vous pouvez soit vous rendre
directement sur figma.com, comme je l'ai dit, soit
suivre la procédure de Google Et une fois que vous êtes ici, la
façon dont vous concevez, alignez et construisez compte vraiment. Faites-le donc avec le FDMA. Vous pouvez donc voir
qu'il ne s'agit que d'un échantillon collaboratif de ce qu'est la plateforme et de ce pour quoi vous
pouvez l'utiliser Voici donc certaines des fonctionnalités que vous pouvez étudier et simplement comprendre comment la plate-forme peut être utilisée pour développer
différents types d'applications, différents types de
choses liées au Web et des prototypes. Donc, ici, vous
pouvez continuer à avoir une meilleure compréhension
de certains des avantages et
des fonctionnalités qu'il offre que vous pouvez réellement parcourir juste pour comprendre
brièvement la plate-forme. Maintenant, une fois que vous avez
terminé, vous pouvez
démarrer en créant un
compte ici, et vous pouvez le faire en utilisant simplement
Commencer
ici ou vous pouvez utiliser la fonction de
démarrage en tant qu' invité gratuitement ici. Vous pouvez également
consulter le lien dans
la description de cette vidéo et vous
pourrez trouver un lien pour vous inscrire. Cliquons donc sur
Commencer gratuitement, puis vous aurez
ces options de correspondance. Vous pouvez vous connecter directement
avec votre compte Google. Vous pouvez vous inscrire directement
avec votre compte Google, ou vous pouvez utiliser n'importe quel e-mail
ou mot de passe, et vous pouvez l'utiliser pour
créer un compte directement. Pour ce tutoriel,
nous allons utiliser l'un de mes comptes G mail
juste pour nous connecter,
afin de pouvoir cliquer sur
le compte Gmail. OK. Ainsi, une fois connecté, vous serez redirigé vers
cette plateforme. Maintenant, ici,
vous devrez répondre à quelques questions pour avoir
accès à la plateforme principale. Nous avons la possibilité de sauter à tout moment
si vous ne le souhaitez pas. Mais je pense qu'il
est conseillé de simplement répondre aux questions En gros, ce
ne sont que des questions de base, vous pouvez
donc simplement dire,
quel est votre nom ? Vous pouvez simplement écrire,
puis vous pouvez continuer. Quel type de travail faites-vous ? C'est juste pour qu'ils puissent préparer
la plateforme pour vous, juste pour avoir quelques
données vous concernant. Ainsi, par exemple, nous pouvons
dire étudiant et éducateur, puis nous pouvons passer au suivant, puis nous pouvons dire : est-ce que l'un
de ces termes décrit votre travail Travailleur indépendant dans un
camp d'entraînement, dans une entreprise, dans une agence ou une école Disons à l'école, par
exemple. Ensuite, nous pouvons voir quel type d' institution
fréquentez-vous ou pour lequel vous travaillez ? Disons
l'enseignement supérieur, par exemple. Ensuite, vous pouvez voir avec qui
collaborez-vous habituellement ? Disons coéquipiers. Vous pouvez donc dire que vous souhaitez
inviter des collaborateurs. Pour le moment, je
ne veux inviter personne, donc je
peux simplement sauter cette étape. Et puis, ce qui
vous amène chez Figma aujourd'hui, commencer un nouveau travail et un nouveau projet Alors lancez un nouveau projet d'emploi. C'est donc mon objectif pour aujourd'hui. Et avez-vous déjà utilisé des produits
FGMA ? Je peux dire que non, c'est la
première fois parce que c'est la première fois
que je t'emmène
avec moi en voiture . Nous avons donc juste une
idée de ce que c'est et de quoi nous pouvons l'
utiliser directement, afin de
tout apprendre sur le tas. Donc, quel plan fera l'affaire, c'est le plan de démarrage, qui a cette fonctionnalité de correspondance, ou le plan professionnel, qui a également cette
fonctionnalité de correspondance. Eh bien, pour ce didacticiel, nous allons simplement passer
au plan de démarrage. Nous pouvons donc simplement sélectionner le plan de démarrage et
passer au suivant. Maintenant, que
voudriez-vous faire d'abord, c'
est utiliser le Figma ou
continuer à utiliser le
tableau blanc dans Feed Jam Mais pour le moment, pour me concentrer sur le
design avec Figma, je peux sélectionner
la première option, puis je peux simplement continuer
et dire « terminer Très bien, vous êtes maintenant sur
la plateforme principale. OK ? Vous avez donc
la possibilité de simplement
suivre cette procédure et cela va simplement
vous montrer comment vous pouvez envoyer du texte à des couches de texte
avec vos barres d'outils, déplacer des outils vous permettant de
déplacer vos documents vers vos fonctionnalités vers
différents endroits, etc. Et ici, vous avez le formatage dans le panneau de conception Vous avez les fonctionnalités de formatage, les fonctionnalités de conception ici Et vous pouvez simplement vous
montrer les propriétés en un coup
d'œil. Vous pouvez donc simplement
commencer un nouveau fichier à partir de cela, puis vous pouvez
simplement continuer et
être le bienvenu sur la plate-forme principale. OK, c'est donc la
plateforme principale sur laquelle vous
serez invité chaque fois que
vous vous inscrivez à Figma Ceci conclut ce cours sur la façon de créer un
compte et de se connecter à Figma Dans le prochain cours, nous
allons examiner certaines des choses de base
que vous devez comprendre avant d'utiliser Figma Tout cet
aperçu général de l'interface. Nous allons
passer en revue certaines des choses
de base
que vous devez
comprendre avant
de commencer à créer fichiers et de commencer à travailler sérieusement. D'accord, mais nous allons
aborder certaines des choses
de base que vous devez
comprendre à ce stade. Alors à la prochaine fois,
merci d'avoir regardé et j'ai
hâte de vous voir
au prochain cours.
4. Aperçu de l'interface de base: Dans le dernier cours, nous avons
expliqué comment s' inscrire et créer un
compte dans Figma Dans ce cours, nous allons
parler des bases, l'aperçu général
de l'interface, ce que vous devez comprendre et des points auxquels vous devez prêter attention. Donc, la première chose à faire est que lorsque vous vous connectez à votre compte Figma, c'est la principale plateforme laquelle vous
allez être connecté En haut à gauche, vous avez votre compte. Vous avez la possibilité de
modifier les choses directement. Vous pouvez modifier n'importe quoi ici. Vous pouvez également ajouter votre photo COV, vous pouvez ajouter n'importe quoi.
Et puis vous pouvez changer le thème de l'ensemble des
looks de la figma C'est un thème léger.
Tu peux le faire noircir. Certaines personnes l'aiment comme ça. Mais je pense que je le préfère
dans le thème des lumières, donc vous pouvez toujours utiliser le thème et vous pouvez
le modifier directement. Ou vous pouvez également suivre
la conception
du système si cela vous intéresse. Maintenant, encore une fois, vous avez le
bureau, les paramètres. Ici, vous avez un tas de paramètres avec lesquels vous pouvez
jouer, par exemple, vous pouvez changer le nom, puis vous pouvez
changer la langue ou le titre du poste, le thème. Vous pouvez également modifier à partir d'ici. Et d'autres fonctionnalités. Vous pouvez donc simplement les étudier,
puis vous pourrez comprendre les puis vous pourrez comprendre informations
du compte à partir d'ici. Vous pouvez mettre à jour,
supprimer ou ajouter quoi que ce soit. Ensuite, vous pouvez supprimer votre
compte, même définitivement, si vous en avez terminé avec ce que vous êtes faire et que vous souhaitez le supprimer. Et puis il s'agit d'une communauté
pour les utilisateurs de Figma. Vous pouvez avoir le vôtre, rejoindre la communauté Figma pour publier fichiers et des plugins,
commenter et voir ce que font
les gens Vous pouvez suivre les membres
et aimer ce qu'ils utilisent, et vous pouvez également apprendre
d'eux. Ensuite, vous pouvez
également gérer
les notifications à partir d'ici en utilisant
cette fonctionnalité. Il s'agit donc des trois points. Il s'agit de paramètres. Si vous le souhaitez, vous pouvez télécharger
la version desktop, qui est en fait celle que nous
allons utiliser
pour ce didacticiel Nous allons utiliser la version
desktop de Figma. Je vais vous montrer comment le
télécharger et l'installer. C'est très simple, puis vous
pouvez l'ouvrir et commencer à travailler. Il se
synchronise automatiquement entre la version de bureau et
la version en ligne, vous n'avez
donc pas à vous
soucier de quoi que ce soit Et voici le profil de la
communauté. Vous pouvez créer votre
propre profil et simplement rejoindre la communauté, puis partager des idées. Si vous avez un défi, vous pouvez toujours le
partager avec eux, puis vous pouvez communiquer et ajouter vos propres
commentaires au défi de certaines personnes. Ensuite,
vous pouvez choisir le compte sur lequel vous
souhaitez travailler, ce qui signifie que vous pouvez travailler
avec plusieurs comptes, puis vous déconnecter
si cela vous intéresse. C'est donc la première option. Vous pouvez effectuer des recherches
directement à partir d'ici. Vous pouvez rechercher des fichiers, des projets, vous pouvez rechercher n'importe quoi à
l'aide de la barre de recherche. Hein ? Le suivant, vous
avez le récent. Ceci décrit certaines
des principales choses que
vous avez récemment abordées au sein de Figma Ainsi, si vous avez touché un projet ou un fichier en particulier sur lequel
vous travaillez, vous pouvez toujours le trouver
dans la version récente d'ici. Et puis en haut, vous
avez les modèles de confiture de figues. Si vous souhaitez travailler sur des modèles, vous pouvez facilement les consulter et travailler sur des modèles.
Ils sont classifiés. C'est tout. Vous pouvez
consulter des brainstormings, diagrammes, plannings et des réunions en fonction de ce que
vous essayez de créer Mais alors notre objectif, ce
sont les vues récentes, d'accord. Et puis ce sont des fichiers partagés. Si vous avez partagé des fichiers, si des personnes ou
des équipes ont partagé des fichiers, vous pouvez
les trouver ici. Projet partagé également. Vous pouvez trouver les projets
qui sont partagés avec vous afin de pouvoir y
travailler directement. Maintenant, ce
sont vos équipes. Vous pouvez avoir plusieurs équipes sur
lesquelles vous pouvez travailler ensemble, puis vous avez le brouillon. Draft est en fait
l'un des
endroits les plus importants de Figma C'est ici que vous pouvez
créer différents types de projets, différents
types de fichiers. Vous pouvez créer et travailler
dessus directement à partir d'ici. Vous pouvez donc ajouter différents types de fichiers à partir de ce brouillon
en utilisant ce signe plus. Vous pouvez donc cliquer
sur le signe plus, et vous pouvez voir que vous pouvez
créer un nouveau fichier de conception, nouveau fichier figma fi jam Vous pouvez créer à partir d'
ici, et vous pouvez importer des médias directement à partir d'ici. Je vais vous montrer en détail
comment l'utiliser. Ensuite, ici,
vous avez la possibilité de
consulter votre plan et de le
mettre à niveau si nécessaire. Ensuite, ici, vous avez des équipes. La première est donc la
première chose que vous avez. Vous pouvez avoir plusieurs projets. Vous pouvez ajouter de nouveaux projets
directement à partir d'ici, ou pour n'importe quel projet, vous pouvez venir ici, vous pouvez appuyer sur ce signe plus pour
démarrer un projet. C'est également une autre solution, mais j'aime toujours
commencer par le brouillon. À partir du brouillon, c'est beaucoup
mieux et plus facile. Ce sont donc les principes de base. Ici, c'
est l'
endroit principal où vous pouvez voir votre brouillon, puis vous pouvez le voir
supprimé. Si vous
travaillez sur un brouillon ou des projets
supprimés, vous pourrez les
voir ici. Maintenant, en haut à droite, c' est ici
que vous pouvez payer. Vous pouvez ajouter des fichiers de conception. Vous pouvez créer et
ajouter des fichiers de conception en cliquant simplement sur
ce fichier de conception, et il créera simplement un nouveau fichier de conception pour vous. De la même manière, vous
pouvez également créer un fit jam board directement
depuis ce coin supérieur droit. Ensuite, vous avez
la possibilité d'importer multimédia, qu'il s'agisse d'une image B ou d'une vidéo, vous pouvez importer
directement depuis Pre. Vous pouvez consulter tous les fichiers, fichiers de
conception, les fichiers Fi-Jump, l'arrangement, vous pouvez
vérifier le tri. Est-ce alphabétique ? Qu'il s'agisse de la date de création ou de dernière modification
ou du premier jour ou du plus récent, vous pouvez organiser
les fichiers en conséquence, puis
modifier l'apparence. Il s'agit de la vue en grille. Vous pouvez le changer en
mode liste , ce qui
ressemble à ceci. Et je pense en particulier que j'aime que ce soit dans la
vue en grille, qui est ma préférée. Donc, ici bas, au cas où vous auriez des difficultés dans le
cadre de votre travail, vous pouvez toujours
vous y attarder. Et cliquez dessus, et
vous aurez la possibilité de interdire de regarder
leurs vidéos YouTube Vous pouvez consulter leurs forums d'
assistance, les notes de publication
et envoyer des commentaires si vous rencontrez des problèmes que vous pouvez partager
avec la marque avec l'entreprise, puis vous pouvez également contacter directement le
support. Vous pouvez demander à la communauté. Cet onglet vous
redirigera également vers la même
communauté où vous pourrez interagir avec les gens et partager vos défis et vos idées. Et puis ici, nous avons le raccourci, le
raccourci-clavier. Et puis, en bas,
vous pouvez réinitialiser votre système d'embarquement. Tout revient à la
réinitialisation et vous pouvez modifier la disposition du clavier et la langue
à partir d'ici. C'est donc une chose très
importante laquelle vous pouvez toujours
cliquer pour comprendre ou pour vous connecter
aux autres fonctionnalités. Et puis ici aussi, vous pouvez explorer la communauté
si cela vous intéresse. Ainsi s'achève ce cours sur
la compréhension des bases de Figma Les
éléments de base que vous devez
comprendre avant de
commencer à utiliser Figma Dans le prochain cours, nous
allons apprendre à créer un projet ou un fichier sur lequel
nous pouvons travailler directement. OK ? Nous créerons donc
un projet et un fichier, et nous allons également comprendre la
vue d'ensemble de l'
interface,
afin que vous puissiez
comprendre clairement ce qu' est
la plate-forme et à quoi nous
pouvons l'utiliser directement. Alors jusqu'à la prochaine fois,
merci d'avoir regardé et j'ai
hâte de vous voir
au prochain cours, non ?
5. Installer l'application Figma: Dans ce cours, nous allons
apprendre comment télécharger et installer l'application de bureau
Figma, ce qui est très, très important si vous l'avez installée
sur votre système C'est
donc votre travail
et c'est le processus Et attention, comme
je l'ai déjà dit, il est très facile de travailler
sur la version de bureau, et elle est automatiquement synchronisée avec
la version Cloud Ainsi, chaque fois que vous vous connectez
à un ordinateur, vous retrouverez toujours
votre travail intact. C'est juste pour faciliter l'accès que la
version de bureau est créée. Donc, pour accéder à la version de
bureau, il vous
suffit de vous
connecter car
nous sommes connectés ici,
et vous pouvez accéder en haut à gauche, sur
cette fiche médicale. Vous pouvez cliquer, comme
nous l'avons montré précédemment. Vous pouvez voir télécharger l'application de bureau. C'est ici que vous pouvez
obtenir l'application de bureau la télécharger
et l'installer. Vous pouvez donc cliquer
pour détecter
automatiquement le type de système
d'exploitation que vous utilisez, il
s'agisse d'un système d'exploitation Windows ou d'un système d'exploitation Mark. Il
détectera automatiquement et
vous donnera la version de ce système d'exploitation
en particulier. Donc, dans mon cas, j'utilise le système d'exploitation
Mark, donc il va me donner automatiquement la version
Mark. Donc, une fois que je viendrai ici, il enregistrera ce fichier. C'est très très petit. Tu peux le voir. Vous pouvez simplement
cliquer et vous pouvez le voir. Notre modèle FIG DMG,
une fois que
vous aurez cliqué, vous pourrez
voir l'emplacement, et vous pourrez commencer à
travailler dessus directement Vous pouvez donc
double-cliquer et commencer à ouvrir et à
installer directement. Il est très facile à installer. Il s'agit simplement d'un processus étape
par étape. Comme nous installons des éléments sur des logiciels sur le système
d'exploitation Mac. Il vous suffit donc de le
faire glisser et de le déposer ici. Et il va juste
vous donner la
version textop installée. Il a donc détecté que j' ai
déjà
installé un. Est-ce qu'il va remplacer cet arrêt parce que je sais que
je l'ai déjà installé. Mais c'est le processus,
il suffit de glisser-déposer, et nous allons l'installer. Donc, une fois que vous l'avez installé
, vous pouvez simplement ouvrir et pour l'ouvrir,
vous pouvez simplement
passer à la partie de
lancement ici. Vous pouvez simplement cliquer et
vous pouvez voir Figma. Vous ne le voyez pas,
vous pouvez rechercher Figma et vous le verrez ici Figma Donc, une fois que vous avez cliqué,
il s'ouvre Vous pouvez
donc fermer
cette version textop et continuer à travailler
sur la version en ligne Et vous pouvez continuer à travailler
sur la version desstop. À condition de vous connecter, vous pouvez continuer votre travail. Il s'agit donc de la version de bureau, je viens de me connecter, et vous pouvez voir qu'il
n'y a aucune différence entre la version de bureau et
la version en ligne. C'est donc juste pour faciliter l'accès, afin que vous puissiez tout travailler
sur le bureau. Donc, en gros, voici
comment télécharger et installer l'
application de bureau pour Figma Vous pouvez simplement le suivre, le télécharger et l'installer sur votre système pour que nous puissions
poursuivre le projet. Dans le cours suivant,
nous verrons
comment créer un
fichier et un projet
, puis nous allons donner un aperçu de la plate-forme de fichiers principale,
sur
la plate-forme principale, vous
puissiez comprendre
quels sont les
éléments importants auxquels vous devez faire attention
lorsque vous utilisez FICMA lors de utilisez FICMA lors création d'un fichier et de sa
gestion sur FIGMA Alors à la prochaine fois, merci de votre attention et
à bientôt au prochain cours.
6. Créer un aperçu de dossier et d'interface: Dans ce cours, nous allons
apprendre comment créer un fichier et
présenter un aperçu général de l'interface dans
un fichier en particulier. Donc, pour commencer, comme je l'ai dit, vous pouvez participer au draft, ce qui est le plus simple, et
vous pouvez faire partie de l'équipe. Vous pouvez donc
accéder au signe plus, puis vous pouvez démarrer, comme vous
voulez. Vous
pouvez également accéder au
fichier de conception ici et il va démarrer un nouveau fichier de conception. Pour ce tutoriel, nous allons
commencer par le brouillon, vous pouvez accéder
au brouillon et cliquer sur ce signe plus. Et encore une fois, vous
avez la possibilité de commencer la
conception à partir d'
un nouveau fichier de conception. Ou à partir d'un nouveau fichier fik jam. Pour ce cours,
nous allons démarrer nouveau fichier de conception en
l'important simplement en cliquant
sur le nouveau fichier de conception. Et une fois que vous aurez cliqué dessus, vous serez redirigé vers
cette plateforme. Donc, la première chose que vous
devez regarder
en haut, c'est que vous avez ce brouillon, puis vous avez le projet
intitulé. Vous devez donc nommer le projet dès le début.
C'est la première étape. Nous pouvons donc le faire en
double-cliquant ici, et disons que c'
est notre premier cours. Sur Figma. Vous pouvez donc cliquer sur. Et maintenant, vous avez ce fichier, le
premier
cours sur Figma en cours d'
ébauche sous le brouillon du projet Vous pouvez maintenant cliquer sur ce petit menu déroulant et
vous avez la possibilité d'afficher l' historique des
versions pour exporter ce projet, puis de
modifier le profil de couleur du fichier, et vous pouvez dupliquer le fichier. Vous pouvez le renommer
quand vous le souhaitez, et vous pouvez déplacer le
projet quelque part, puis vous pouvez séparer ce fichier ou
le supprimer à votre guise C'est donc la principale chose
que vous pouvez faire ici. Il s'agit du canevas principal sur
lequel vous pouvez effectuer tous vos ajouts,
créer des prototypes, etc. Tu fais tout ici. Maintenant, sur la gauche, vous avez les couches où vous pouvez
effectuer une recherche ici. Vous pouvez également rechercher
n'importe quoi dans vos couches ou dans
les autres plateformes. Ensuite, vous avez
les couches
répertoriées , les actifs
et les pages. Vous pouvez également répertorier les pages et continuer à
travailler sur le projet. Nous examinons cela en détail au fur et à mesure que
nous poursuivons notre projet. Donc, pour le moment, vous
pouvez être sur des couches. Et vous pouvez voir à droite que
vous avez cet onglet de conception. C'est là que vous trouverez la plupart
des éléments clés avec lesquels
vous pouvez jouer,
tels que les propriétés, puis vous avez cette section de
prototype. Vous pouvez créer un prototype,
créer une nouvelle connexion. Vous pouvez également exécuter votre
prototype
à partir d'ici pour voir à quoi il
ressemblera au point final. Ce sont donc deux
positions très importantes sur le canevas dont vous devez
comprendre comment les utiliser. Maintenant, en haut à gauche, vous avez ce menu déroulant. Une fois que vous avez cliqué sur
ce menu déroulant. Vous pouvez consulter l'
accès rapide à l'action rapide. Si vous souhaitez
consulter une action rapide, vous pouvez le faire. Et puis vous avez le dossier. Vous avez la possibilité de
créer un nouveau design, nouveau fichier f jam à partir ici ou vous pouvez placer
une image ou enregistrer une copie locale du projet sur
lequel vous travaillez
sur votre machine locale ou directement
sur votre ordinateur. Et vous pouvez
enregistrer dans l'historique des visions, si vous le souhaitez, ou vous pouvez
afficher l'historique des visions. Et ainsi de suite, vous
pouvez exporter des cadres au format PDF et exporter votre
projet vers un fichier local. Vous disposez de ces
options de base, comme l'édition, vous pouvez copier, tester et trouver
des éléments pour remplacer les informations. Vous pouvez constater que vous pouvez faire
beaucoup de choses à partir d'ici. Vous pouvez modifier les vues. Vous pouvez également insérer des quadrillages, des
règles, etc. simplement pour
vous aider dans votre travail et
vous pouvez zoomer et dézoomer Vous avez de nombreuses
fonctionnalités de Zoom directement ici. D'accord. Ensuite, vous pouvez afficher et masquer directement l'
interface utilisateur. Vous pouvez afficher les contours, les contours des
cadres, etc. Nous apprenons à utiliser la plupart
de ces outils de base, choses de
base au fur et à mesure que nous
naviguons. Vous avez les fonctionnalités de l'objet, vous avez les fonctionnalités du texte, dont nous avons un grand nombre dans le
panneau des propriétés ici, et puis vous avez l'entité
organisée. Qui parle de la
disposition en couches, laquelle vient en premier et
laquelle vient en dernier La fonctionnalité vectorielle,
les plugins, les widgets et
les préférences, vous pouvez activer ou désactiver
n'importe quoi ici pour modifier les préférences en ce qui
concerne ce qui se passe ou ce qui s'affiche
sur la plateforme. Vous pouvez donc vérifier ou nouer des objets
anciens d'ici. Vous pouvez également changer le thème
du mode sombre au mode clair, ou du clair au foncé, ou vous pouvez suivre
le thème du système. En utilisant également cette méthode. Profil de couleur, disposition du clavier, et vous pouvez avoir un grand nombre de commandes à partir d'
ici et de bibliothèques. Vous êtes libre de consulter les bibliothèques et de créer un compte, ce que nous avons
également montré ici. Vous pouvez vous déconnecter,
consulter le résumé juridique, les didacticiels
vidéo, ainsi que les raccourcis
clavier. Page d'aide, vous pouvez
consulter toutes ces informations ici. C'est donc la première option. L'élément suivant est
cette fonctionnalité de déplacement. Vous pouvez cliquer sur ce petit
menu déroulant et déplacer votre contenu ou votre projet. Vous pouvez redimensionner les objets, ce que nous allons examiner en détail sur la façon de les utiliser. Ensuite, nous avons le cadre que vous pouvez activer en
utilisant la lettre F, ou vous avez la section, vous pouvez créer une section,
vous pouvez créer des tranches. Nous allons
apprendre à utiliser tous ces
éléments en détail, ainsi
que leurs raccourcis. Ensuite, vous avez formes de différents types, des
rectangles, lignes
rectangulaires, des
flèches, des ellipses, des
polygones, etc. Vous pouvez placer des images
et des vidéos si leurs raccourcis
respectifs vous intéressent. Vous pouvez aller de l'avant et
explorer tout cela. Et puis ici, la prochaine,
c'est que nous avons les outils Pen. Vous avez le stylo et le crayon en fonction de ce que vous souhaitez
utiliser. Nous les avons tous les deux. Et puis la suivante
est la fonction de texte. Vous pouvez cliquer pour commencer à
écrire quoi que ce soit. Vous pouvez donc simplement cliquer et commencer à écrire votre texte, et vous pouvez le voir
ici, Ca. Vous pouvez double-cliquer dessus pour avoir la possibilité de
changer les choses. Au fur et à mesure que vous avancez. D'accord, nous allons donc examiner tout cela en
détail, afin que vous puissiez voir que
vous pouvez disposer des fonctionnalités d'édition du
texte de conception. Nous parlons
de toutes ces fonctionnalités, de la façon d'utiliser certaines d'entre elles, de modifier le style du téléphone, la superposition, du style normal
et du style de champ, la couleur, du
trait, des effets Nous allons examiner tout
cela en détail dans ce tutoriel. Et puis vous avez
cette page de ressources. Tu peux tout vérifier. Vous pouvez ajouter des plug-ins,
des composants, des
widgets au fur et à mesure que vous avancez. Nous examinons donc en détail comment utiliser certains d'entre eux, puis vous avez
l'outil à main au cas où vous voudriez faire des
bêtises, dans le camas en Tu veux faire bouger les choses. Vous souhaitez zoomer sur une fonctionnalité ou
un point direct. Tu peux le faire aussi. Et puis, ici,
vous pouvez ajouter des commentaires. Vous pouvez ajouter des commentaires
à tout moment, et quelqu'un peut travailler sur
ce commentaire en particulier. Vous pouvez ajouter quelqu'un. Vous pouvez utiliser le signe d'ajout pour appeler un
collaborateur en particulier, et vous pouvez travailler en collaboration
avec cette personne Vous pouvez lui donner
des instructions et il travaillera directement. Nous allons donc voir comment
collaborer avec des personnes au sein de Figma en ajoutant commentaires, des mots
collaboratifs ou actions
collaboratives
afin que vous puissiez travailler simultanément
sur le même projet Disons colorier
ceci. C'est bon. C'est juste une chose normale, juste une fonctionnalité normale, non ? Vous pouvez voir que nous pouvons le
voir ici. Je ne fais donc que donner
une instruction. Maintenant, ce sont les choses
les plus élémentaires. Ici, vous
avez également la possibilité de vérifier cela. Une fois que vous avez cliqué, vous pouvez maintenant
consulter la section des commentaires. Maintenant, ici, vous avez votre
nom Spotlight me,
ce qui montre que je ne suis personne en train de m'adapter travaillant sur ce cadre
en particulier. Ensuite, vous pouvez partager vos
fichiers directement à partir d'ici, vous pouvez partager avec d'autres personnes, vous pouvez créer des liens
et partager, et vous pouvez donner les
différents contrôles respectifs aux personnes
avec lesquelles vous
partagez le document , telles que les propriétaires
de ce lien peuvent consulter ou
modifier le projet. Selon le type de
contrôle que vous leur donnez, ils peuvent accéder au projet et le modifier
directement. D'accord ? Vous avez la possibilité de publier la communauté afin
que les gens puissent voir, vous puissiez voir votre travail et qu'ils puissent également vous faire part de leurs
commentaires. C'est donc le contrôle. Vous pouvez dire que toute personne
disposant de ce lien peut voir ou modifier ce projet
en particulier. D'accord ? Il s'agit donc de partager. Vous pouvez copier le lien
, puis le partager avec eux, ou vous pouvez ajouter directement l'
adresse e-mail de la personne. Par exemple, je peux
dire que je veux ajouter, puis vous pouvez simplement
inviter, et cela va maintenant
envoyer ce message pour inviter cette personne
à travailler sur ce brouillon. Sélectionnez un
projet en particulier et dites que nous voulons inviter cette personne, et qu'elle va
recevoir l'invitation, a été invitée à modifier
le premier cours de Figma, le projet sur
lequel nous
travaillons actuellement OK, c'est donc le message
que vous allez
recevoir une fois que vous aurez
envoyé l'invitation. Voici donc le
message, la classe dans laquelle je vous ai invitée à modifier la première classe de Figma,
qui est le projet que nous sommes Vous pouvez donc ouvrir
Figma et continuer à travailler sur
le projet,
car vous
donnez maintenant l'autorisation Pour commencer à travailler sur le projet. Vous pouvez voir que vous avez
le mode de développement. Vous pouvez l'activer,
et vous pouvez toujours préjouer votre prototype pour
voir directement les résultats. Vous pouvez cliquer dessus pour présenter et
prévisualiser votre prototype directement pour voir le résultat de ce que
vous créez. Nous allons également examiner
cela en détail pour comprendre ce que cela signifie ou à
quoi vous pouvez l'utiliser. Nous avons maintenant la fonction Zoom. Vous pouvez zoomer ce champ de 100 %. Vous pouvez zoomer et dézoomer
et pixeliser, et cela se trouve dans l'
aperçu en pixels sur les règles, les grilles de
mise en page, etc., et
bien d'autres choses encore, que nous allons aborder
et montrer comment les utiliser de manière
très détaillée au cours de
ce didacticiel Enfin, nous avons
ces trois points. Très, très important. Vos
onglets récemment fermés apparaîtront ici. Vous pouvez le vérifier
à partir des trois points. Donc, enfin, vous avez également ce p
s à un moment donné. Si vous souhaitez vous référer au
centre d'aide , contacter le support ou
consulter les vidéos
ou à ce sujet Ainsi se termine ce cours sur la création d'
un fichier dans Figma, puis l'aperçu général de la plate-forme
du fichier J'espère que cette vidéo vous plaira. Merci de votre attention, et j'ai
hâte de vous voir
dans mon prochain cours.
7. Le panneau Propriétés: Bonjour, et bon retour.
Dans le dernier cours, nous avons parlé de la création
d'un fichier et d'une partie de la présentation de la plateforme lors de la
création de fichiers. Nous avons parlé de certains
des onglets de base ici, façon dont nous pouvons les utiliser pour
améliorer notre expérience. Dans ce cours,
nous allons donc
examiner le panneau des propriétés, qui est ce que nous avons ici. Pour le moment, comme nous n'
avons rien sur notre canevas, donc le panneau des propriétés, nous ne pouvons pratiquement
rien faire à partir de là. Sauf que vous pouvez changer l'arrière-plan et changer
la couleur d'arrière-plan, en venant simplement ici
et en cliquant dessus, et nous pouvons le changer en
n'importe quelle couleur de notre choix. Vous pouvez donc le
changer pour n'importe quelle couleur de votre choix. Et si vous avez un lit bébé, vous pouvez également le compléter. Et puis ici, nous
avons la fonctionnalité d'exportation
, que nous allons également aborder pour passer à ce didacticiel. Mais pour l'instant, permettez-moi de le faire pour que nous ayons
un historique clair. Une chose que vous
devez comprendre, c'est que ce
panneau de propriétés est
l'un des éléments les plus importants
que nous allons utiliser tout au long de notre
expérience avec Figma Tout dépend de la propriété, l'élément
auquel vous avez affaire Ce panneau de propriétés
va changer. Par exemple,
prenons l'exemple suivant :
si vous arrivez
ici pour voir les changements de vitesse, nous pouvons simplement cliquer,
et disons que nous
sélectionnons cette
ellipse ou ce cercle Si vous voulez dessiner un cercle, vous devez maintenir la touche Shift
enfoncée, puis vous pouvez dessiner
un cercle très facilement. Et en
dessinant simplement le cercle, vous pouvez voir que le panneau
des propriétés a maintenant été modifié. Maintenant, beaucoup de choses ont été introduites dans la mesure où vous pouvez
changer les positions de ce cercle de l'
axe x à l'axe y, puis la largeur
et la hauteur. Vous pouvez tous les modifier. Même en cliquant, vous
pouvez augmenter le nombre. OK. En cliquant et en faisant glisser le pointeur, vous pouvez augmenter ou diminuer
le nombre en conséquence Même s'ils sont
connectés à la largeur et à la hauteur, vous pouvez les lier et
vous pouvez les faire varier individuellement au fur et à mesure afin voir si vous les
modifiez différemment, la forme change en conséquence. Je préfèrerai qu'ils soient liés, et laissez-moi le faire
pour le moment. C'est donc l'une des choses. Vous pouvez modifier la position, vous pouvez également modifier la position de la
couche et vous pouvez modifier le champ, ce qui est l'une des choses les
plus importantes. Vous pouvez cliquer ici et
ajouter différents types de coloration à cette forme
que vous venez d'ajouter. Disons que nous pouvons
passer à un endroit agréable et que nous pouvons le sélectionner et simplement
lui donner une très belle couleur. OK, disons quelque chose comme
ça , et nous pouvons cliquer dessus. OK. Ainsi, tout
en sélectionnant la forme, nous avons encore d'autres
fonctionnalités, comme en bas, vous pouvez ajouter un trait
en cliquant simplement sur cette position. Et vous voyez maintenant qu'
un trait a été ajouté à l'intérieur. OK, tu peux changer la
position du trait. Nous pouvons le placer au centre,
vous pouvez le faire à l'extérieur. Dans ce cas,
faisons-le à l'extérieur. Mais parce que c'est un
très petit accident vasculaire cérébral. C'est pourquoi vous ne le
voyez pas visuellement. Vous pouvez
également augmenter la taille en venant ici, vous pouvez l'augmenter et vous pouvez voir ce moment que vous
augmentez la taille. Je pense que quelque chose comme
ça va très bien. Et si vous le souhaitez, vous pouvez également modifier la couleur
de l'effet du trait. Mais il suffit de cliquer dessus. Vous pouvez en faire quelque chose
comme si cela dépendait. Vous pouvez en faire quelque chose
comme ça. Je pense que c'est sympa. Vous pouvez donc simplement échapper pour y échapper et vous retrouverez le
même panel de propriétés Vous avez d'autres fonctionnalités que vous pouvez gérer et gérer.
Vous pouvez en avoir les effets. Vous pouvez cliquer pour ajouter des effets. Vous pouvez ajouter de l'ombre
à cette forme. Vous pouvez ajouter de l'ombre, et vous pouvez voir que vous pouvez voir dans l'ombre, déposer une couche d'
ombre, ou vous pouvez le voir dans le coup
d'arrière-plan. Dans chaque cas, vous
pouvez constater que la forme change en termes
de propriétés. Supposons que nous
ayons une ombre portée, et vous pouvez voir visuellement que nous
avons une petite
ombre portée ici. Vous pouvez donc supprimer n'importe
laquelle de ces fonctionnalités en
cliquant simplement sur
ce signe négatif et en introduisant la suppression. Vous pouvez l'activer ou la désactiver
pour cette fonctionnalité. Vous pouvez donc activer et désactiver. Vous pouvez voir l'ombre projetée, elle est assez petite,
mais elle est visible. Pareil ici, vous pouvez activer ou désactiver ce trait avec ce seul signe. Et ici, vous
avez plus de fonctionnalités. Disons que je l'active. Ici, vous avez
plus de fonctionnalités. Vous pouvez exporter si cela vous
intéresse et exporter, vous avez un format différent. Vous pouvez utiliser ce fichier PNG par défaut, mais vous pouvez l'exporter
au format P SVG et PDF C'est très basique
et vous pouvez prévisualiser, consulter l'aperçu de
ce que vous venez de créer. Vous pouvez exporter. Ceci
est sans contexte, et vous pouvez l'utiliser
sur d'autres documents rédaction de
rapports ou tout
ce avec quoi vous travaillez. C'est donc très basique. Et il ne s'agit là
que d'un des nombreux
éléments dont nous disposons. Essayons un autre élément. Par exemple, passons
au texte ici
et cliquez simplement. Vous pouvez activer le texte
en cliquant simplement sur l'onglet T ici, le texte, ou vous pouvez
utiliser la lettre T sur votre clavier pour
lancer la commande de texte. Vous pouvez donc cliquer n'importe où, et disons que nous
écrivons quelque chose comme « Bienvenue sur ma
chaîne », par exemple Et vous pouvez voir dès
maintenant qu'une fois
que vous avez sélectionné, vous pouvez tout
sélectionner. En fonction des
contre-éléments que vous avez, l'effet change ici, les propriétés ici
changent. Donc, comme dans ce texte, vous pouvez voir que vous pouvez également
gérer le poste. Vous pouvez jouer
avec la position gauche ou à droite sur l'axe X. Vous pouvez jouer avec
lui sur l'axe de direction, et vous pouvez également jouer avec
la rotation, vous
pouvez le faire pivoter dans n'importe quel angle. Ici, vous
avez la fonction de rotation, mais vous pouvez voir qu'à
tout moment, vous pouvez faire pivoter. Laisse-moi faire ça. Et vous pouvez vérifier
la couche, quelle couche, vous pouvez jouer
avec la couche, et vous pouvez l'organiser
en conséquence. C'est l'opacité. Et puis ici, vous avez d'autres fonctionnalités d'édition
de texte de base, fonctionnalités d'édition
de texte de base, comme la possibilité de changer
le style du téléphone. Vous pouvez voir
différents styles de téléphone. Lorsque vous passez la souris dessus,
vous verrez que le texte change dans
le style du téléphone, et vous pouvez avoir
la taille du téléphone Vous pouvez avoir une taille différente. Si vous le souhaitez, vous pouvez
vous-même
augmenter directement la taille. C'est donc très simple. Donc
, ici en bas, vous avez les autres fonctionnalités, comme vous pouvez ajouter
la hauteur de ligne Il s'agit de l'interligne, hauteur de
ligne et de l'
espacement des lignes en ce qui concerne le texte Si vous avez plusieurs textes, vous pouvez ajouter la
hauteur de ligne entre eux, et voici la verticale,
c'est l' espacement
des lettres Vous pouvez également en ajouter. Et puis voici l'espacement des paragraphes Vous pouvez peut-être en faire deux, la largeur du paragraphe, que vous pouvez augmenter ou
diminuer en conséquence. Et c'est la hauteur automatique. Il s'
agit d'une taille fixe partout. Tu peux, tu peux
ajuster tout ça. Vous disposez de commandes virtuelles. Vous pouvez aligner à gauche,
à droite et au centre. Vous pouvez faire toutes sortes d'
alignements ici. Et vous avez cet alignement
en haut, en bas au milieu. Vous pouvez faire tout cela d'ici. Et l'un des
éléments clés auxquels vous devez faire attention est la sensation du texte. Vous pouvez changer cela à partir d'ici, vous pouvez cliquer et vous
pouvez ajouter la sensation
ici et vous pouvez changer la couleur pour n'importe quelle
couleur de notre choix. Tracez quelque chose comme ce bleu, et vous pouvez également y ajouter un
trait.
Selon, vous pouvez ajouter un trait
,
en augmenter la largeur et
changer la couleur, comme nous l'avons expliqué
dans l'autre, n'est-ce pas ? Supposons donc que nous ayons quelque chose
comme cette couleur rouge, et que nous puissions l'avoir comme ça. Et puis il y
a aussi les effets. Déposez de l'ombre, vous pouvez
y ajouter de l'ombre. Et je vois bien que vous pouvez voir la différence avec et
sans. Laisse-moi juste le faire. C'est sans, c'
est avec de l'ombre, et vous pouvez voir que le texte est
plutôt joli. Vous avez donc un tas de
commandes ici. Une autre chose à laquelle vous
devriez
faire attention , c'est que vous avez d'autres
commandes ici. Comme vous pouvez y ajouter un lien, vous pouvez créer un lien à partir de celui-ci et vous pouvez
créer vous-même un composant à partir de celui-ci. Nous parlerons
de tout cela en détail au fur et à mesure que nous
parcourrons ce didacticiel. Et une chose que vous
devez également prendre en
compte est que quel que soit l'élément auquel
vous avez affaire, vous pouvez toujours trouver les
propriétés activées ici. Vous pouvez voir «
Bienvenue sur ma chaîne ». C'est le texte que nous avons,
et vous pouvez voir les lèvres. Cela discutera de tous
les arrangements leur
emplacement et de la manière de régler les problèmes de
position. Ceci conclut ce didacticiel
sur le panneau des propriétés, ce que c'est et comment
comprendre les fonctionnalités de base. En ce qui concerne l'ajout de certains éléments et le jeu avec
certaines de leurs fonctionnalités. J'espère que cette vidéo vous a plu. Merci de votre attention,
et j'ai
hâte de vous voir
au prochain cours.
8. Couche d'éléments dans Figma: Dans le dernier cours,
nous avons parlé des bases
du
panneau de propriétés de Figma Et dans ce cours,
nous allons
parler des bases des couches. Ainsi, chaque fois que vous aurez
créé un projet, tout au long de votre
expérience dans Figma, vous
utiliserez beaucoup
les
fonctionnalités de ces couches , car la
plupart des éléments que
vous allez être , la plupart des éléments que vous
allez organiser, seront
organisés ici donc très important de comprendre l'arrangement ici est donc très important de comprendre l'arrangement ici. Donc, la première chose que vous
devez comprendre est que nous pouvons créer des
doublons en maintenant la touche option
ou l'ancienne touche de vos fenêtres enfoncée Vous pouvez simplement sélectionner la touche d'
option, puis cliquer et nous pouvons faire glisser Vous pouvez voir maintenant
que nous en avons une copie. Vous pouvez donc voir en ce moment que nous
avons le LPS un et le LPS deux. C'est parce que ce sont deux choses
différentes. Et une autre chose que
vous devez savoir, c'est que la position varie vraiment
en termes de superposition Ainsi, tout objet ou élément que vous avez
en haut se
concentrera ou se
comportera en haut de ce LPS parce qu'
il se trouve au-dessus de celui-ci, même dans le classement
ici à la superposition Et vous pouvez voir que ce
texte est au-dessus de tout. Donc, si j'apporte ce
lesta par exemple, je le sélectionne et je change la
couleur pour quelque chose comme le rouge Et si j'essaie d'en arriver
là, vous pouvez voir maintenant que
c'est au-dessus de tout cela. C'est parce que cette couche
deux est au-dessus de celle-ci. Nous pouvons donc cliquer avec le bouton droit de la souris et
le renommer si vous le souhaitez. Nous pouvons le renommer.
OK, alors appelons-le le cercle orange. Et puis renommons celui-ci en cercle vert, par
exemple Disons donc ce cercle vert
pour faciliter la compréhension. OK. Nous pouvons donc voir que c'est le cercle orange, c'
est le cercle vert. Et lorsque vous essayez également d'
apporter le texte, vous pouvez voir que le texte
est au-dessus de tous. C'est parce que sa
position se situe vraiment avant tout à ce stade. Tu peux essayer de t'ajuster. Vous pouvez les modifier
en les faisant simplement glisser. Par exemple, lorsque vous glissez
et déposez votre orange, vous pouvez voir qu'elle passe en
dessous du texte, et vous pouvez également faire glisser la verte
vers le haut, et vous pouvez voir qu'elle
devient le haut. L'arrangement
est donc très, très simple. Vous pouvez toujours vous adapter
si cela vous intéresse. Le texte peut donc toujours revenir parce que nous le
voulons en haut. Vous pouvez voir en ce moment que
nous l'avons en haut. Vous pouvez jouer avec les choses les
plus élémentaires à partir d'ici, mais
c'est l'arrangement qui compte. Si vous comprenez comment
les couches sont disposées
, votre
travail sera très, très facile. Vous avez donc un certain nombre
de choses à surveiller. Donc, tout ce qui
est au-dessus est au-dessus. Tout ce qui se trouve
ci-dessous est vraiment inférieur cela. Lorsque vous examinez
le processus de superposition, vous avez d'autres
éléments que nous allons examiner dans ce même panneau Vous avez le panneau des actifs, et nous avons le panneau des pages, lequel vous pouvez créer plusieurs
pages, comme
nous l'avons dit . Nous allons
examiner tout cela en
détail dans l'
autre didacticiel. Et vous pouvez verrouiller
les positions des éléments. Par exemple, vous pouvez
verrouiller la position de ce texte d'un
simple clic. Cela va donc
rester à cette position, et vous pouvez le verrouiller directement en cliquant simplement et vous pouvez utiliser cette fonctionnalité de la même manière
pour l'activer ou désactiver depuis le
panneau depuis le canevas. Il devient donc
visible ou invisible. Donc, en fonction de ce sur quoi
vous travaillez, vous pouvez toujours avoir certaines de ces fonctionnalités et
jouer avec elles. OK, ceci conclut ce
cours sur les bases des couches, sur la
compréhension de la
superposition des couches en termes de
disposition des éléments dans Figma J'espère que cette vidéo vous a plu. Merci de votre attention et à
bientôt au prochain cours.
9. Ajouter et personnaliser des cadres: Dans le dernier cours,
nous avons parlé la superposition d'
éléments dans Figma, et dans ce cours,
nous allons
parler des bases des cadres, de la
façon d'ajouter des cadres .
Maintenant, que sont les cadres ? Les cadres sont en fait les éléments auxquels nous ajoutons des propriétés
que nous pouvons avoir pour nous aider à
séparer les éléments et les propriétés au sein de
différents types de pages, d'accord ? Si vous créez une application téléphonique, les différentes pages
que vous avez dans cette application particulière sont représentées
par des cadres Le nombre de cadres
que nous avons dépend donc. Donc, si vous avez dix pages
dans une application en particulier, cela signifie
que vous avez dix
cadres disposés dans cet espoir. Nous allons apprendre à les
créer et à les
lier à leurs
propriétés au fur et à mesure. Pour l'instant, pour ajouter un cadre de base, vous pouvez
aller jusqu'ici et cliquer sur cette fonction de cadre, ou vous pouvez utiliser la lettre F. Vous pouvez appuyer sur la lettre F votre clavier pour
activer l'outil cadre. Vous pouvez donc simplement sélectionner n'importe où
et vous pouvez faire glisser et vous pouvez sélectionner
ou créer votre cadre comme suit. Il s'agit donc d'une taille 469 x 3408. Nous pouvons simplement le publier,
et vous pouvez voir en ce
moment que nous l'avons sous forme de cadre. Maintenant que cela devient un cadre, vous pouvez vous
assurer automatiquement que tous ces éléments
sont désormais logés en dessous. Vous pouvez le réduire et
le réduire à nouveau, et tous ces éléments se trouvent désormais spécifiquement sous celui-ci. Ainsi, les
cadres peuvent également être utilisés pour catégoriser nos éléments
afin que nous puissions savoir exactement quelle partie
de ces éléments appartient à ce cadre et quelle partie de ces éléments appartient également à
ces cadres Encore une fois,
si vous êtes certain de la
taille que vous souhaitez,
sinon, vous pouvez
ajuster la taille
directement du
cadre en le glissant , en
cliquant, en le faisant glisser et
en le déplaçant, vous pouvez l'ajuster à n'importe quelle taille Ou si vous connaissez la
taille en particulier, vous pouvez venir ici et modifier la
taille en conséquence Vous pouvez voir que nous pouvons
augmenter la taille ou diminuer la hauteur
en termes de hauteur, que dans la
position en x et y, vous pouvez jouer
avec la position. Et à tout moment, vous pouvez cliquer dessus et le déplacer. Mais si vous définissez le type de taille que
vous souhaitez créer, vous pouvez facilement l'avoir
. Ainsi, par exemple, si vous essayez de
créer avec la touche F et que vous activez la création de
cadres, vous pouvez voir les modèles
que le Figma vous propose Nous avons donc un tas
de tailles prédéfinies pour le téléphone, peut-être si
vous avez affaire à un téléphone, peut-être si vous
essayez de développer une application téléphonique, vous pouvez voir les
différentes tailles pour iPhone 14 et 15 Pmax Tu peux les voir.
C'est la taille. Il s'agit de la
taille standard pour 15 personnes. Il s'agit de la
taille standard pour l'iPhone SE, et pour le téléphone h, vous pouvez voir que
c'est la taille standard. Pour Android, petit,
c'est la taille, Android grand, c'est la taille. Vous pouvez donc simplement sélectionner
n'importe qui. Si vous utilisez également
une tablette, il s' agit de tailles prédéfinies que vous pouvez facilement sélectionner en
fonction de ce que vous
essayez de créer si vous ne connaissez pas la taille
spécifique. Si vous avez affaire à un ordinateur de bureau,
vous pouvez voir que différentes
tailles sont utilisées avec MT Book,
TV ou ordinateur de bureau ou à peu près ou Map Book Pro
14 ou similaire. Vous pouvez donc simplement sélectionner la
recréation de la présentation, vous pouvez voir les différentes tailles. Vous utilisez 16 sur
neuf quatre sur trois.
Oh, vous pouvez voir si vous utilisez aussi des
montres,
c'est une Apple Watch. Et si vous souhaitez
créer des formats pour le papier, vous pouvez voir la plupart d'entre eux A, A cinq, A six, au format lettre
et sur différents réseaux sociaux. Vous pouvez sélectionner
ou faire
sélectionner le papier et vous
pouvez joindre les
formats précis. Donc, dans ce cas,
allons-y avec quelque chose de simple. Sélectionnons le pon 14
plus, cliquez dessus, et vous pouvez voir par défaut que
la Figma vient nous
donner cette taille
comme taille PON 14 OK. Vous pouvez donc maintenir la touche commande enfoncée et utiliser
la tout seul,
maintenir la touche commande enfoncée et utiliser
la molette de défilement de votre souris
pour effectuer un
zoom arrière. Ainsi, vous pouvez
avoir plus de détails ici. Avec la commande, maintenez la touche commande enfoncée et faites
défiler la page vers le bas, vous serez en mesure de
réduire la taille,
tout comme ou de l' augmenter si
vous faites défiler la page vers le haut ou vers le bas, vous pouvez utiliser cette touche de
commande la lettre H et placez
ces deux tailles sur le côté. Une autre chose que vous pouvez
remarquer, c'est que dans les cadres, vous pouvez toujours vous échapper pour revenir à l'outil
de sélection. Vous sélectionnez donc n'importe quel cadre. Vous pouvez le
dupliquer en utilisant simplement la commande D pour dupliquer
un cadre particulier. Vous pouvez également maintenir
la touche option enfoncée dans Mark
ou la touche T dans les fenêtres, puis sélectionner
et faire glisser le pointeur
pour créer la même copie de
ce cadre en particulier. C'est donc très facile de le faire. De plus, vous pouvez copier et coller ce même cadre quelque part. Maintenant, maintenons la touche de
commande enfoncée et
zonons-la un peu pour que nous
puissions tout voir à l'intérieur. Donc, une autre chose
que je veux
vous montrer est que vous pouvez
copier des propriétés. Vous pouvez l'aligner en conséquence. Si vous les avez alignés, vous pouvez les aligner directement les sélectionnant
tous directement ici, et vous pouvez voir en bas que vous avez cette icône, qui vous
permet de
les aligner verticalement. Lorsque vous cliquez, vous les verrez, ils sont également
alignés en conséquence. Vous avez un
alignement vertical égal. Et si vous le souhaitez, si
vous les avez séparés, par
exemple, s'ils sont alignés, et si vous voulez qu'ils
soient alignés verticalement. Vous pouvez tous les sélectionner. C'est suffisant, maintenons la
touche Shift enfoncée. Et nous pouvons utiliser la
touche commande et faire défiler l'écran vers le bas, nous pouvons tout sélectionner , par
exemple, puis
nous pouvons l'aligner. Cela permettra de s'assurer qu'ils sont
alignés verticalement. Et si vous voulez
les aligner horizontalement, c'est aligner horizontalement. Si vous souhaitez
les aligner verticalement pour qu'ils soient la même taille au même niveau, vous pouvez simplement
venir ici et vous pouvez voir aligner les centres verticaux. Ainsi, en un seul
clic, vous pouvez voir qu'ils sont alignés de la
même manière et qu'ils sont alignés
au centre vertical. Il s'agit donc essentiellement de la
façon de traiter
les éléments avec des cadres et de jouer avec eux. Maintenant, une autre chose est que
vous devez comprendre que les éléments que nous avons dans un cadre particulier sont faciles à copier, vous pouvez les copier facilement et les placer sur
différents cadres. OK. Ainsi, par exemple, si nous avons ce cadre, si vous sélectionnez ce cadre, que
nous sélectionnons ce texte, que nous
cliquons simplement et que nous pouvons
simplement le mettre dedans. Écrivons quelque chose. Bienvenue. Et nous avons cet accueil. Cela signifie que si
vous sélectionnez ce texte et que vous maintenez la touche commande enfoncée et que vous maintenez
la touche option enfoncée, il vous montrera
exactement la distribution. La taille se fait par la gauche, par le haut, par les côtés, la disposition par
les côtés, par le côté droit et par le bas. Voici
l'arrangement. Donc si vous voulez
copier cet accueil, vous le copiez avec la commande ou le
contrôle C de votre clavier, vous arrivez à la deuxième image. Vous pouvez exécuter la commande V
pour le coller et vous pouvez voir que lorsque vous
maintenez la touche option enfoncée, vous verrez qu'
il a été collé exactement à l'endroit où vous l'avez copié depuis l'
autre propriété, directement
depuis l'autre cadre Et pareil ici, vous pouvez le dépasser et il gardera la même position au fur et à mesure que
vous passerez à autre chose. Une autre chose que nous
pouvons apprendre en ce qui concerne le cadre est que lorsque
vous regardez ceci, vous remarquerez que chacun des cadres
pour iPhone que nous avons, c'est l'iPhone 14 plus, téléphone 14 plus un, deux, trois, ils sont
disposés en conséquence. Vous pouvez les renommer comme nous l'
avons expliqué plus haut. Vous pouvez simplement double-cliquer
et vous pourrez les
renommer afin de voir l'écran 1, par
exemple, puis
vous pourrez le créer Non, c'est l'écran 3. Par exemple,
disons l'écran trois, et ceci est l'écran un écran deux, et ceci est l'écran un. Il suffit de double-cliquer et d'
appeler cet écran « un ». Vous pouvez donc voir que l'accueil
est désormais un sous-ensemble de l'écran trois, car il s'
agit d'un élément situé sous
ce troisième cadre Il s'agit d'un article du cadre 2. Il s'agit d'un article sous cadre. D'un en un. Et puis vous avez ceci, laissez-moi utiliser la lettre H, et vous pouvez voir sur ce
petit cadre, vous pouvez voir que tout cela est
logé sous ce cadre. Et dans chaque cas, vous
pouvez réduire les propriétés,
les éléments, afin de voir plus clair et de faciliter l'accès
aux autres propriétés. Maintenant, dans chaque cadre
que vous avez créé, vous pouvez voir que vous
avez cette option Une fois que vous avez
sélectionné ce cadre, vous pouvez voir ces propriétés. Voici les propriétés du cadre
que vous venez de créer. Et vous pouvez
également jouer
avec la taille en termes de position,
de largeur et de hauteur. Vous pouvez jouer avec
certaines de ces propriétés, et vous pouvez l'inverser par rapport
à l'horizontale, la
faire passer de la verticale à l'
horizontale ou à la planche. Et vous pouvez jouer
avec le rayon d'angle. Vous pouvez l'utiliser
, je l'utilise beaucoup. Ainsi, lorsque vous jouez, vous pouvez voir que vous pouvez
augmenter le rayon des coins. Et maintenant, tout
devient un rayon n'est plus aussi
raide qu'avant. Vous pouvez donc avoir
autant de propriétés. L'angle de rotation, comme
nous l'avons expliqué précédemment, les propriétés nécessaires
pour jouer avec l'irrotation et la sensation Vous pouvez changer la couleur de sensation en
cliquant simplement dessus et vous pouvez sélectionner la couleur et la faire
varier en conséquence.
OK. Nous abordons donc tous
ces éléments de base, comment ajouter des éléments
et
les traiter en détail dans les cadres. Mais pour le moment, vous avez
l'option de champ. Vous avez l'option de trait comme nous l'avons
expliqué précédemment. Tu as l'option secte. De plus, si vous voulez y
ajouter de l'ombre, vous pouvez en voir pas mal. Nous avons donc également ces autres
fonctionnalités. Nous avons la réputation d'
être prêts pour le développement et les utilisateurs masquent d'excellents
composants. Ceci conclut ce
cours sur la façon d'ajouter des cadres et de les personnaliser
en conséquence dans notre canevas. J'espère que cette vidéo vous plaira. Merci de votre attention, et j'ai
hâte de vous voir
au prochain cours. Par
10. Ajouter des grilles et des guides: Bien, dans le dernier cours, nous avons expliqué comment ajouter et
personnaliser des cadres dans Figma Et dans ce cours, nous
allons parler de la façon d' ajouter des grilles et des guides
dans nos cadres grilles et les guides sont donc très importants
pour nous permettre de rester organisés et de nous assurer que nous travaillons
avec précision tout au long du processus d'
ajout et de
retrait d'éléments dans nos cadres Nous pouvons donc connaître exactement les tailles
sur l' ensemble des sites, et ainsi de suite au fur et à mesure que nous
poursuivons la création de cadres. Donc, la première chose est que nous pouvons ajouter des grilles en sélectionnant
simplement un cadre en particulier, et vous pouvez accéder au panneau des
propriétés ici, et vous pouvez voir la grille de
mise en page ici Vous pouvez donc simplement cliquer sur ce signe de
tracé pour ajouter une grille, et par défaut, c'est la
grille qui est ajoutée. Maintenant, j'ai une grille là-dessus, et vous pouvez la voir clairement
visible. Tu peux le masquer si tu veux. Vous pouvez le masquer ou
l'afficher directement, comme nous l'avons expliqué, pour
n'importe quel élément. Si vous voulez avoir
plus de propriétés cette grille en particulier ou
jouer davantage avec elle, vous pouvez cliquer sur ces
points, ce Seton Il vous suffit de cliquer.
Vous pouvez simplement cliquer, et vous pouvez voir qu'
avec cette liste déroulante, vous avez plusieurs types de
grilles. Il s'agit d'un réseau normal. Si vous voulez avoir une grille de colonnes, vous pouvez cliquer et vous
avez cette grille de colonnes. Tu peux porter le chiffre à 20, si
tu veux le chiffre. En fonction, si vous passez à 20, vous pouvez voir que nous avons 20 chiffres, et vous pouvez jouer
avec la coloration pour
changer la couleur de votre choix. heure actuelle, vous pouvez voir que
nous avons cette couleur, et vous pouvez frapper et vous échapper. Et vous avez d'autres
propriétés comme l'opacité. Pour le moment, c'est dix,
vous pouvez peut-être en faire deux. Préparez donc pour que vos
éléments soient visibles. Vous pouvez voir en ce moment qu'il y en a deux, mais vos éléments
sont très visibles. Si vous ne le souhaitez pas, vous pouvez l'
augmenter jusqu'à quatre, augmenter la visibilité, afin
que vous puissiez le voir dès maintenant. Les éléments sont visibles, mais les grilles sont également
visibles Vous avez donc ici
le type de grille. Il s'agit d'une grille de colonnes. Vous pouvez cliquer sur la
moitié de la grille gauche, et vous pouvez avoir la grille de droite ou la grille centrée selon que vous
souhaitez
obtenir plus d'
espacement par la droite
ou par la gauche,
selon tout
dépend de vous. Vous pouvez venir ici et dire
étiré, déplacé de travers Tout dépend donc. Tu peux jouer avec eux. Donc pour le moment, supposons que
nous voulions la grille de gauche, et que vous puissiez jouer avec le
avec à travers la séparation. Vous pouvez faire en sorte qu'il y en ait peut-être cinq, mais maintenant
cela devient plus petit. Et moins épais.
Et si vous le souhaitez, vous pouvez en faire peut-être sept
pour augmenter l'épaisseur. Et le décalage aussi,
maintenant qu'il est réglé à zéro, vous pouvez venir ici
et augmenter le décalage. Si vous passez à six, verrez que le décalage a
été augmenté. D'accord ? Donc, en fonction de
ce que vous voulez sur le bord. Si vous voulez un
décalage plus important sur le bord, vous pouvez probablement le faire
probablement 15. OK, vous pouvez donc voir maintenant que
nous sommes encore plus bouleversés. Maintenant, ici en bas, tu as le numéro qu'il te faut.
Tu peux l'augmenter. Peut-être que si nous en faisons cinq, vous pouvez voir maintenant que vous pouvez augmenter ou
diminuer le nombre. Supposons que nous adaptions ce 30, afin que vous puissiez voir il
faut faire, car vous pouvez maintenant l'
augmenter là-bas. Vous pouvez maintenant ajouter une
autre mise en page de grille. Si cela vous intéresse, vous
pouvez toujours y échapper, et vous pouvez ajouter une autre
grille en
y accédant sur ce signe plus,
et vous pouvez modifier. Maintenant, tu peux ajouter la gutta. Si vous le souhaitez,
vous pouvez en faire un, et vous pourrez constater
qu'il est maintenant beaucoup plus grand. Lorsque vous
zoomez, vous pouvez maintenant
voir quelle est
la séparation,
ce que vous devez faire, mais ensuite
vous pouvez avoir ces 20 points. Je pense, et maintenant je
pense que c'est une bonne chose. Vous pouvez maintenant ajouter une autre grille
en venant simplement ici. Vous pouvez y échapper, et
vous pouvez ajouter une autre grille en cliquant dessus et en
appuyant sur le côté positif. Vous pouvez donc en ajouter d'autres, afin que vous puissiez également venir ici et jouer
avec les propriétés. En fonction, il s'agit d'une grille de colonnes. Vous pouvez en faire une grille de lignes et vous pouvez également jouer avec
les fonctionnalités. Vous pouvez modifier les
différentes portions. C'est pratique dans les cas
où vous essayez de le faire , alors faisons en sorte que cela soit
probablement 15. Ah, 12 ans. C'est donc parfois pratique
lorsque vous avez affaire
au téléphone et que vous souhaitez
organiser vos éléments
en conséquence. Donc, si vous avez
cette taille uniforme, il vous sera très facile de bien
disposer vos éléments
. Ensuite, vous pouvez continuer
et peler avec eux. Les autres fonctionnalités,
comme nous l'avons expliqué, vous pouvez également activer ou désactiver n'importe quelle grille
directement avec celle-ci. Et vous pouvez supprimer n'importe quelle grille en appuyant sur
le signe négatif. Eh bien, si cela vous intéresse,
vous pouvez simplement supprimer la grille. Maintenant, les guides sont une autre caractéristique clé que je souhaite partager avec
vous et qui peut vous aider à rester précis et à maintenir souhaite partager avec
vous et qui peut vous aider
à rester précis et à maintenir
l'espacement dans votre
cadre Les guides peuvent être attachés à
l'aide des règles, d'accord avec les règles. Vous pouvez donc doubler l'intervalle
pour afficher les règles et les
afficher sur n'importe quel type de canevas
Sigma en utilisant simplement
le raccourci
Shift F Shift r pour activer les règles sur
les côtés et en haut ici et déplacer r à nouveau vers celui-ci Vous pouvez donc doubler la règle avec Shift R et la
doubler en activant ou en désactivant. Donc, le guide que vous pouvez avoir ici pour vous aider dans la
précision est que vous pouvez atteindre les bords et
jusqu'à ce que vos montagnes russes se
transforment en ce signe horizontal Lorsque vous cliquez et faites glisser, vous pouvez voir que vous avez une
ligne que vous pouvez déplacer à l'intérieur du canevas pour définir peut-être le
point de départ d'un élément. Si vous voulez connaître la
taille de
l'endroit où vous vous trouvez, vous pouvez maintenir
la touche option de votre clavier enfoncée , et vous pouvez maintenir
la touche T de vos fenêtres pour voir le numéro
de la pièce depuis la gauche Et pareil aussi,
tu peux redescendre. Cliquez à nouveau et vous pouvez en mettre un
autre sur la droite.
Si cela vous
intéresse, pour plus de clarté, vous pouvez toujours maintenir la touche option
enfoncée pour définir la longueur
à l'autre bord. Vous pouvez également faire la même
chose en haut pour avoir un guide horizontal en cliquant
simplement ici, et vous pouvez simplement faire glisser le pointeur
et vous l'aurez. Supposons que nous maintenions cette valeur également
pour définir la position exacte. Vous pouvez en apporter
autant que vous le souhaitez, en fonction de ce que
vous souhaitez créer. Vous pouvez en introduire
différents et
définir une taille particulière laquelle vous souhaitez ajouter des éléments au cours
du processus d'ajout. Ainsi, pour retirer une boîte
de guide dans un cadre, il
vous suffit de la parcourir, sélectionner, de cliquer dessus et de la maintenir enfoncée, puis de la
tirer vers l'arrière et vous aurez retiré le guide. Vous pouvez donc le voir, il suffit de
le supprimer en cliquant et en le faisant
glisser très facilement vers l'arrière Vous pouvez voir qu'il suffit de les
supprimer tous. Voici donc les bases
de l'ajout de grilles et de
guides pour nous aider dans l'
acquisition au sein de notre FMS Ceci conclut ce
cours sur l'ajout de grilles et de guides dans notre
cadre dans Sigma J'espère que cette vidéo vous plaira. Merci de votre attention,
et j'ai hâte de vous
voir au
prochain cours. Au revoir
11. Ajouter et personnaliser des formes: Dans le dernier cours, nous avons
expliqué comment ajouter des grilles et des guides à notre canevas Et dans ce cours, nous allons apprendre
à ajouter des moutons,
différents types de moutons et à les
personnaliser Maintenant, commençons
par effacer cela. Utilisons donc notre outil de dessin avec la lettre H pour
nettoyer notre toile, puis nous pourrons commencer à
apporter différents moutons. Maintenant, pour insérer des formes, vous pouvez les mettre sur le capuchon pour
revenir à l'outil de sélection. Pour insérer des formes, vous pouvez aller
jusqu'en haut ici. Vous pouvez voir que vous pouvez
cliquer sur ce menu déroulant
et que vous avez une série
de formes différentes Vous pouvez commencer par un rectangle, que vous pouvez déclencher
avec la lettre r, et vous avez une ligne avec
la lettre L. Vous avez une
flèche avec la
lettre L, et ainsi de suite. D'accord, vous avez des lèvres
, un polygone et une étoile, et vous pouvez
également placer
des images et des vidéos dans le même canevas
si cela vous intéresse Commençons donc par importer quelque chose de simple,
comme un rectangle. Et une fois que nous avons cliqué sur le
dcgle, vous pouvez le dessiner directement en le faisant simplement
glisser comme ceci Vous pouvez donc remarquer que
je dessine un rectangle, mais lorsque je maintiens la touche Shift
enfoncée, cela en fait un carré. Cela en fera
un carré dont la longueur, la
largeur et la hauteur seront égales. Donc, si vous voulez
créer un carré, il est préférable de maintenir la touche Shift enfoncée pendant l'équation. Vous
pouvez donc voir maintenant que j'ai un carré. Mais si je
veux dessiner un rectangle, je peux lever la main
en appuyant sur la touche Shift, et vous pouvez voir dès maintenant que je peux aller à la longueur de mon choix. Mais disons que je vais
choisir un carré de cette longueur, comme vous pouvez le voir, je
viens de dessiner mon carré. Et ajoutons-en une autre. Disons que je peux dessiner
un polygone comme celui-ci. Je peux facilement dessiner. Vous pouvez également dessiner une autre
forme. Disons que nous choisissons
l'ellipse. Et si vous dessinez aussi, vous allez utiliser une
ellipse comme celle-ci Et si vous voulez un cercle
parfait, vous pouvez maintenir la touche du manche enfoncée. Cela devient donc très facilement un
cercle parfait. Maintenant, voici comment insérer différentes formes ou dessiner
n'importe quelle forme dans le canevas. Désormais, chaque fois que vous
sélectionnez l'une des formes des éléments que vous venez d'
importer ou d'insérer, vous pouvez voir ses propriétés
apparaître ici. Par exemple, la position X, tu peux venir
ici et tu peux jouer avec la
position dans le X. Et dans le sens Y, tu peux les faire varier
directement comme ça. Et vous pouvez modifier la largeur et hauteur si vous
le souhaitez, même si elles
sont interconnectées, afin qu'elles augmentent ou
diminuent de la même manière. Si vous souhaitez qu'ils augmentent ou diminuent de différentes manières, vous
devez
supprimer ce lien Donc, dans ce cas, vous
pouvez augmenter la largeur.
D'accord, vous pouvez voir qu'il peut
maintenant augmenter ou diminuer la largeur tout seul sans
affecter la hauteur. Vous pouvez le voir dès
maintenant ou vous pouvez augmenter la hauteur sans
affecter la largeur. Mais je préfère toujours qu'il
soit lié afin que nous puissions avoir une
augmentation ou une diminution uniforme Laissez-moi donc le faire pour
avoir un carré parfait. Autre chose,
tout en sélectionnant la forme, vous avez la possibilité de la
faire pivoter, vous pouvez la faire pivoter selon
l'angle de votre choix si cela
vous intéresse. Hein ? Laissez-moi le faire aussi, et ensuite vous pourrez jouer
avec le rayon d'angle. À l'heure actuelle, c'est pointu. Si vous souhaitez réduire, augmenter
ou apporter une certaine forme de courbe
au rayon du coin. Vous pouvez voir
maintenant que vous avez ajouté une certaine forme de courbe au coin. Sinon, si
vous souhaitez ajouter la même courbe de trajectoire
au rayon d'angle, si vous sélectionnez le navire,
vous pouvez voir ces points. Si vous sélectionnez l'un
d'entre eux, sélectionnez-le, cliquez et faites glisser, et vous pouvez également ajouter
manuellement
le rayon d'angle. En conséquence, vous pouvez
augmenter ou diminuer. Il s'agit d'une autre façon d'
ajouter le rayon d'angle. OK, donc c'est
ça. Ici, vous avez l'option de champ. Vous pouvez y ajouter différents
types de coloration de champ. Vous pouvez cliquer et sélectionner la couleur
de votre choix. Vous êtes libre de
naviguer et de choisir une très belle couleur pour vous-même.
Il s'agit d'une couleur unie. Si vous voulez un dégradé de couleur, vous pouvez toujours cliquer dessus, et maintenant vous pouvez voir que vous
avez un dégradé de couleur. Lorsque vous cliquez dessus,
vous pouvez ajouter le dégradé depuis ce côté. Vous pouvez utiliser cette
fonction pour contrôler l'emplacement du dégradé. OK, vous pouvez donc
augmenter ou diminuer l'emplacement du
dégradé pour que vous puissiez voir. Et ici, vous pouvez également en
changer la couleur. Si vous avez une autre couleur,
si vous voulez une autre couleur, vous pouvez également choisir et vous pouvez la voir changer en conséquence. Donc, ici en bas, vous
pouvez ajouter un trait, vous pouvez appuyer sur ce côté de l'intrigue. Pour ajouter un trait à cela,
vous pouvez voir si l'ajout d'un trait peut le placer à l'intérieur, à l'extérieur
ou au centre. heure actuelle,
faisons-le dans l' épaisseur du trait. heure actuelle, il y en a un, moins
bosselé jusqu'à 30, et vous pouvez voir la moitié à 30, et vous pouvez cliquer dessus pour changer la coloration
du trait Par exemple, choisissons
quelque chose comme le blanc, un type de
couleur blanche. Comme vous pouvez le voir, à l'heure actuelle,
notre trait est blanc. Et dans chaque cas, dans chacune
de ces propriétés, vous pouvez les activer ou les
désactiver à partir d'ici, la coloration et le trait. Vous pouvez les activer ou les
désactiver en utilisant cette option, et vous pouvez
également les supprimer en utilisant les signes négatifs, comme nous l'avons expliqué précédemment. Ensuite, vous avez d'autres effets. Vous pouvez cliquer pour ajouter
l'effet d'ombre projetée. Vous pouvez ajouter une ombre tombante, vous pouvez ajouter une ombre intérieure, vous pouvez ajouter un coup de couche ou
un coup de sac. Vous pouvez ajouter n'importe lequel d'entre eux. Mais pour l'instant, passons à
Drop Shadow. D'accord ? Ensuite, vous pouvez exporter
ou, si cela vous intéresse, ce que nous
aborderons dans un cours ultérieur. Maintenant, nous avons beaucoup ajouté à cette propriété à cette forme. Si vous souhaitez ajouter
la même chose ou une propriété similaire à celui-ci, il existe un moyen plus simple de le
faire dans Figma La première chose, c'est que vous
pouvez atteindre le sommet. Lorsque vous sélectionnez cette forme, vous pouvez revenir en haut et sélectionner ici. Vous pouvez venir pour modifier et
vous pouvez
descendre jusqu' en bas et copier des
propriétés ici,
et vous pouvez sélectionner cela, vous pouvez revenir en arrière,
puis revenir en arrière puis revenir pour modifier et vous
rendre aux propriétés antiparasitaires. Par ici. Vous pouvez le faire
avec la commande d'option C, pouvez coller les
propriétés directement, vous pouvez voir la commande d'option V ou commande d'
option C pour copier une commande d'
option V pour coller. Et à l'heure actuelle, vous pouvez
voir que vous
avez ajouté ces
propriétés. Vous avez copié ces propriétés dans cette propriété sans avoir à les recolorer, puis ajouter certaines des fonctionnalités
que vous avez ajoutées Dans chaque cas, dans chaque forme, lorsque vous double-cliquez sur
la sève, vous y avez accès. Cela signifie que vous avez
accès à la forme. Tu peux faire beaucoup de choses. Par exemple, vous pouvez en
modifier la forme en accédant simplement
aux sites. Vous pouvez cliquer dessus
et vous pouvez étendre directement comme ceci. Vous pouvez également venir ici, cliquer dessus, l'étendre
et faire une autre
forme si cela vous intéresse. Vous pouvez le voir, vous pouvez simplement le
modifier en cliquant, vous étendez ou
modifiez la forme. Et si vous le souhaitez, vous pouvez
choisir d'en ajouter un autre, pouvez simplement le sélectionner et vous
pouvez jouer avec. Alors laissez-moi le faire, mais juste
pour vous montrer que cela vous
donne un grand contrôle
sur ce qui se passe ici. Si vous souhaitez modifier
la couleur du champ, vous pouvez voir si vous le souhaitez afin de
pouvoir changer
la couleur du champ, de le sélectionner, puis le changer
en rouge Donc je pense que c'est bon. Et tu peux cliquer dessus. Et si vous voulez changer la
couleur du trait,
vous pouvez également cliquer, puis changer la couleur
du trait, peut-être en
bleu ou bleu. Et vous pouvez voir dès maintenant
qu'une fois que vous entendez une fuite, vous pouvez avoir cette couleur. Donc, en fonction de ce que
vous voulez changer. Mais si vous
double-cliquez sur l'une des feuilles, vous pouvez accéder
à cette feuille et vous pouvez jouer
avec elle très facilement Je pense donc que cela
conclut ce cours
sur la façon d'ajouter des feuilles, de jouer avec leurs propriétés et de les
personnaliser en conséquence. J'espère donc que vous avez
apprécié cette vidéo. Merci de votre attention,
et j'ai hâte de vous
voir au
prochain cours, non ?
12. Les outils du stylo et du crayon: Dans ce cours, nous
allons apprendre à utiliser l'
outil stylo et crayon de Figma Maintenant, pour commencer, vous pouvez
aller en haut ici, les icônes
du haut ici, et vous pouvez voir un stylo et un crayon. Lorsque vous cliquez sur
cette liste déroulante, vous pouvez
voir un stylo et un crayon,
que vous pouvez déclencher à l'aide la commande avec la lettre P sur votre clavier ou en appuyant sur Shift P
pour activer l'outil crayon. Ainsi, quel que soit celui sur lequel vous
allez travailler, vous pouvez facilement le déclencher à l'
aide des touches de raccourci. Maintenant, commençons par le stylo en
cliquant simplement sur la lettre P, ou nous pouvons simplement cliquer sur P, et vous êtes dans l'outil
stylo ici. Vous pouvez donc continuer à
écrire et à créer
ce que vous voulez. Tu peux juste y aller.
Et comme vous le remarquez, si vous vous déplacez librement, vous êtes libre de vous déplacer dans
n'importe quel angle de votre choix. Mais lorsque vous
maintenez la touche Shift enfoncée, elle passe peut-être à 45, 90 degrés, 45 ou 90
degrés comme ça. Cela permet de prendre des photos très facilement
dans le cadre de ces fonctionnalités. Disons que nous allons avoir
environ 45 degrés, je clique ici, puis nous maintenons
toujours le même décalage, vous pouvez voir que cela me
dit automatiquement que je suis à un point où les deux
sont égaux, donc vous pouvez également cliquer, puis probablement nous
pouvons passer ici, et jusqu'à ce que vous arriviez à ce point, cela vous montre maintenant
que vous êtes au même
point et emplacement. Vous pouvez simplement cliquer
dessus et
enfin fermer si vous le souhaitez. Nous pouvons déménager ici. Et faites un autre clic et
enfin jusqu'à ce point. Mais je veux qu'il soit couvert ici
et qu'il ne fasse que 45 degrés. Je voulais couvrir alors. Il se peut que je doive relâcher le shift, puis je pourrai simplement cliquer
et couvrir cette question. Alors maintenant, cela devient parfait,
selon ce que je veux. Je peux toujours appuyer sur la
touche commande pour m'en sortir. Et maintenant, j'ai
dessiné cette forme avec ma propre épingle. Lorsque vous sélectionnez une
forme particulière que vous avez dessinée, vous verrez également ses
propriétés ici. Par défaut, il ajoute
un trait à cela. Et vous pouvez
voir le trait. Lorsque vous arrivez ici,
vous cliquez et étendez et vous pouvez voir que
le trait existe. Vous pouvez voir qu'il existe. Et si vous voulez
changer de couleur, vous pouvez également changer la couleur comme nous l'avons fait
dans l'autre classe, vous pouvez la changer comme ça. Maintenant, une autre chose
que vous pouvez faire avec la forme que vous venez créer est de toujours
double-cliquer à l'intérieur. Vous pouvez toujours double-cliquer à
l'intérieur pour être à l'intérieur de la forme, et vous pouvez apporter quelques modifications Par exemple, vous souhaiterez peut-être ajouter des points pour la modification. Ou vous souhaiterez peut-être en modifier
la forme. Il vous suffit de
cliquer pour modifier la forme. Il se peut que nous cliquions. Juste comme ça, vous pouvez voir que vous pouvez apporter
des modifications à la forme. Vous pouvez l'étendre et le modifier comme
vous le souhaitez. Vous pouvez simplement jouer
avec cela très facilement. Et si vous voulez en colorier
certaines parties, par
exemple, vous devez y
ajouter une touche d'originalité. Donc, pendant que vous êtes encore
en mode édition, vous pouvez venir ici et
cliquer sur cette poche à stylo. Et une fois que vous avez cliqué dessus, vous pouvez colorier les
sections en conséquence. Vous pouvez maintenant colorier
cette section en
appuyant simplement dessus et par défaut, la couleur par
défaut à l'intérieur
est supprimée. Et tu peux venir ici, il suffit de cliquer et tu peux
changer la coloration maintenant. Vous pouvez peut-être le remplacer par
ce rouge et par une échappatoire. Et une fois que vous avez terminé, vous pouvez continuer et dire OK, et maintenant vous avez une forme
que vous avez créée avec votre stylo et elle contient
autant de détails. Maintenant, si vous voulez
utiliser l'outil crayon, vous pouvez toujours utiliser le Shift P. Déplacez une lettre
P pour le déclencher, et vous pouvez venir ici et écrire ce
que vous voulez. D'accord ? Vous pouvez donc
venir et vous pouvez voir par défaut que la figma vous
aidera à vous déplacer dans
tout ce que vous avez Vous pouvez le voir maintenant et
il suffit de taper quelque chose. OK, donc tu peux
continuer et
taper ce que tu
veux ici. Vous pouvez donc voir en détail ce que vous
avez écrit
dans cette couche sur la façon d'
organiser toutes ces couches, afin que vous puissiez
comprendre ce que tout cela signifie. Mais pour l'instant, vous pouvez l'utiliser et vous pouvez le créer. Vous pouvez écrire comme bon vous semble dans ce
vaisseau ou n'importe où. Et une fois que vous avez terminé, vous pouvez toujours vous échapper pour vous en
sortir,
et vous pouvez voir que vous pouvez sélectionner n'importe laquelle des fonctionnalités
que vous avez écrites. Et vous pouvez
également apporter des modifications si cela vous intéresse. Mais pour le moment, je
n'en veux aucune, donc je peux
toutes les sélectionner et les supprimer
si je veux les supprimer. Mais voici les bases de l'
utilisation de l'outil stylo
et de l'outil
crayon de votre toile pour
écrire ou dessiner
ce que vous voulez. J'espère que cette vidéo vous plaira. Merci de votre attention,
et j'ai
hâte de vous voir
au prochain cours.
13. Opérations booléennes + signature: Alors, bon retour. Dans ce cours, nous allons apprendre quelques
notions de base sur les opérations booléennes OK ? Ainsi, dans les opérations booléennes, nous allons
apprendre à combiner une forme avec une autre, et nous allons
probablement
apprendre parfois à séparer une
forme d'une Nous allons donc recommencer à zéro J'ai tout supprimé Je vais
donc simplement ajouter deux formes avec lesquelles nous pouvons le
démontrer. Supposons que nous arrivions à
l'option formes, fonction de
sept formes
ici et sélectionnions quelque chose comme un rectangle et dessinions quelque chose comme un rectangle. Et si nous voulons avoir
le même bord circulaire autour de ce bord, nous pouvons toujours
venir ici,
faire glisser le pointeur et nous avons une
forme circulaire comme celle-ci Nous déciderons de changer
la couleur du champ pour quelque chose
comme ça, c'est bien. Essayons d'ajouter une autre forme. Ajoutons ceci. Nous dessinons le cercle comme
nous l'avons montré précédemment, vous pouvez maintenir la touche du manche enfoncée. Et vous pouvez dessiner un
cercle parfait comme ça, non ? Donc, changeons également le
champ de ce champ en quelque chose comme
ça, il suffit de cliquer dessus. Maintenant, dans les
opérations booléennes,
vous devez généralement combiner
deux éléments Ainsi, lorsque nous sélectionnons le médicament et que nous
sélectionnons ces deux formes, vous remarquerez que cette
icône apparaît. C'est ce qu'on appelle des groupes booléens. Dans celui-ci, vous allez apprendre à regrouper ces éléments
sous différentes formes. Ainsi, lorsque vous cliquez
sur ce menu déroulant, vous verrez que vous pouvez
avoir une sélection d'union,
une sélection soustractions, une sélection intersections
et une sélection d'exclusion.
Ensuite, nous avons aplani la sélection OK ? Nous allons donc
découvrir tout cela à la
fin de ce cours. Commençons maintenant par
le début. Sélectionnons notre cercle et faisons-le
simplement glisser vers celui-ci. OK. Nous allons donc simplement
insérer ceci là-dedans. Maintenant, lorsque vous
les sélectionnez toutes en les
sélectionnant toutes comme ça,
et que vous pouvez accéder aux
groupes de lingots, vous pouvez effectuer une sélection syndicale, qui combine cette fonctionnalité
et cette fonctionnalité ensemble, n'est-ce pas Ceci et cela sont maintenant combinés. Dans tous les cas, si vous voulez avoir accès
à chacune d'elles, vous pouvez
double-cliquer sur la forme, et vous pouvez voir
maintenant que vous avez deux formes, mais elles sont combinées à
l'aide des groupes booléens Et vous êtes libre de
les déplacer, de changer et échanger leur position si c'est
ce que vous voulez.
C'est donc combiné, un lingot. Il vous suffit donc de
combiner les deux formes
ensemble. Maintenant, tu peux le faire. Supposons que nous fassions cela
jusqu'à présent
, puis que nous les faisions glisser
et que nous les déplaçons en acier, puis que nous puissions sélectionner. Et maintenant, nous voulons
soustraire la sélection. Nous soustrayons donc la sélection. Cela permet simplement de soustraire cette partie que
la section combinée a, je soustrais de cette
partie de celle-ci Hein ? Alors,
comment le confirmer ? Nous pouvons double-cliquer ici,
et vous pouvez voir
que ce cercle est
toujours là, n'est-ce pas ? Il est toujours là, mais
il a été soustrait, et vous pouvez modifier
la soustraction, l'arrangement ou le
comportement entre les deux en vous
déplaçant simplement, Mais pour le moment, la valeur par défaut est qu'elle a été
soustraite et que vous pouvez étendre ou modifier cette fonctionnalité
comme vous le souhaitez Mais c'est maintenant une seule chose
qui a été soustraite. Cette forme en avait été
soustraite. Maintenant, une autre chose que
nous pouvons confirmer est faisons-le également. Puisque nous avons vu la soustraction. Revenons encore en arrière en
sélectionnant les deux, on peut revenir à l'opération de
Boulan, on peut dire sélection d'intersections. Maintenant que nous sélectionnons, cela
nous donne le point d'intersection
entre les sélections. C'est donc le point d'
intersection
entre les deux. Faisons donc en sorte que vous puissiez comprendre ce que
j'essaie de dire. OK, donc c'est juste
l'intersection que cela nous a donnée
entre les deux. est justement cette intersection que cela nous a donné.
Vous avez donc compris le message. C'est la sélection de l'intersection. Nous pouvons sélectionner à nouveau, et
nous pouvons faire la dernière, qui est d'exclure la sélection. Et ce que cela va faire, c'est le point d'intersection
entre ces deux formes qui sera
exclu. Essayons donc ça. Et vous pouvez voir que le point d'
intersection est désormais exclu. Vous pouvez également vous déplacer. Et lorsque vous double-cliquez, vous pouvez également vous déplacer pour
modifier l'intersection. Mais ce qui vous indique, c'est
qu'à tout moment, ces deux formes se croisent,
c'est cette section qui va
être supprimée pour vous Vous êtes libre de
jouer avec cela, comme vous le souhaitez en
fonction de ce que vous essayez de créer. Maintenant, la dernière fonctionnalité, qui est la sélection aplatie, quelle que soit l'
opération booléenne que vous avez sélectionnée ici et que vous
avez la résolution, si vous faites une sélection plate, elle va maintenant la convertir en une forme
unique Vous
n'avez donc plus qu'une seule forme qui se comporte avec l' opération
booléenne que
vous venez En gros, voici
les bases sur la façon d'utiliser joueur d'opérations
booléennes avec navires et d'ajouter
différentes choses, Vous pouvez donc les
essayer comme vous le souhaitez, en fonction de ce que
vous essayez de
créer et de votre cible, vous pouvez simplement effectuer une
soustraction, une addition ou une intersection Et puis à la fin de tout cela, vous pouvez tout
convertir en un seul vaisseau. Maintenant, avant de
terminer ce cours,
je voudrais vous donner
une tâche simple
que vous pouvez essayer vous-même,
juste pour démontrer l'utilisation de la Figma pour créer
les opérations sur
les bulons je voudrais vous donner
une tâche simple que vous pouvez essayer vous-même, juste pour démontrer l'utilisation de la Figma pour créer
les opérations sur
les bulons Je veux que tu le crées. Permettez-moi de me
déplacer sur la lettre H. Donc ce vaisseau. Je veux que tu crées ce vaisseau avec l'opération booléenne Il s'agit simplement d'un triangle surmonté de cercles, et nous utilisons les
opérations booléennes pour le créer Essayez donc de créer quelque chose comme
ça afin que nous puissions voir si vous
n' en avez pas l'
occasion, nous allons le
résoudre lors du prochain cours. Mais juste pour mettre la main
sur le système, essayer faire ce que nous faisons et
essayer d'apprendre les bases, je veux que vous essayiez ceci, mais nous le résoudrons dans
le prochain cours de toute façon. OK ? J'espère donc que cette vidéo vous
plaira. Merci de votre attention,
et j'ai hâte de vous
voir au
prochain cours. Au revoir.
14. Solution à l'inscription: Donc, dans le dernier cours, nous vous donnons une tâche simple sur ce que vous
diriez d'essayer de
créer quelque chose comme cette forme simple avec
les opérations booléennes Donc, dans cette classe, nous
allons simplement le reproduire pour voir comment nous pouvons le faire rapidement en utilisant les opérations booléennes Donc, pour commencer,
il vous suffit de passer
aux formes ici et de
cliquer sur n'importe quelle forme. À l'heure actuelle, nous pouvons voir que
celui-ci est un rectangle. C'est un polygone, nous pouvons donc simplement continuer,
cliquer sur un polygone, et vous pouvez simplement cliquer et faire glisser
et nous pouvons maintenant voir que
nous avons créé un Nous pouvons donc le sélectionner tout
en sélectionnant le polygone, nous pouvons toujours revenir et
changer le champ en n'importe quelle couleur, pouvons le changer en
n'importe quelle couleur juste pour différencier ce que nous avons Nous allons donc sélectionner
quelque chose comme ceci. Et puis ce sont de
petits cercles que nous avons. Donc, pour créer ces cercles, nous pouvons simplement
passer ici à ps, cliquer et maintenir la touche Shift enfoncée pour créer
le cercle, n'est-ce pas ? Vous pouvez voir que nous venons de
créer un cercle, et vous pouvez
également remplacer le champ par n'importe quelle couleur
qui correspond à celui-ci. Alors allons-y avec
quelque chose comme le rouge. Ouais. Donc rouge pour
différencier et cliquer dessus. Nous pouvons maintenant le sélectionner
et copier et coller en utilisant Control C, ControV
control C et Control V, puis nous pouvons voir que nous les avons
créés trois fois Nous faisons trois copies,
une, deux, trois, non ? Donc, dans chaque cas, nous pouvons faire glisser chacun d'eux et le
mettre en position. Très facilement, quelque chose
comme ça, très facilement, quelque chose comme ça,
et très facilement, quelque chose comme ça, non ? Je pense donc qu'il ne nous en
faut que trois pour cela, non ? Nous pouvons donc vendre comme ça et supprimer. Nous n'en avons donc pas besoin. Donc, une fois
ces trois formes alignées ou combinées ensemble, nous allons
maintenant appliquer
les opérations booléennes comme vous l'avez montré dans le cours précédent
. Alors, comment faire ? Pour ce faire, nous pouvons
sélectionner les trois fonctionnalités,
les trois formes, puis nous pouvons passer
au groupe Bullion ici, puis nous pouvons passer à la sélection des
sous-pistes Nous pouvons donc simplement cliquer
sur soustraire la sélection et voilà,
votre solution est prête Tout est créé même manière que nous l'avons fait. Ce n'est donc que la
solution de base à notre devoir, petit devoir que nous venons de donner lors du cours précédent. Allez-y,
essayez de voir comment vous pouvez utiliser la plupart de ces fonctionnalités,
comment vous pouvez
déplacer les choses et comment vous pouvez
continuer à planifier les choses ensemble. J'espère que cette vidéo vous plaira. Merci de votre attention,
et j'ai
hâte de vous voir
au prochain cours.
15. Utiliser les outils d'alignement: Bien, dans ce cours, nous allons apprendre les bases
de l' alignement dans Figma OK ? J'ai donc ces formes sur
lesquelles nous avons travaillé. Je viens d'en ajouter quelques-unes juste pour démontrer certaines
applications. OK ? Supposons donc que ces formes soient dispersées
et que nous allons
apprendre à aligner l'
alignement des formes dans un cadre
particulier. Vous pouvez donc voir que je les ai tous
encadrés, et celui-ci est
en train de sortir du cadre. Celui-ci est également en train de
sortir du cadre. Alors, comment pouvons-nous nous assurer
qu'ils sont alignés à l'aide de cette fonction
d'alignement ? Ainsi, la première chose que vous
devez faire chaque fois que vous souhaitez commencer l'
alignement est de vous
assurer de sélectionner
tous les détails ou tous les éléments
que vous souhaitez aligner. Dans ce cas, j'ai
sélectionné tous ces vaisseaux, et je peux venir ici Vous avez différents types
d'options d'alignement. Par exemple, vous pouvez aligner à gauche, et tout sera
aligné à gauche,
ou vous pouvez aligner le centre
ou vous pouvez aligner à droite. Alors laissez-moi le faire,
et tout sera aligné
conformément à cette case. Attention, c'est conforme
à cette boîte. Donc au centre gauche, il va juste
être aligné à gauche. Et pour aligner le centre, vous pouvez simplement cliquer
sur aligner le centre, et tout sera aligné au centre comme ceci. Permettez-moi donc de le faire également
avec ControZ et vous pouvez aligner correctement et il sera
aligné correctement comme ça D'accord, vous pouvez donc
voir que tout est maintenant bien aligné. Maintenant, une autre chose
que vous pouvez faire est cet alignement vertical. Vous pouvez également effectuer
un alignement horizontal. Vous pouvez donc aligner le haut vers le haut et tout
sera maintenant aligné vers le haut
conformément à cette case, et vous pouvez également aligner le
centre. Utilisation de la fonction verticale. Vous pouvez voir que tout
est maintenant aligné, et vous pouvez également aligner le bas ,
comme nous l'avons
fait sur le panneau vertical. Maintenant, un autre
élément clé à noter est qu'en plus de cet alignement horizontal et
vertical très basique, vous avez les points. Vous avez plus d'options
lorsque vous cliquez dessus, vous avez la marée vous avez l'espacement
vertical distribué, puis vous avez l'espacement
horizontal distribué Vous pouvez le faire avec toutes les touches
de raccourci. Touches de raccourci, vous pouvez les utiliser. Le rangement permet de s'assurer
que les fonctionnalités sont activées à égale distance dans
le sens vertical Vous pouvez donc voir avec cette ligne
rose du panneau rose qu'elle a été espacée dans le sens
vertical Vous pouvez donc également modifier cela si vous intéresse
lorsque vous survolez la couleur rose et que votre curseur cela
vous intéresse
lorsque vous survolez
la couleur rose et que votre curseur
se transforme en signe vertical, vous pouvez cliquer et
faire glisser voir la couleur rose apparaître
directement, et vous pouvez augmenter ou diminuer le signe comme
vous le souhaitez Le rythme entre les formes dans le
sens vertical, non ? Et vous pouvez
également le faire à partir d'ici. Vous pouvez le faire de n'
importe où, n'est-ce pas ? Alors laisse-moi le faire aussi. Et puis vous pouvez
faire l'inverse dans l'espacement
vertical distribué Vous pouvez voir qu'ils ont
été répartis manière égale dans l'espacement vertical, et vous pouvez également faire de même dans l'
espacement horizontal Ils ont été répartis de manière égale dans l'espacement horizontal Ceci conclut ce cours sur les bases de l'alignement, façon d'aligner la gauche, la
droite et le centre et au sein des navires
que nous venons d'ajouter. Alors à la prochaine fois,
merci d'avoir regardé, et j'ai hâte de
vous voir au prochain cours. Au revoir.
16. Ajouter et personnaliser des buttons: Dans ce cours, nous allons apprendre
à créer des boutons et même à
les rendre réactifs. Maintenant, pour créer des boutons,
commençons par ajouter
quelque chose comme un cadre. Vous pouvez donc accéder à la section du
cadre ici, que vous pouvez également déclencher
avec la lettre F. Vous pouvez simplement cliquer et
sélectionner n'importe qui. Disons que nous optons pour le F 14, F 13 mini, celui-ci. Donc, pour ajouter un bouton, vous pouvez accéder directement
aux formes ici. Vous pouvez cliquer et sélectionner un rectangle. Vous pouvez simplement venir
ici et cliquer et faire glisser. C'est donc maintenant notre bouton. Mais comme vous le savez, la plupart des boutons ont des rouges circulaires sur les côtés, nous pouvons
donc ajouter des rouges circulaires. En arrivant à cette fin, nous pouvons simplement venir ici jusqu'à ce que votre curseur se transforme en
ce signe horizontal. Vous pouvez cliquer et
créer la nature circulaire. Vous pouvez donc voir que nous avons
les bords circulaires. Vous pouvez donc en modifier la
coloration. Tu peux juste venir ici. Remplaçons-le en
quelque chose comme le bleu. Et nous pouvons sélectionner cette
couleur et cliquer dessus, et maintenant nous avons créé notre
bouton. Ensuite, nous pouvons
ajouter un texte sur le bouton. Nous pouvons le faire en
accédant à la lettre T ici ou à la fonction de texte, ou vous pouvez appuyer
sur la lettre T votre clavier pour activer ou
déclencher la fonction de texte. Maintenant, nous pouvons cliquer ici et nous pouvons simplement écrire n'importe quoi. OK, commencez et nous pouvons sélectionner. Nous pouvons jouer avec
le dimensionnement ici. Faisons en sorte
que ce soit environ 40, non ? Nous pouvons donc trouver une issue, et si vous le souhaitez, vous pouvez les
aligner. Vous pouvez donc le sélectionner et le
sélectionner en maintenant la touche Shift enfoncée ou vous pouvez simplement sélectionner les deux ensemble. Et vous pouvez simplement aller de l'avant
et venir ici et voir aligner le centre et le centre d'
alignement également. Il est donc maintenant parfaitement
aligné sur votre bouton. Le texte est désormais parfaitement
aligné sur votre bouton. Maintenant, si vous remarquez que ce n'est pas réactif, ce que nous voulons dire par « non réactif »,
c'est si nous sélectionnons cette et que nous essayons de changer le menu de
démarrage en quelque chose comme, essayons d'en créer une
copie, par exemple. Sélectionnez et faites « venir »
et « D », vous êtes marqué Pour créer un doublon, il
vous suffit double-cliquer et de
dire « Commencez ». Vous pouvez voir pour le moment
qu'il ne répond pas dans la mesure où, à mesure que la longueur
du texte augmente, le bouton
reste là où il se trouve. Donc, pour créer un bouton étendu
ou réactif, il vous
suffit de
sélectionner les deux, le bouton et le texte, de cliquer avec
le bouton
droit de la souris et de dire sélection de
groupe, puis vous pouvez toujours cliquer avec le
bouton droit de la souris. Vous pouvez utiliser le shift A de votre clavier pour
le rendre réactif. Cela signifie que si
je double-clique dessus, et qu'au lieu de démarrer, j'essaie de le faire démarrer, regardez ce qui se passe. Vous pouvez également voir le bouton s'étendre lorsque j'
essaie d'étendre mon haut droit. OK ? Le bouton devient donc maintenant réactif en fonction de ce que j'
ai écrit dans le bouton. OK. Donc, si je décide de
changer cela également, et de simplement appeler ce menu, il se transforme rapidement en menu. Une autre chose que je
veux vous montrer, c'est que
tout en sélectionnant le bouton
que nous venons de sélectionner. Une chose à laquelle vous devez
faire attention est cette mise en page automatique. Maintenant, pour le moment, vous voyez qu'il s'agit d'une disposition
horizontale sélectionnée. Il a sélectionné la disposition
horizontale. C'est parce que tout
ce que nous avons ici est aligné horizontalement. Tout est horizontal.
Si nous ajoutons quelque chose,
ce sera
à l'horizontale. L'incrémentation et la
décrémentation de la taille, la nature réactive, sont liées à
l'horizontale car elle est
détectée automatiquement en
fonction du contenu dont elle dispose détectée automatiquement en
fonction du contenu dont elle Essayons de voir comment il
va détecter automatiquement que c'est vertical. Créons donc un autre bouton
simple, en gros. Supposons que nous ayons
ce bouton comme celui-ci, et que nous
arrivions rapidement ici pour
ajuster les coins latéraux et les coins latéraux et
changer le champ en rouge. Et maintenant, nous voulons
ajouter quelques éléments
, disons un petit cercle. Nous le dessinons simplement et nous
changeons la couleur pour
quelque chose comme le bleu. Hein ? Donc quelque chose comme ça, et on augmente un peu la
taille, non ? Disons que nous
augmentons la taille. Maintenant, ce que nous pouvons faire,
c'est dupliquer cela peut-être encore quelques fois. Peut-être que nous en avons trois. Nous pouvons donc simplement
glisser-déposer, glisser-déposer, puis
glisser-déposer. Nous pouvons donc
tout sélectionner comme nous faisions auparavant et nous
arrivons à l'alignement. Nous pouvons tout aligner
au centre. Tout est donc
correctement aligné à présent. Ainsi, tout en continuant à tout
sélectionner, nous pouvons effectuer le Shift A pour assurer que tout
est désormais réactif. Vous pouvez donc voir que
Mor fait le shift A,
la disposition automatique a été
remplacée par la disposition verticale, B il en a détecté l'
incrément Supposons donc que nous ne puissions pas
dupliquer cela. Supposons donc que nous en ayons ajouté que nous voulions ajouter
quelque chose à cela. Vous pouvez accéder au cercle, et disons que nous allons
créer un autre cercle , mais cette fois-ci
de cette couleur. Donc, si vous voulez l'ajouter
à cette fonctionnalité, en l'alignant, il
va s'ajuster et répondre à l'ajout et ce sera dans
le sens vertical. Venons donc ici
et vous pouvez voir qu'avec cette ligne bleue, elle indique simplement
la position dans laquelle
se trouvera notre cercle Donc, une fois que nous sommes partis, nous sortons, vous pouvez voir qu'il a été
ajouté à notre cercle, n'est-ce pas ? Vous pouvez donc le sélectionner et le déplacer vers le haut
pour que nous puissions tout voir. Maintenant, c'est le devoir de la publicité de la rendre réactive
à la verticale. Vous pouvez donc le faire
comme je le souhaite. Et vous pouvez double-cliquer
dessus et supprimer. Et le même bouton va
répondre à ce que vous avez ajouté. Donc, dans ce cas,
c'est très utile si vous souhaitez y
ajouter des icônes. Par exemple, vous pouvez simplement le
sélectionner et le déplacer, peut-être probablement ici. Et une fois que vous
relâchez, vous pouvez voir le bouton vient de s'
ajuster en conséquence. Changeons cette couleur
pour qu'elle soit visible. Très bien, alors
faisons-le blanc. Très bien, vous pouvez donc
voir, commencez ici et cela devient maintenant
réactif au fur et à mesure que nous l'avons ajouté, et celui-ci devient également
réactif lorsque nous l'avons supprimé. Ceci conclut
ce cours sur l'
ajout de boutons et leur adaptation,
à fois à l'horizontale et à la verticale à l'aide de la mise en page
automatique pour. J'espère que cette vidéo vous plaira. Merci de votre attention, et j'ai
hâte de vous voir
au prochain cours,
17. Ajouter et personnaliser des composants: Dans ce cours, nous allons
découvrir les composants, comment ajouter des composants, comment créer des composants et les
gérer dans Sigma Les composants sont donc
un comportement spécifique que vous pouvez attribuer à groupe d'
éléments pour lesquels vous pouvez avoir un
comportement spécifique. Donc, en supposant que j'ai
ce bouton de démarrage et que je prévois de créer
dix ou 15 images supplémentaires, et que je souhaite que
ce bouton de démarrage soit
inclus dans toutes les images. Maintenant, normalement, si je dois inclure dans différents
cadres, par exemple, disons que nous sélectionnons ce cadre et que nous le dupliquons Supposons que nous ayons
ce nouveau cadre et que nous voulions que ce menu à
onglets soit inclus dans tout cela dans tous les cadres respectifs
que je souhaite avoir. Ce qui se passait auparavant, c'est que nous pouvions le
faire de différentes manières. Nous pouvons le copier et nous pouvons accéder à ce cadre et le coller. Et ce qui se passe maintenant c'est que si nous en modifiions
l'une des fonctionnalités,
cela n'affectera pas cela. C'est bon. Donc, si vous décidez de changer la
coloration de
celui-ci, cela n'affectera pas
celui-ci en particulier. Donc, dans les cas où
j'ai affaire plus de dix à 15 images à cinq avec ce menu de démarrage inclus, il peut devenir très difficile
pour moi d'apporter des modifications. Si j'en change une
en particulier et
que je veux que cela ait un effet sur
toutes les autres, cela devient très, très
difficile pour moi de le faire. Alors, comment puis-je le rendre plus facile ? Vous pouvez
faciliter les choses en créant composants à partir de la série
d'éléments que vous avez, ou de ce
bouton en particulier, par exemple, alors laissez-moi faire ceci, ou
laissez-moi le sélectionner et le supprimer. Et ce que je peux
faire pour créer un composant c'est sélectionner ce cadre
en particulier, que vous pouvez
voir ici, le cadre 1. Et en le sélectionnant, vous pouvez vous
hisser au sommet de ce top masculin. Vous pouvez voir créer des
composants à partir de cela. Et vous pouvez le faire
avec la touche option et la touche commande, puis la touche. Cela va vous aider à
créer des composants. Maintenant, nous pouvons cliquer dessus
et cela devient automatiquement un composant. Vous pouvez voir que les bords viennent de prendre
cette couleur rose, et vous pouvez
également voir à partir de là que cela devient maintenant la
couleur de ces changements, et qu'il porte ce signe en losange, qu'il s'agit désormais d'un composant. C'est donc un signe
qu'il s'agit maintenant d'un composant qui est une
combinaison de tout cela et qu'il possède la même propriété
unique. Permettez-moi de vous montrer ce que vous pouvez également
faire pour gérer
ce composant. Appelons ça, renommons-le pour en
faire le bouton principal. Vous pouvez donc appeler ce bouton
principal, non ? Et ici, n'
entrez pas. Essayons donc de le dupliquer pour que
je puisse vous montrer quelque chose. Même le dupliquer
seul ne suffit pas. Vous pouvez voir si nous l'avons
dupliqué. Je vais probablement vouloir
avoir cette copie dupliquée. Vous pouvez voir qu'il s'agit d'un composant
dupliqué. C'est ici, là-bas. Vous pouvez voir que celui-ci a les
deux signes différents. Il s'agit d'un composant d'encens
et celui-ci est dupliqué, c'est le
composant principal,
celui-ci, c'est l'encens, tout comme une copie du Maintenant, ce qui se passe,
c'est si j'essaie de copier ce composant d'encens et que j'arrive sur ce
cadre et que je le colle Donc, si je change quoi que ce soit ici, cela n'
affectera pas toujours mon composant principal, juste pour vous montrer qu'une
copie du composant ne peut pas remplir la fonction qu'un composant principal peut remplir. Essayons donc de le faire. Changeons cela, et
vous ne verrez rien, aucun effet n'est affiché sur
le composant principal. Même s'il s'agit d'un composant d'
encens, qui est une copie tout comme une
copie du composant principal OK, donc si j'en fais
une copie. Donc, si je le fais,
supprimons ceci, et si j'en fais une copie
, peut-être, par
exemple, je le sélectionne, je le duplique
et je le déplace vers celui-ci. OK. Et j'
ai probablement un autre cadre. Je le duplique également, je duplique ce formulaire donc j'
ai trois cadres avec celui-ci. Donc, chaque fois que je change ce
soit, rien ne se passera. Mais quand je reviens
au composant principal, celui-ci, et que je change quoi que ce soit, cela affectera le
reste du composant. Regardez ce qui se passe. Donc, si je reviens
au composant principal, puis que je change cette couleur pour probablement quelque chose comme
ce rouge et vous pouvez voir, tout change maintenant et
cela prend l'effet que
je viens d'insérer dans je viens d'insérer le composant principal, qui
est le composant principal. Et si je décide de
modifier le rayon
du cercle
extérieur, si je le change,
cela affectera de la même manière l'ensemble du composant, le corps entier que j'ai
dans tous les différents fms Supposons que je réduise et que j'
augmente ce rayon d'angle, cela aura toujours une
incidence sur le contraire. Vous pouvez voir que si je sélectionne
et ajoute quelque chose ici, cela affectera
les autres. Vous pouvez voir très facilement. Cela devient donc très facile pour vous de naviguer
et de vous connecter
entre les différents
éléments au fur et à mesure que vous
les avez dans les
différents cadres, quel que soit le nombre
de frats que vous possédez Ainsi, après avoir créé
des composants, il devient
très, très facile pour vous
de naviguer entre eux. Maintenant, laissez-moi vous montrer
comment vous pouvez ajouter composants très facilement à travers
les différents éléments, compris
les différents cadres. Vous pouvez également toujours
accéder aux actifs ici, iPhones, et vous
pourrez voir le composant principal
que vous venez de créer Vous pouvez donc facilement le
glisser-déposer ici. Vous pouvez facilement le glisser-déposer où vous le souhaitez
. Et chaque fois que vous apportez
des modifications à
cela également, cela affecte le tout. Tu vois, très facilement. J'ai
tout modifié. Les modifications apportées
au composant principal affecteront
certainement les autres. OK. En gros,
voici comment créer des composants et les
gérer dans Figma J'espère que cette vidéo vous plaira. Dans le prochain cours, nous
allons examiner les variantes, ce que sont les variantes et
comment les gérer dans Figma Alors à la prochaine fois,
merci d'avoir regardé et j'ai
hâte de vous voir
au prochain cours.
18. Comment créer et gérer des variantes: Dans le dernier cours,
nous avons expliqué comment ajouter des composants personnalisés. Et dans ce cours, nous allons apprendre
à créer des variantes. Donc, dans le cas
des composants, vous devez conserver la même propriété
sur toutes les autres
plateformes , sur tous les autres boutons
que vous allez créer. Mais en revanche, vous êtes
désormais libre d' en avoir une
version différente, et lorsque vous souhaitez
modifier l'une de ces versions, automatiquement, vous pouvez sélectionner
la variante que vous souhaitez créer, et vous pouvez simplement la
créer très facilement. Maintenant, permettez-moi de
vous donner un exemple de ce dont je parle
à ce sujet. Pour commencer, essayons d'ajuster
quelque chose, ajustez-le. Permettez-moi donc de le supprimer
parce que nous n'en avons pas besoin, et nous n'en avons pas non plus besoin
pour le moment. Commençons par ajuster cela. le sélectionnant, nous
pouvons accéder au
panneau des propriétés ici. La première chose est, disons, que je souhaite en créer une
variante. Vous pouvez voir en sélectionnant que vous avez les propriétés. Vous pouvez voir les propriétés, vous pouvez
donc appuyer sur ce signe plus et vous avez
les différentes propriétés. Vous pouvez voir créer
de nouvelles propriétés. Vous avez une variante,
vous avez des lingots, vous avez un échange d'instance et du texte Dans ce cas, nous allons
créer une variante. Nous pouvons donc simplement cliquer sur la variante et nous pouvons voir
ce que nous avons ici. Le nom est properties et la propriété est default.
Je l'ai défini par défaut. La propriété est définie
par défaut sous ce paramètre. Donc, ce que nous pouvons faire, c'est que c'est
la variante principale, d'accord ? Il s'agit de sa propriété de nom et la propriété qu'
elle possède est celle par défaut. Nous pouvons donc décider de le renommer, appeler la variante principale, et la propriété sera
définie par défaut Nous pouvons le conserver par défaut. Mais ensuite, nous pouvons
créer une variante à partir de cela en descendant
simplement sur ce signe
de tracé, et nous pouvons cliquer sur Ajouter une variante et nous avons
cette deuxième variante. Maintenant, tout va être enfermé sous
ce cadre en pointillés, un peu comme un tableau de bord. Également. Il est extensible Vous pouvez venir ici
et vous pouvez cliquer et l'
étendre si vous
voulez l'étendre. C'est pourquoi nous
disons que c'est un peu
comme un tableau de bord. Alors maintenant, celui-ci,
ce second, essayons de voir si nous pouvons modifier les propriétés
du second. Très bien,
disons que nous essayons de modifier cette composition, cette propriété, les propriétés de ce bouton
en particulier Par exemple, nous pouvons décider
de supprimer cette coloration, pouvons décider de supprimer la couleur, et probablement nous pouvons la
rendre aussi lumineuse. Ensuite, nous pourrons décider de
jouer avec cette bordure. Nous pouvons donc décider de jouer
la bordure du trait en ajoutant
simplement le
trait et en l'
étendant probablement jusqu'à ce que nos cinq, c'est parler, mais
je pense que c'est bon. Nous pouvons donc
double-cliquer sur ce texte, et nous pouvons également modifier les
propriétés du texte, en particulier
la couleur, en particulier la couleur du texte, le sélectionner
et le
rendre rouge. Et cette icône également que nous avons, sélectionnons-la et changeons la couleur pour probablement
cette couleur rosée. Très bien, pour qu'on puisse voir. Maintenant, nous commençons par
cette couleur du, donc
nous pouvons l'appeler ainsi. Nous pouvons double-cliquer dessus et nous pouvons accéder
aux propriétés. Maintenant, nous changeons la variante principale. Nous pouvons appeler cette variante
deux, mais nous pouvons l'appeler. Appelons ce
plan, par exemple, parce qu'il est
différent du plan principal
car celui-ci n'est que le plan. Hein ? Pour le moment, je veux vous montrer comment vous pouvez appliquer ces deux variantes ces boutons que vous avez répartis sur
les deux cadres. Ainsi, lorsque vous
sélectionnez le
composant principal de ce bouton, vous pouvez voir les mêmes
propriétés apparaître. Ainsi, lorsque vous sélectionnez ce bouton
en particulier, vous pouvez le voir à partir
du bouton principal. Oh, c'est le nom que
nous avons donné au bouton principal. C'est ce qui apparaît parce que
c'est une composante de tout cela. Il s'agit simplement d'une copie
du composant principal. Vous pouvez voir que nous l'
avons nommé pour figurer dans le bouton, et vous pouvez voir que les
propriétés sont définies par défaut. Ainsi, lorsque vous cliquez
sur ce menu déroulant, vous pouvez voir le bouton de contour,
qui correspond à la variante. Donc, une fois que vous avez cliqué dessus, vous pouvez maintenant voir que votre bouton passe
maintenant à cette variante. Cela devient donc
vraiment très pratique dans les cas où vous
n'avez pas à le recréer et où vous avez plusieurs images pour simplement
utiliser différentes variantes Ainsi, lorsque vous
tombez également sur ce
point, si vous souhaitez le
remplacer par l'autre, vous pouvez simplement sélectionner
et voir la copie du plan. Ou si vous souhaitez revenir
à cette variante principale, vous pouvez simplement sélectionner.
Il y a quelques changements. Vous pouvez sélectionner, vous pouvez descendre et vous pouvez
simplement dire « par défaut », et cela revient
à la valeur principale. OK. C'est donc
essentiellement ainsi qu'il faut ajouter une variante, créer une variante
et la gérer de manière transversale. Maintenant, laissez-moi vous montrer un autre
exemple qui est très, très important et que
vous pouvez utiliser avec plaisir. Disons donc avec celui-ci. Disons avec cette
variante, cette première. Je veux changer quelque chose. Par exemple, je donne
celui-ci. Je lui donne un autre nom. Je l'appelle icône, et je dis que c'est vrai ici.
Et je dis que c'est vrai. Je sélectionne celui-ci
et je viens ici. Je lui donne également un nom d'icône. Mais cette fois-ci,
je dis que c'est faux. OK. Donc c'est ce que j'essaie de faire. En sélectionnant celle-ci,
je vais supprimer cette icône, celle-ci ,
ce qui signifie que
celle-ci est sans icône, et celle-ci est avec une icône. Je viens de les définir. Donc, chaque fois que je clique dessus,
c' est maintenant que le nom
est devenu une icône, mais quatre. Et puis celui-ci a également changé
de nom
pour devenir une icône, mais c'est vrai. Alors maintenant, quand j' essaie de changer la
faration, je sélectionne
peut-être cela et j'arrive au bouton principal Vous pouvez voir maintenant que
le nom est devenu
une icône ou qu'il est associé à ce signe d'
activation et de désactivation. Donc, si je gagne, cela ramènera
cette variation. Et si je le
désactive, l'icône disparaîtra , comme
nous l'avons montré. OK, donc c'est très,
très intéressant. Si je le sélectionne également
et que je veux revenir à cette variante de bouton, je peux simplement désactiver l'icône, pour qu'elle devienne maintenant celle-ci. Cela n'est donc
possible que parce que j'
ai ajouté les commandes vrai et
faux, d'accord ? Donc, si vous revenez dessus
et que vous essayez de cliquer dessus. Dans ce cas, je définis
la propriété comme vraie, et dans celui-ci, j'ai défini
la propriété comme fausse. C'est la seule
raison pour laquelle je peux activer et désactiver
ces deux boutons
de variation Alors, il suffit de voir la différence. C'est que si vous utilisez du texte, vous n'
obtiendrez pas le même effet et en
désactivant le problème des icônes, vous pouvez le voir, cette variante Comme vous pouvez
le voir, également à partir des couches ci-dessus,
cette première icône égale à faux,
et dans
celle-ci , une icône est égale à deux. C'est ce qui fait
la différence. Ainsi s'achève ce cours sur la compréhension des variantes, leur création et leur manipulation dans Figma J'espère que cette vidéo vous plaira. Merci de votre attention, et j'ai
hâte de vous voir
au prochain cours.
19. Ajouter des plugins: Dans ce cours, nous
allons donc
apprendre à ajouter et à exécuter des plug-ins. Les plug-ins sont des
éléments tiers que nous pouvons utiliser des applications que nous pouvons ajouter à notre Figma pour
améliorer nos expériences Parfois, vous devrez peut-être utiliser
des applications tierces gratuites pour ajouter
à création de notre
contenu dans Figma Parfois dans la création de sites Web, ou parfois dans la création d'
éléments. Il se peut que nous devions ajouter
un ou deux composants ou plug-ins pour avoir
une meilleure expérience. Il existe donc différentes
manières d'ajouter des plug-ins. Mais le moyen
le plus simple et le plus rapide
d'ajouter des plugins est
de passer par ce menu principal. Vous pouvez cliquer sur
le menu principal et vous pouvez descendre ici,
vous pouvez voir les plugins. Tu peux venir jusqu'
ici. Vous avez autant d'options. Vous pouvez créer un nouveau plugin
de port de connexion à partir du manifeste, ou vous pouvez consulter la
documentation de l'API concernant les plug-ins Vous pouvez afficher ou masquer le
consul, etc. Mais pour cela, nous allons
gérer les plugins ici, et vous avez la possibilité de faire recherche sur tout type de
plugin que vous souhaitez utiliser Vous pouvez voir que nous avons
des composants ici. Nous avons des plugins ici,
nous avons des widgets ici. Nous allons donc utiliser des plugins et nous pouvons effectuer notre
recherche directement ici. Donc, le premier,
disons que je veux ajouter ces moges animés,
je veux ajouter des moges animés. Vous pouvez simplement
rechercher n'importe quel plugin Vous pouvez voir celui-ci animé en train de
brancher des images animées, et vous pouvez simplement
continuer branchement
animé est en train de charger et vous pouvez le voir ici
, n'est-ce pas ? vous suffit donc de
sélectionner l'endroit où vous souhaitez ajouter le plugin et vous pouvez simplement l'ajouter
directement. Supposons donc que je veuille ajouter ceci. Je peux simplement cliquer dessus, le faire glisser
et l'ajouter dans mon cadre. Et vous pouvez voir qu'il a
été ajouté dans mon cadre, et je peux
le redimensionner et mettre où je veux
dans mon espace Alors peut-être que je veux probablement
le mettre quelque part. Ouais. Je peux simplement le sélectionner, et vous pouvez voir que j'ai
inséré ce MOG Et chaque fois que vous sélectionnez
le G. Vous
avez toujours ses propriétés ici bas. Si vous souhaitez
modifier l'une de ses propriétés. Vous pouvez également cliquer pour modifier
différentes propriétés, et vous pouvez le jouer pour avoir un aperçu de ce qu'il fait. Et vous avez autant de fonctionnalités
en ce qui concerne son opacité, pouvez la modifier
directement à partir d'ici Il s'agit donc du premier plugin. Vous pouvez avoir autant de plugins
que vous le souhaitez. Tout ce dont vous avez besoin, c'est de vous
assurer de revenir pour vous connecter ici, et
de passer aux branchements. Ce sont les deux que j'ai utilisés. Vous pouvez en ajouter plusieurs.
Passons à beaucoup d'autres. Vous pouvez dire : Il y en a un
qui s'appelle content el. C'est également très agréable
et intéressant. Vous pouvez donc simplement
le sélectionner et vous pouvez continuer et courir. Et pour le moment, vous pouvez voir que nous venons d'ajouter la version d'essai du contenu. Alors, comment utilisons-nous le contenu ? Il
comporte différentes fonctionnalités, du nom
annoncé au
nom complet, en passant par la date, l' adresse
complète, les numéros de téléphone, devise
américaine, etc. tant de choses pour lesquelles
vous pouvez l'utiliser Et il a l'effet d'
ajouter un effet sur le texte, ajouter un effet sur les images et d'ajouter
des effets sur les icônes. Essayons ensuite d'avoir un exemple
de
ce dont nous parlons et de la façon d'
utiliser cette version d'essai de contenu. Ainsi, par exemple, si
nous abordons les navires
et essayons d'
ajouter cette ellipse, de cliquer dessus et de la faire glisser
quelque part ici, je peux maintenir la touche Shift enfoncée que nous puissions avoir un cercle parfait Et disons à l'intérieur. Je veux ajouter une photo mais
je ne l'ai pas,
donc je peux ajouter quelque chose
comme cet avatar. Je peux simplement cliquer
d'un seul clic pendant que je sélectionne ce navire, je vais ajouter l'
image de quelqu'un. Et si vous continuez à cliquer, il va continuer à
changer les images qu'il a à l'intérieur
du même vaisseau. Donc, en fonction de ce que
vous souhaitez créer. Vous pouvez également le sélectionner et le
faire créer. Voici donc comment ajouter ceci. Si vous souhaitez également ajouter des images, si vous souhaitez ajouter des images
différentes, vous pouvez également
venir et utiliser
différents types d'images. Vous pouvez utiliser différents
types d'images et vous pouvez voir plusieurs images en
fonction de ce que vous créez. Vous pouvez utiliser la case à cocher, en
sélectionner une et simplement l'appliquer. Vous pouvez donc sélectionner une image et vous pouvez simplement la modifier
à partir d'ici, n'est-ce pas ? Même chose avec les icônes. Vous pouvez avoir plusieurs icônes, des icônes
fluides régulières. Ils sont créés par Microsoft. Vous avez également des icônes fluides remplies
par Microsoft. Vous pouvez donc cliquer sur n'importe lequel d'entre eux et vous verrez plusieurs icônes. Évidemment, vous pouvez
voir plusieurs icônes que vous pouvez au moins utiliser long de votre
création dans Figma Vous pouvez donc simplement sélectionner n'importe lequel
d'entre eux,
le faire glisser et le déposer, et vous pouvez facilement
l'ajouter à vos créations. Vous pouvez donc le sélectionner et vous pouvez aussi le faire glisser
et le déposer ici. J'ai cette fonctionnalité pour vous, vous pouvez modifier n'importe laquelle
des fonctionnalités tout en sélectionnant l'icône. Vous pouvez modifier n'importe
laquelle de ses fonctionnalités. Tout en sélectionnant les icônes, vous pouvez modifier Iqu
de nombreuses choses à partir d'ici Il s'agit de plug-ins. Vous pouvez manipuler n'importe lequel d'entre eux qui vous
intéresse, et vous pouvez simplement explorer, essayer de trouver d'autres plug-ins et les ajuster,
ou commencer à les utiliser pour commencer à
apprendre à les utiliser , car
les plugins sont exceptionnels lorsqu'il
s'agit d'apporter professionnalisme, facilité d'
accès et de travail dans Figma J'espère donc que cette vidéo vous plaira. Merci de votre
attention et j'ai hâte de vous
voir au
prochain cours, mais
20. Créer des designs à partir de modèles: Dans ce cours, nous allons apprendre
à créer
des designs à partir d'un
modèle dans Figma Commençons donc par revenir
à l'onglet d'accueil ici. C'est bon. Donc, une fois que vous êtes ici, vous pouvez venir ici pour
découvrir la communauté. Et vous pouvez voir qu'
il existe de nombreux
types de modèles
auxquels vous pouvez accéder à partir d'ici. Vous pouvez rechercher
tout ce qui se trouve au sein la communauté directement à partir d'
ici, ou vous pouvez vous inspirer, trouver ce que d'autres personnes ont créé, team sink, le
système de conception, les ressources visuelles. Vous pouvez consulter les
développements, les icônes et l'accessibilité, le Web, le
mobile et le cadre. Les utilisateurs de
Figma en ont créé un grand nombre, et vous pouvez y trouver beaucoup
d'inspiration Vous pouvez même venir
ici et découvrir quels sont les outils commerciaux
qui fonctionnent sur le FDMA Voici donc quelques-unes des
créations tendance des utilisateurs de la FDMA. Vous pouvez voir le
nombre d'entre eux. Donc, par vous-même, vous pouvez simplement procéder à une recherche directe. Par exemple, vous pouvez
rechercher n'importe quoi. Essayons de
rechercher quelque chose de simple comme un problème, n'est-ce pas ? Essayons donc de rechercher
quelque chose comme trouble up. OK, donc pour ce cours, nous
allons choisir
quelque chose de simple. OK, sélectionnons ce problème version 2.0. Il vous suffit de cliquer. Et cela vous amènera à vous le montrer et vous pouvez
simplement continuer et dire, ouvrez dans Figma, vous pouvez
simplement cliquer pour l'
ouvrir en tant que nouveau
projet dans Figma OK, donc une fois que tu auras ouvert, tu seras
accueilli avec ça. La première étape est que vous avez
le menu principal où vous pouvez cliquer, sélectionner et
vous pouvez arriver à ce point. Il s'agit de l'image de la liste, puis de
la page détaillée. Voici donc la page détaillée contenant certaines des
choses que vous pouvez modifier. Maintenant, pour modifier
l'une de ces fonctionnalités, vous suffit de cliquer
et de la modifier. Par exemple, vous pouvez cliquer
dessus et vous verrez que
nous avons parlé de l'utilisation
de cadres et d'éléments, façon d'ajouter différents
types de choses, la
superposition de tout cela Une fois que vous avez sélectionné n'importe quel type d'
élément, par exemple, si vous souhaitez
modifier cette image, vous pouvez cliquer dessus et
sélectionner l'image. Vous pouvez voir l'image ici, vous pouvez cliquer et vous pouvez venir ici et
voir choisir une image. Ainsi, vous pouvez naviguer partout où vous avez des images
dans votre système. Par exemple, dans mon cas, j'ai ce tutoriel Figma, je l'ai dans cette ressource Et je peux sélectionner n'importe laquelle des
images, soit celle-ci, soit celle-ci. Allons faire quelque chose comme ça. Et en un seul clic, vous pouvez voir que nous venons de
changer l'image à ce sujet. OK ? Vous êtes donc libre d'
utiliser n'importe laquelle de vos images. Vous pouvez y échapper et
vous êtes maintenant de retour au nouveau. Vous pouvez donc voir
maintenant que nous avons changé cela. Vous pouvez également modifier le texte, mais il suffit de
double-cliquer sur le texte. Comme nous l'avons expliqué, cela pourrait être la meilleure
aventure pour vous. Profitez de vos vacances
ici, par exemple. Vous avez autant d'options. Vous pouvez double-cliquer et vous pouvez modifier n'importe quoi à partir d'ici. Par exemple, vous pouvez modifier la taille du texte, n'est-ce pas ? Vous pouvez voir que vous pouvez
modifier la taille du texte et échanger
le style du téléphone OK. Tu peux le rendre audacieux. Vous pouvez le faire utiliser. Vous avez autant de fonctionnalités , tout comme les
fonctionnalités d'édition de texte. Vous pouvez remplacer le remplissage par une couleur
probablement rouge. Il est donc très facile de modifier et de changer certains de ces
éléments au fur et à mesure. Donc, une autre chose avec laquelle vous pouvez jouer est ce bouton. Vous pouvez simplement cliquer sur
le bouton et vous pourrez changer
pas mal de choses. À partir de là, vous pouvez également
modifier la coloration. Tu peux en faire
quelque chose comme ça. Je peux voir, et vous voyez que nous pouvons voir
que nous allons le changer. Maintenant, vous pouvez également contrôler le rayon d'
angle à partir d'ici. Nous avons parlé du
rayon d'angle. Tu peux le contrôler. Et ici, il suffit de
double-cliquer sur l'objet. Vous pouvez voir un
double-clic dessus et vous ne pouvez pas modifier
le rayon d'angle, augmenter ou le diminuer, comme vous le souhaitez, n'est-ce pas ? Vous pouvez voir, disons que nous
avons quelque chose comme ça. Et vous pouvez également modifier
le texte à l'intérieur pour commencer dès maintenant.
Inscrivez-vous dès maintenant. Vous pouvez donc faire pas mal
de choses. Vous pouvez changer beaucoup de choses ici en ce qui concerne le
contenu de ce document. Vous pouvez également modifier
cela et simplement cliquer sur « Cela a été ajouté à l'aide du plugin
que nous avons montré plus tôt ». Vous pouvez ajouter différents types
d'icônes avec les plug-ins. Donc, si, par exemple, vous souhaitez changer cela, vous pouvez passer aux plug-ins, comme nous l'avons expliqué plus tôt, vous pouvez passer aux
plug-ins et vous pouvez accéder au contenu public en vrai. Nous pouvons constater que le
contenu est réel. Et vous pouvez voir que vous
pouvez accéder aux icônes Si vous avez un type d'icône qui vous intéresse,
choisissons-le. OK, vous pouvez donc sélectionner en
fonction de ces icônes, celles qui vous
intéressent, vous pouvez simplement
sélectionner, par exemple,
sélectionnons quelque chose comme ça, et vous pouvez voir que nous venons de l'ajouter à
celui-ci, n'est-ce pas ? Vous pouvez maintenir la touche de commande enfoncée. Vous pouvez facilement le faire glisser. Supposons donc que nous le glissions
et que vous l'insériez simplement ici. Nous pouvons voir si je viens de l'ajouter. Vous pouvez l'ajouter
partout où cela vous intéresse. Voici donc comment intégrer différents éléments et les
modifier en conséquence. Je peux terminer sur ce point et donc me permettre d'utiliser la
lettre H pour me déplacer. Voici donc en fait comment
personnaliser différentes choses. Vous pouvez modifier tout cela. Si cela vous intéresse,
vous pouvez modifier tout cela en conséquence si cela
vous intéresse. Ceci conclut ce
cours sur la façon d' ouvrir un modèle et ajuster les fonctionnalités
de ce modèle. Dans le prochain cours, nous allons apprendre
à créer un
design d'interface utilisateur particulier à partir de zéro. Peut-être que nous allons le
reproduire à partir de zéro. Nous allons le créer
à partir de zéro et voir comment nous pouvons jouer
avec certaines fonctionnalités. Alors jusqu'à la prochaine fois,
merci d'avoir regardé et j'ai hâte de vous voir
au prochain cours, non ?
21. Créer une interface utilisateur à partir de zéro: Dans ce cours, nous
allons apprendre à créer un design d'interface utilisateur
à
partir de zéro. Nous allons simplement choisir
n'importe laquelle de ces pages, et nous allons la
créer en utilisant méthodes différentes, des méthodes
différentes. Vous pouvez commencer par
créer un cadre, afin que nous puissions
passer aux cadres ici. Nous ne pouvons pas le guider avec une
lettre F, nous pouvons simplement le cadrer. Et comme nous l'avons dit plus tôt au début
du didacticiel, nous pouvons sélectionner n'importe lequel d'entre eux. Alors allons-y le 14. Allons le fan, et je pense que nous avons de la chance de l'
avoir de la même taille. Donc, ce que nous devons faire,
c'est simplement
double-cliquer et changer le nom
de ce cadre en particulier, peut-être en aviging H. pouvons
donc continuer et ajouter différentes fonctionnalités,
comme nous l'avons vu La première est donc que nous
pouvons ajouter cette image. Nous pouvons ajouter des images
directement dans ce dossier et vous pouvez utiliser vous-même et glisser-déposer n'importe quelle image
directement dans le cadre. Je peux voir maintenant que nous avons
inséré cette image. Vous pouvez le
redimensionner pour étayer l'ensemble des versets qui disent que
nous nous caractérisons comme ça Et transportez également une taille
comme celle-ci. C'est bon. Donc, une chose que nous pouvons
remarquer, c'est que celui-ci a cette nature de courbe
en bas. Nous pouvons donc le faire. Nous pouvons également reproduire cela en nous référant à
la nature de la courbe. Nous pouvons sélectionner l'image, et nous pouvons modifier
la caractéristique
de la courbe à partir d'ici, le rayon d'angle. Vous pouvez modifier
cette sélection en double-cliquant
ici et peut-être en faire 25 et vous pourrez voir si vous avez
ajouté un rayon d'angle,
mais
ce n'est pas en tant que pixel, nous pouvons donc glisser pour le rendre
beaucoup plus visible OK. C'est une façon de le faire. Alternativement, nous pouvons nous
rendre dans les coins indépendants. C, il suffit de cliquer. Et si vous remarquez qu'en haut
, il n'y a pas de coin. C'est donc le meilleur signe. Le coin inférieur du bouton supérieur. Allons donc ici
et faisons en sorte que ce zéro et que
celui-ci soit également nul. OK. Une fois que nous avons cliqué dessus, vous pouvez voir qu'en ce
moment nous avons ceci avec les coins en
haut, les coins lents. Nous pouvons donc
également sélectionner une autre option, nous pouvons toujours créer
les coins à l'aide de ce rail et vous pouvez le faire
avec les coins, comme nous l'avons démontré
au début de ce didacticiel. Nous venons donc de le créer. La prochaine est que nous
pouvons ajouter ce texte. Oh, nous pouvons ajouter ces éléments, celui-ci, c'est juste un rectangle
avec autant de fonctionnalités. Nous pouvons donc y ajouter le
rectangle. Vous pouvez accéder aux formes ici, cliquer sur sélectionner un rectangle, et nous pouvons simplement sélectionner
et dessiner un rectangle. Celui-ci a également
des extrémités circulaires, nous pouvons
donc
passer au rayon et simplement en
augmenter les bords. Nous pouvons avoir quelque chose comme ça. Et nous pouvons également changer la couleur en blanc pur cette fois-ci. OK, nous avons donc
quelque chose comme ça. Mais ce n'est pas tout.
Il nous faut une ombre. Nous aurions pu entrer en vigueur jusqu'à ce que nous ayons cette ombre. Et maintenant, nous pouvons voir que nous avons nos éléments tels
que nous les avons ici. Maintenant, ici en bas, nous pouvons ajouter ceci différemment afin d'ajouter ce texte. Le texte est simple. Vous
pouvez simplement copier-coller. Faisons donc simplement une copie
et nous pouvons simplement revenir. Disons que nous l'ajoutons avec ceci, pouvons arriver à la lettre T, et que nous pouvons simplement cliquer et
écrire quelque chose. Voyage. Les détails, par exemple,
puis nous pouvons cliquer dessus et cliquer
et le déplacer quelque part ici, puis nous pouvons avoir
ce noble texte, que nous pouvons toujours
déclencher avec celui-ci. Ensuite, nous pouvons sélectionner. OK, et nous pouvons
avoir un texto ici. J'aime bien que nous
l'ayons là-bas. Vous pouvez donc simplement cliquer sur une zone de
texte et vous pouvez différentes choses que je redimensionne en utilisant les propriétés, les
différentes propriétés La prochaine étape est donc la dernière
consiste à ajouter ce bouton, et nous avons appris
à ajouter des boutons en
accédant simplement aux formes ici. Vous pouvez sélectionner un enchevêtrement rouge, et nous pouvons le dessiner et le
rendre aussi grand. Donc, si vous le souhaitez, vous
pouvez zoomer pour voir les détails et vous pouvez également utiliser le papier à en-tête pour
vous déplacer Vous pouvez donc sélectionner cette option et
nous pouvons apporter des modifications. Vous pouvez le redimensionner et vous pouvez
également vous échapper. Vous pouvez le redimensionner et le modifier. Vous pouvez ajouter
le rayon d'angle à partir d'
ici, comme ça Et tu peux changer
la couleur à partir d'ici. Vous pouvez voir plus de couleurs. Vous pouvez utiliser le
sélecteur de couleur et choisir la coloration exacte
que nous avons ici Vous pouvez donc y échapper à moins déclencher le texte et
nous pouvons voir joindre maintenant, vous pouvez simplement rejoindre maintenant. Et nous pouvons le sélectionner
et le mettre en gras, nous arrivons et, et nous pouvons tout
sélectionner, sélectionner le texte,
ainsi que le bouton, puis nous pouvons centraliser centre des deux à l'
horizontale et à la verticale Et maintenant, nous avons tout. Donc, la prochaine chose que nous pouvons
avoir, c'est cet endroit, l'étoile et les deux. Cela peut donc être ajouté
à partir de l'icône. Cela nous oblige donc
à ajouter un plugin. Alors, comment ajouter un plugin ? Venez ici et nous pouvons
rechercher un plugin appelé
icon scout icon scout Vous pouvez donc simplement rechercher une icône.
Par défaut, vous voyez un
certain nombre de plugins
différents qui
peuvent vous donner des icônes. Mais pour cet oral,
nous allons utiliser l'Icone Scout, celui-ci. Vous pouvez donc voir en cliquant, cliquant sur et en explorant. J'ai compris. Il vous faut donc vous connecter. Vous pouvez donc simplement rechercher
n'importe quelle icône. Ainsi, par exemple, nous
pouvons dire flèche de retour. Supposons que nous
recherchions la flèche arrière et que nous puissions voir différents types de flèches
arrière que nous pouvons facilement utiliser. Ainsi, par exemple, pour celui-ci, vous pouvez voir cette
flèche arrière, celle-ci, celle-ci. Essayons de le créer, afin que nous
puissions avoir différents
types de flèches arrière. Nous l'avons donc, nous pouvons donc continuer et l'utiliser
également. Utilisons-le donc. Utilisons-le donc. Nous
pouvons le glisser-déposer. Nous pouvons donc redimensionner.
Redimensionnons-le Échappons à cela.
Redimensionnons-le. Nous allons donc le redimensionner et
le mettre quelque part ici. Mettons-le donc quelque part ici. Et nous pouvons également changer la
coloration à partir d'ici. Faisons-en quelque chose comme du
blanc. Je pense que c'est ça. Vous pouvez avoir quelque chose comme
ça, pour que nous puissions revenir en arrière. Donc, ici aussi, vous
pouvez ajouter tout cela. Vous pouvez ajouter ce texte sur le
lieu et cette étiquette de prix. Vous pouvez donc toujours
revenir au même plugin. Vous pouvez donc simplement
rechercher un emplacement. OK, il vous suffit donc de
rechercher un panneau de localisation. Et vous pouvez les voir
de différents types. Vous pouvez glisser-déposer. Et vous pouvez redimensionner directement. Vous pouvez faire glisser la touche Shift vers le bas pour obtenir un redimensionnement parfait D'accord, moins, nous allons le redimensionner. Ensuite, nous pouvons rechercher les
autres, leur étiquette de prix. Vous pouvez toujours revenir
au travail et continuer. Ainsi s'achève ce
cours sur la façon de créer un nouveau
design à partir de zéro. OK, donc j'espère que cette vidéo vous
plaira. Merci de votre attention,
et j'ai
hâte de vous voir au prochain cours.
22. Créer un prototype interractif de l'application: Dans ce cours, nous allons apprendre
à créer un design interactif de
cette application d' interface utilisateur que nous essayons de
créer dans Figma Pour commencer,
essayons donc de
faire en sorte que
nous puissions interagir et passer d'une
image à l'autre en
effectuant certaines actions de la première image qui pourraient nous
mener à la deuxième image, et nous pourrons définir
le comportement de chaque action en
fonction du prototype. Le prototype est donc comme
la démonstration de ce à quoi l'application que
vous essayez de créer ressemblera
l'application que
vous essayez de créer
dans la vie réelle. Et nous allons
faire l'aperçu directement ici avec cette icône. Directement. Donc, pour commencer, commençons par le
premier cadre ici. Ajoutons une simple icône
ou un simple bouton. Revenons au mode de
sélection et choisissons d'ajouter un simple bouton
sans le copier-coller. Oui, déplaçons-le ici. Et
renommons-le en Get Started. Commençons par le faire, et nous pouvons ajouter quelque chose ici pour démontrer l'impact de
ce que vous essayez de créer. Supposons que nous y
ajoutions une image, que nous la glissions et que nous la collons
dedans. C'est bon. Et vous pouvez voir qu'à l'heure actuelle,
cela couvre tout. Essayons donc de l'
arranger et de le réduire. Nous l'avons donc et pouvons également l'
intégrer ici, afin de conserver les
autres fonctionnalités. Mais ensuite, nous pouvons toujours sélectionner l'image et l'
amener ici, et nous pouvons réduire l'opacité pour qu'elle
devienne bien visible Les autres caractéristiques
ne peuvent pas devenir visibles, c'est un peu comme une opacité de dix C'est trop petit. Faisons en sorte qu'il soit peut-être 40. OK. Je pense que c'est bon. Nous pouvons donc voir à partir d'ici, que nous pouvons commencer et
établir un lien avec cet endroit. Mais alors ajoutons
probablement mon logo à cela. Nous pouvons également simplement
glisser-déposer le logo, et nous pouvons également le
dimensionner en venant ici aimant
et en faisant glisser pour le réduire un peu. En maintenant la touche Shift enfoncée, nous pouvons avoir un arrangement
parfait, puis nous pouvons simplement le sélectionner
et le mettre de côté. Nous pouvons donc ajouter du texte, peut-être pour indiquer qu'il se passe
quelque chose ici,
mais je pense que ça va Lorsque vous cliquez,
vous pouvez vous rendre ici. Et puis, à partir de là,
lorsque vous cliquez, vous pouvez voir ce détail.
Alors, comment s'y prendre ? Comment associer l'action,
peut-être sur votre téléphone, qui
vous redirigera vers ce cadre lorsque vous cliquerez
sur Commencer ce cadre lorsque vous cliquerez
sur Et puis, lorsque vous
cliquerez sur cette image, vous serez
redirigé vers les détails du magazine. Donc, la première
chose à faire est de commencer par cliquer
sur Commencer, et vous pourrez accéder au
prototype ici. Ensuite, tu pourras y aller
et venir ici. Vous pouvez voir ce signe positif. OK. Donc, une fois que vous avez cliqué
sur le signe plus, vous pouvez cliquer sur le signe plus, et vous pouvez simplement vous inscrire
comme ça, d'accord ? Vous pouvez donc voir qu'il passe
simplement à l'action suivante. Il est relié au pont suivant. Et comment cela se produit-il ? Est-ce au clic ? Vous pouvez voir
que le clic est activé par défaut. Ainsi, une fois que vous aurez cliqué
sur Commencer, vous serez
lié au cadre suivant. C'est une valeur par défaut, mais vous avez d'autres fonctionnalités,
comme la possibilité d'en faire une saisie avec la souris ou de laisser la
souris enfoncée ou la souris. Ou après un retard sur Drac. Vous pouvez sélectionner n'importe laquelle de ces options
si cela vous intéresse. Donc, pour ce cours, nous allons
simplement nous en tenir là ou cliquer, ce qui est le cas par défaut, et nous allons simplement le faire naviguer
vers cette page. Si vous avez une autre option, comme choisir entre Pre, avoir des superpositions,
des superpositions, superpositions d'échange
ou autres fonctionnalités,
vous pouvez procéder à la sélection en conséquence si vous Et c'est la première
option. Vous l'avez lié. Après cela, il sera
lié ici. Ensuite, nous
pouvons essayer de tester,
et voyons comment
se déroulera l'action de cette
image à la suivante. Vous connaissez la transition entre ce cadre
et le suivant. Nous allons le tester en direct pour voir comment cela va se passer. Nous pouvons donc commencer par
passer au
test ici, en cliquant sur le bouton de
prévisualisation, où nous pouvons prévisualiser
le prototype et voir ce qui va se passer
sur notre téléphone portable. Vous pouvez donc venir ici et cliquer. Ensuite, nous l'avons intégré à
cette plateforme tel que nous l'avons. Vous pouvez donc continuer, cliquer
et commencer, et en cliquant, vous pouvez voir
que cela nous amène directement à
ce point. OK ? Nous pouvons donc voir
en cliquant simplement et en commençant, nous sommes là, et c'est exactement ce que nous essayons
de prouver avec cela. Revenons donc à la
Figma et continuons des liens ou à rendre l'application interactive dans son ensemble Maintenant, je veux que nous reliions cette image
à la diapositive suivante. Ainsi, lorsque quelqu'un
clique sur cette image, elle passe
à l'image suivante. Nous pouvons donc sélectionner cette image, puis passer
à ce signe plus, et nous pouvons simplement cliquer, l'
ajouter et la connecter comme ça, et elle sera
liée à celle-ci. Alors, comment est-ce que ça va se passer ? Nous pouvons donc sélectionner ou emménager. Parce que vous avez différents
types d'options. Vous avez l'instant,
vous vous dissolvez, vous avez un compagnon intelligent. Je vais donc sélectionner Move in, qui
vous montrera l'aperçu
ici et vous pourrez
modifier la facilité Et les autres fonctionnalités également. Si vous souhaitez qu'il se déplace
de gauche à droite, ou de droite à gauche, vous pouvez voir l'aperçu
ou de haut en bas, ou de bas en haut, vous pouvez sélectionner comme vous le souhaitez. Donc, pour celui-ci, nous allons
aller de droite à gauche, et je pense que nous pouvons voir une mise à
jour . Et puis c'est terminé. OK, nous pouvons donc terminer sur ce point, puis nous pouvons essayer de le
tester également, afin de voir la
transition entre la première image et la dernière image. Nous pouvons donc simplement sélectionner
le premier cadre et venir ici. Et cliquez sur Démarrer. Une fois que vous avez cliqué sur Commencer, cela nous amène à ce point. Et une fois que vous avez cliqué dessus, jetez un œil à la
transition très rapide et très intéressante.
Nous allons y arriver. En résumé,
voici comment créer une interface utilisateur interactive dans Sigma et
jouer avec elle sur
votre téléphone mobile Vous pouvez donc le voir, nous avons
même
montré un aperçu de la façon dont vous pouvez le voir
en direct sur votre téléphone portable, différentes actions que
vous allez effectuer des différentes étapes, des clics
et du déroulement de l'interaction
. J'espère que cette vidéo vous plaira. Merci de votre attention, et j'ai
hâte de vous voir
au prochain cours. Au revoir, OK.
23. Partager et exporter des designs: Dans le dernier cours, nous avons
expliqué comment
créer une
interface utilisateur interactive dans Sigma Dans ce cours,
nous allons
parler de la façon d'exporter ou de partager notre design avec des
collègues amis ou toute autre personne avec
laquelle nous souhaitons
partager le document. Donc, pour partager un design en particulier, vous pouvez vous rendre jusqu' ici sur le bouton de partage en haut
à droite. Vous pouvez simplement cliquer dessus, et vous pouvez inviter la personne directement en donnant
son adresse e-mail, et vous pouvez simplement l'
inviter. Je peux
inviter quelqu'un. Prenons l'exemple du
mentorat, mais moi. Donc, une fois que vous avez saisi l'
adresse e-mail de la personne, vous pouvez également modifier l'autorisation que vous
allez lui donner Par exemple, l'autorisation pour
le moment est qu'
il ne peut que consulter, mais il peut cliquer dessus et vous pouvez également en faire un éditeur. À ce projet même. Vous pouvez donc inviter la personne et elle recevra
un e-mail l' invitant à
commenter ou à modifier ce projet
en particulier. OK, donc une fois que vous êtes connecté à votre
compte Gmail, vous pouvez voir que nous avons
reçu un e-mail de Figma une fois que vous l'avez ouvert Vous pouvez simplement continuer
et cliquer pour ouvrir. D'accord, en même
temps, tu peux enregistrer. Vous pouvez télécharger le projet, télécharger n'importe quel type ou
télécharger n'importe quelle section
du projet, n'importe quel cadre
en sélectionnant simplement le cadre, et vous pouvez revenir
à la conception, et vous pouvez descendre
ici et vous pouvez voir l'exportation Si vous cliquez sur Exporter, vous ne pouvez pas définir type de format de
fichier souhaité. Vous pouvez voir que le format par défaut est PNG, mais vous pouvez passer au format JPEG ou
SVG du PDF en fonction. Laissez-moi passer au JPEG, et je
pourrai simplement exporter. Vous pouvez voir que la
valeur par défaut est également un X, ce qui permettra de
tout maintenir en
termes de qualité. Mais si vous exportez
un projet de très grande envergure, il est préférable d'opter pour deux X, ce qui serait moins bon au niveau de la
qualité lors de l'exportation, mais lors de l'aperçu vu
de l'autre côté, peut-être du point de vue de votre
client. Donc, une fois que vous avez terminé
, vous pouvez dire « exporter le menu » et vous pouvez définir l'emplacement où
vous souhaitez l'exporter. Par exemple, dans mon cas, je souhaite l'exporter dans
le projet Still Figma, et je peux simplement
m'en assurer Et cela est maintenant exporté à
cet endroit précis. Si vous souhaitez exporter
l'ensemble des cadres, vous pouvez cliquer sur
un cadre en particulier et le sélectionner. Maintenez la touche Shift enfoncée et
sélectionnez la deuxième image. Maintenez la touche Shift enfoncée et
sélectionnez la troisième image, puis vous pouvez continuer venir ici et dire « exporter ». Maintenant, vous pouvez également définir
la valeur par défaut que vous souhaitez. O JPG, et je peux dire
d'exporter les trois couches. Et définissez le même emplacement. Par exemple, je peux créer
un autre dossier ici l'appeler output
et cliquer sur créer. Ensuite, je veux tout
exporter à cet endroit pour être sûr. Et pour le moment, il a
été exporté, alors vérifions-le dans le dossier et
voyons ce que nous avons exporté. Vous pouvez voir que nous avons exporté les trois fichiers
que nous avons. Nous pouvons donc simplement cliquer sur n'importe lequel pour avoir un aperçu de ce que
vous venez d'exporter. Ainsi s'achève ce cours sur la façon de partager
votre projet dans FGMA et même de l'
exporter sur votre ordinateur sous
différents formats J'espère que vous avez apprécié cette vidéo. Merci de votre attention,
et j'ai hâte de vous
voir au
prochain cours. Pourquoi ?
24. Conclusion du cours: Félicitations pour
avoir terminé ce cours. Vous avez atteint la fin de ce cours intensif Figma pour
débutants Tout au long de ce
parcours, vous avez acquis une
compréhension globale de Figma et de ses fonctionnalités
pour les conceptions d'interface utilisateur Vous avez appris à
naviguer dans l'interface, créer et à manipuler des éléments, créer des prototypes d'interface
et, finalement, à partager vos
conceptions avec le monde entier. Au moment de dire adieu à
ce cours, n'oubliez pas que la pratique est essentielle Plus vous utiliserez Figma, plus vous serez à l'aise et
confiante. Essayez d'explorer la communauté
Figma. J'aimerais vous mettre au
défi de consulter la section projet
de ce cours pour trouver un projet
simple dans lequel vous pourrez essayer démontrer vos
nouvelles compétences. Cordialement, je
vous remercie infiniment de votre présence parmi moi et je vous souhaite bonne chance dans vos prochains engagements.
Continuez à concevoir.