Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Sketch

Redimensionner des groupes et des symboles

Testez gratuitement nos 1334 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette séquence, vous allez examiner le comportement entre les éléments d'un groupe ou d'un symbole.
05:29

Transcription

Je vais pouvoir vous montrer que nous avons tous les éléments construits, un autre petit point fort de Sketch par rapport aux comportements des éléments lorsqu'on les redimensionne. Si on part sur un fonctionnement qui est classique, donc si je regarde par rapport à cette carte et que je commence à vouloir la redimensionner. Donc là, bien décocher le petit cadenas pour pouvoir redimensionner que sur la largeur, eh bien, on voit très rapidement que les blocs de texte commencent à sauter, et puis ici, un petit peu pareil, ça déforme la photo de profil. Tout, en fait, lorsqu'on rétrécit la taille du symbole ou du groupe s'aplatit avec la forme qui compose ce symbole. Donc, dans Sketch, ce qu'il y a de super intéressant c'est que si vous rentrez dans le symbole, et qu'on rentre maintenant sur l'avatar, on va pouvoir lui dire, voilà, si jamais le groupe dans lequel l'avatar est se redimensionne, ça va s'aplatir aussi. Il y a d'autres comportements. Par exemple là, vu qu'on veut accrocher en haut à gauche l'avatar. On va pouvoir dire, gardez-le accroché en haut. Le texte ici, pareil, on va lui dire, on veut que tu le gardes accroché en bas. Il détecte tout seul à quel bord, il doit s'accrocher suivant le bord duquel il est le plus proche. La date ici, on veut qu'elle soit accrochée aussi. Vous voyez, là on n'avait pas construit le bouton. Donc, on va pouvoir faire Commande + G et on va appeler ça btn prix, que ce soit, comme je disais, un symbole ou que ce soit un bouton, on peut leur donner un comportement à suivre. Donc, pour celui-là, je vais lui mettre un autre comportement, il doit flotter dans l'élément. On va voir un petit peu la différence par rapport à rester accroché dans l'angle. On revient ici, et maintenant, si jamais je redimensionne, vous voyez, les éléments restent vraiment en place. Pareil, si je redimensionne par l'autre côté, ça reste vraiment en place, et il y a juste le nombre de personnes maximum qui se déplacent un petit peu différemment parce qu'en fait il va bouger par rapport à un pourcentage de la taille redimensionnée, et il flotte vraiment à l'intérieur, alors que si je lui dis plutôt de rester épinglé au coin, là il va garder son positionnement par rapport à l'autre bouton, et tout du coup va se retrouver à rester. Là, c'est plus pratique, si jamais vous vous dites, là en fait j'ai envie d'avoir d'autres cartes. Si par exemple je vais réutiliser ce symbole-là pour le mettre en bas ici, 2 pixels d'espace, et puis je vais vraiment avoir envie que ça ne fasse que la moitié, et puis ici que la moitié aussi. Donc là, vous pouvez avoir deux cartes. Le problème forcément, c'est que là c'est un peu petit, donc, ça passe par-dessus le texte, ce n'est pas vraiment intéressant et judicieux d'aller jusque-là, mais le haut se comporte bien. Donc, suivant la création que vous avez, vous allez pouvoir ajuster les éléments et sans avoir peur de casser complètement tout votre design, juste en ayant malencontreusement déplacé ou changé la taille de bloc. Là, mon bloc de contenu, il faut faire attention à ce qu'il soit déverrouillé, sinon quand vous allez essayer de le sélectionner vous n'y arriverai pas Donc, vous dévérouillez bien, et quand vous êtes dessus, pareil, ici, Il y a des comportements à potentiellement mettre en place. Le fait de faire accrocher les textes de ce côté-là, ça peut être pratique. Et là, surtout sur cet élément c'est intéressant. Si je sélectionne mes deux éléments qui ne sont pas groupés, et que je commence à redimensionner, qu'est-ce qui se passe ? Les ajustements vont se faire directement dans les boutons, donc, dans ce symbole-là, vous avez ici le petit bonhomme qui est accroché dans le coin gauche et le texte qui est accroché dans le coin droit, c'est ce qui permet lorsqu'on est dans la carte-là d'avoir ce réajustement possible suivant le chiffre qu'il y a à l'intérieur pour pouvoir le réutiliser même à une taille différente. C'était la petite astuce maison, mais voilà, c'est ce qui permet de le faire. Donc là, ça va se redimensionner dans les boutons parce qu'il y a le comportement qui est mis. Pareil ici, vous voyez que c'est accroché à l'angle, et là aussi accroché à l'angle, donc ça se comporte bien dans son élément lui-même. Après, imaginons que l'on veuille mettre un prix plus long, au lieu d'avoir à tout refaire, on aura juste à agrandir le bouton, comme ça, celui-là va bien rester en place, et là on va pouvoir mettre le prix plus long. Si en plus de ça, vous mettez directement le texte que vous avez là en aligné à droite, voilà, on va le mettre là. Eh bien, si jamais je commence à taper un prix très long, par exemple, ça va faire 10 568, il faut bien sûr agrandir un peu le bloc sinon ça ne le fait pas. Voilà, si je recommence, je vais mettre 14 560 euros. Eh bien, au moins on n'a pas à tout repositionner, on a juste à agrandir ou à rétrécir le bloc, voilà, c'est tout bon. Et maintenant, si je veux que ma largeur soit réduite, je vais pouvoir me dire, « tiens, je veux que ça se comporte sur ça, sur ça et sur ça ». Là, je vais grouper, je vais mettre zone d'achat, voilà, et je vais tester. On voit que ça se comporte plutôt bien parce qu'en fait à l'intérieur on a directement cet élément qui s'est mis en Pine to corner, celui-là en Pine to corner aussi et puis celui-là qui se redimensionne normalement. Donc là, si j'ai envie en maintenant Alt de réduire la taille, je vais pouvoir facilement réajuster mes boutons comme ça, et par contre il n'y a pas de comportement entre un bouton et l'autre. Ils ne vont pas se réduire parce qu'ils se rencontrent. Ça, c'est un comportement plus complexe. Peut-être que dans les prochaines versions ça sera là, mais ça n'est pas encore présent. Mais en tous les cas, ça vous permet déjà de faire des ajustements sur votre design assez intéressant en conservant des éléments propres sans qu'ils s'écrasent ou se déforment.

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 !