Table des matières
ArticlesA lire
Créez de meilleurs symboles réutilisables dans Sketch en utilisant une mise en page et un redimensionnement intelligents
ketch est un outil largement utilisé pour les conceptions d’interface utilisateur. Il a mis en œuvre le conception atomique méthodologie et a rendu le flux de travail de conception d’interface utilisateur beaucoup plus efficace. Vous pouvez créer un symbole dans Sketch et l’utiliser partout dans votre conception, ce qui vous donne un grand avantage pour garder «une seule source de vérité. «
Cependant, il est difficile de créer un symbole légèrement complexe avant que Sketch n’introduise les fonctionnalités Smart Layout et Resizing. Tous les utilisateurs de Sketch ont constaté que le contenu d’un symbole n’était pas étiré comme prévu et ont dû le «détacher». Dans cet article, je veux partager mon expérience de la création de meilleurs symboles pour gagner en flexibilité et réduire le détachement.
La mise en page intelligente est une fonctionnalité introduite dans Sketch 58. Vous pouvez sélectionner la mise en page lorsque vous créez un symbole. La mise en page intelligente vous donne plus de possibilité de personnaliser les symboles pour différents scénarios.
Prenons un menu de navigation par exemple. Tout d’abord, j’ai créé un simple symbole appelé «élément de menu», puis je l’ai utilisé dans un autre symbole «menu»:
Pour le symbole «Menu», j’ai appliqué la «disposition de gauche à droite» horizontale:
Lorsque j’utilise le symbole «Menu» dans la conception de la page, je peux facilement y cacher un élément et les éléments suivants seront automatiquement «tirés»:
Il arrive souvent que différentes pages d’un même site Web comportent des éléments de navigation différents. Avec Smart Layout, vous pouvez concevoir un menu avec tous les éléments possibles et masquer ceux inutiles dans différents scénarios.
Pour en savoir plus sur Smart Layout, vous pouvez visiter cette page sur le site Web de Sketch.
Le redimensionnement est une fonction permettant de contrôler le positionnement et l’étirement de l’élément lorsque son parent (un symbole ou un groupe) est redimensionné. Il existe deux options: « Pin to Edge » et « Fix Size »:
Avec ces deux options, vous pouvez faire en sorte qu’un élément reste dans sa position ou conserve sa taille élément parent être étiré.
Supposons que vous ayez un simple bouton avec une icône. L’icône sera redimensionnée en fonction du bouton si vous ne configurez pas le redimensionnement:
Pour résoudre ce problème, nous pouvons faire la broche de l’icône en haut à gauche et conserver sa taille:
Voici le résultat:
La mise en page intelligente et le redimensionnement peuvent vous aider à créer des composants puissants et configurables et à alléger considérablement la maintenance d’un système de conception.
Essayons maintenant de créer un composant de notification qui pourrait contenir
- une icône d’indicateur, un bouton « Fermer » ou un lien « Ignorer ».
- texte sur plusieurs lignes.
Comme vous pouvez le voir sur cette image:
Oui, nous pouvons le faire avec un seul symbole!
Tout d’abord, nous devons créer des symboles simples pour le bouton « info », le bouton « fermer » et le lien « Ignorer » afin de pouvoir les masquer si nécessaire, car nous ne pouvons masquer que les symboles dans Sketch.
Après cela, nous pouvons configurer le redimensionnement pour chaque élément:
- Bouton «info»: Largeur fixe, hauteur fixe, épingle en haut à gauche.
- Bouton « Fermer » et lien « Ignorer »: Largeur fixe, hauteur fixe, épingle en haut à droite
La partie du contenu du texte est un peu délicate. Vous devez d’abord sélectionner la « Taille fixe » dans la section Alignement:
Ensuite, sous Redimensionnement, désélectionnez tous les «Fix Size» et fixez-le aux quatre bords:
La configuration entière est comme ci-dessous:
Ensuite, vous pouvez utiliser le symbole dans la conception de la page, masquer les éléments lorsque vous le souhaitez ou le redimensionner pour créer une boîte de dialogue sur plusieurs lignes:
