Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Sketch

Créer et utiliser les symboles

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez découvrir comment créer des symboles dans Sketch. Fabrice Liut vous explique comment les utiliser à travers quelques cas concrets.
07:23

Transcription

Nous voilà enfin arrivés dans la partie liée aux symboles et aux styles dont j'avais hâte de vous parler, car c'est vraiment pour moi l'une des meilleures fonctionnalités de Sketch et celle qui change la vie de tous les jours. Si on prend par exemple ce bloc que l'on va devoir reproduire et modifier pour pouvoir apporter des informations un petit peu différent à l'intérieur pour que ça ait vraiment l'aspect d'une application fonctionnelle et pas juste une copie avec la même photo de profil tout Paris. Donc, si on est dans un processus classique, ce qu'on va faire, c'est qu'on va se retrouver à faire un petit groupe de ce bloc-là, et puis on va faire une duplication avec les touches alt + déplacer. Avec donc deux pixels d'écart entre chaque bloc, d'ailleurs on voit que ça tombe un petit peut bas, donc on va pouvoir le remonter, et on se rend compte que Expériences en ville est bien trop bas. On va remonter ça aussi, voilà. Et puis, on va pouvoir monter tout notre bloc, pour aligner et que ça soit cohérent. Ce bloc-là, on va pouvoir le remonter aussi, histoire d'avoir aussi quelque chose de cohérent qui respire. Voilà, là, on a un beau bloc qui respire. Donc, nos blocs ont été dupliqués, et puis on va se dire, maintenant il va falloir que je modifie donc l'image ici, et puis il va falloir que je modifie l'image ici, et au bout d'un moment on va se rendre compte, comme vous l'avez vu certainement depuis un petit moment que j'ai oublié de mettre l'icône-là. Alors, qu'est-ce qui se passe ? Maintenant que ça a été dupliqué, imaginons que j'ai déjà changé l'image à l'intérieur, et bien, le problème est que je vais devoir mettre mon icône ici et la replacer à chaque fois, et cela, ça va vraiment être une perte de temps dingue. Et puis même si l'icône ne plaît pas au client ou à la personne avec laquelle vous travaillez, vous allez devoir la modifier dans chacune des occurrences, alors que Sketch justement prévoit ça. Je vais pouvoir supprimer ces éléments. Sketch prévoit de pouvoir transformer tout notre bloc, tout notre groupe en un symbole. Je vais donc appeler notre groupe ici « Carte » et je vais cliquer ici sur Symboles, donc il s'appellera Carte. Et là, maintenant, j'ai donc un symbole. Si je double clique dessus, je rentre directement mon symbole qui rejoint les autres symboles dans lesquels on était déjà rentré tout à l'heure et depuis le début de mon document exemple. Maintenant, dans ce symbole, ce qui va pouvoir se passer, c'est que je vais pouvoir, si je reviens en arrière dupliquer mon symbole, toujours les 2 pixels d'écart, et si jamais je modifie quelque chose dans mon symbole, ça va le modifier pour les deux directement, un gain de temps mémorable. Vous pouvez voir au niveau des calques ici ce qui est symbole et ce qui ne l'est pas. Ce qui est un groupe est représenté par un petit dossier. Ce qui est un calque est représenté soit par des formes vectorielles, soit des textes, soit des icônes de formes, et le symbole lui est représenté par ces deux petites flèches qui vont l'une vers l'autre. Si maintenant je vais par exemple récupérer mon petit bonhomme qui est juste là, Commande + C, et je vais rentrer dans mon symbole. Je vais donc maintenant entrer plus en détail vers mon huit, je vais faire un petit coller ici, je vais aligner, voilà, je vais faire un petit Commande + G pour les grouper, et maintenant je vais aligner carrément dans mon bloc. Là maintenant, je vais ajouter mon petit bonhomme, et la magie opère, je reviens en arrière et nous avons le petit bonhomme rajouté dans les deux parties. Et c'est là où c'est très intéressant. Si jamais vous modifiez le nom Paris en Louvre en faisant une faute avec un s, et je vous montrerai plus tard l'utilité de cette faute, ça modifie aussi dans les deux. Et c'est là où vous allez me dire, mais ma deuxième carte, je ne veux pas qu'il y ait la même image, je ne veux pas qu'il y ait le même nom, je ne veux pas qu'il y ait la même photo d'avatar, mais par contre, je veux bien qu'il y ait toujours le même petit bonhomme, et donc il y a des points de cohérence et des points de non-cohérence entre les différents symboles. C'est là où c'est intéressant, c'est que quand vous êtes sur un symbole, dans votre panneau, ici, vous pouvez voir tous les paramètres qui sont directement modifiables pour chaque occurrence. Donc là, par exemple, le nombre de places disponibles ne sera que de 6. Ensuite, la date ne sera pas la même. On sera donc le 10-12-2016. La ville ne sera pas Louvre, mais sera Montpellier. Le prix va également être différent. Il sera de... 780 euros, et qu'est-ce qui va manquer ? Il va nous manquer à changer la photo d'avatar et à changer les bitmaps, et pour ce faire, on va faire comme on a fait juste au début. On retourne dans unsplash. On va aller récupérer la photo d'avatar de Stefan, juste ici. Donc, copier l'image, ensuite, je vais revenir là. On va essayer. Il suffit de la glisser dessus sans aller forcément la chercher sur votre ordinateur, et pareil pour la photo de fond, je vais aller me trouver quelque chose de sympa qui correspondrait à Montpellier. Donc, on va aller chercher une ville, et puis on va trouver quelque chose d'assez sympathique. Forcément, on est sur des villes américaines, vu que ce projet est surtout américain, eh bien, on va récupérer celle-là d'une personne qui se balade en ville. On a notre image qui est juste ici. On va cliquer dessus. On maintient le bouton clic gauche de la souris enfoncé et on va directement en Sketch , et là avec le petit plus, on va la glisser dedans, elle va se charger, et voilà la modification. Et là maintenant, nous avons donc une nouvelle occurrence de notre symbole. Mais si jamais par exemple je choisis dans le symbole général de changer la couleur de cet élément-là, parce que maintenant je veux basculer sur cette charte-là, que je me suis rendu compte que ce n'était pas centré correctement, je peux recentrer correctement tout. Voilà, on va être cohérent partout. Maintenant que j'ai quelque chose de propre, je vais pouvoir revenir en arrière, et ça a été directement ajusté avec des valeurs qui sont différentes. Voilà, tout le pouvoir des différents symboles, et vous remarquerez aussi, pour l'expérience, que je peux faire la même chose, car je peux supprimer ce bloc-là, définir que mon groupe ici est un symbole qui sera menu haut, et maintenant je vais venir faire Commande + C, Commande + V, vous pouvez voir qu'il y a la possibilité de modifier juste le nom, donc je vais modifier, comme je l'ai mis au-dessus, je vais l'appeler maintenant Découverte. Ça sera un peu plus poétique avec toujours les mêmes icônes, et si jamais j'ajoute des choses dans les symboles, ça sera ajusté, mais par contre j'aurai toujours une différence. Voilà un petit peu le pouvoir des symboles, et je vais vous montrer ensuite dans les autres vidéos un peu les bonnes pratiques par rapport à ces symboles-là.

L'essentiel de Sketch

Concevez des interfaces utilisateur applicatives pour les mobiles et pour le web avec Sketch. Créez des éléments d'interface, du simple bouton au pictogramme plus complexe, etc.

1h53 (25 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !