Share
Dans cette astuce, je vais vous montrer un moyen très simple d'ajouter du rembourrage et de l'espacement à vos créations dans Sketch..
Laissez-moi commencer par vous montrer un problème que vous avez peut-être rencontré à de nombreuses reprises lorsque vous travailliez dans Sketch. Supposons que vous souhaitiez créer un simple bouton. vous commenceriez avec un rectangle sur la planche graphique, lui donneriez une couleur appropriée, puis vous lui ajouteriez du texte sur un autre calque. Enfin, vous aligneriez les objets, les grouperiez ensemble et vous auriez terminé.
Imaginons maintenant que vous souhaitiez créer un autre bouton. similaire, mais avec un texte différent. Vous voudriez probablement dupliquer celui déjà créé, puis changer le texte.
En supposant que vous souhaitiez conserver le même rembourrage latéral sur chacun d'entre eux, vous modifieriez alors la largeur des rectangles en fonction de l'apparence souhaitée. Un processus manuel:
Cela peut sembler une tâche simple, mais si vous devez le faire encore et encore, cela peut effectivement prendre beaucoup de temps..
Alors laissez-moi vous présenter Paddy; un plugin pour Sketch qui vous fera gagner du temps.
Commencez par installer le plugin, puis, avec du texte sélectionné sur votre planche graphique, allez à Plugins> Paddy> Entrez un rembourrage pour la sélection. Dans la boîte de dialogue qui apparaît, vous pouvez définir le remplissage comme vous le feriez en CSS. Par exemple, entrer une valeur de 10 20 vous donnera 10px de rembourrage en haut et en bas, avec 20px à droite et à gauche.
Paddy créera alors automatiquement un rectangle de fond, dimensionné exactement comme vous le souhaitiez. Mais voici la partie intéressante: lorsque vous modifiez le texte, le rectangle d'arrière-plan conserve les mesures de remplissage que vous avez définies précédemment..
Modification du nom de la couche à partir de Fond d'écran (10 20) dire, Contexte (20 20) changera le rembourrage pour refléter les nouvelles valeurs.
Cela fonctionne également lors de l'ajout d'espacement entre les objets. Imaginez que nous ayons deux boutons et que nous voulions ajouter 50px d’espacement entre eux. Nous sélectionnons les deux boutons, puis allons à Plugins> Paddy> Espacement pour la sélection et nous pouvons alors entrer la valeur que nous voulons. Nous utiliserions v unités pour définir l'espacement vertical, ou h unités pour horizontal.
Dans ce cas, nous avons utilisé 50v afin d'espacer nos deux boutons exactement 50px, verticalement.
Comme vous pouvez le constater, les groupes de boutons ont été regroupés dans un autre groupe contenant la valeur d'espacement. Si nous devions ajouter un autre bouton dans ce groupe, il hériterait également du même espacement. Et si nous modifions les valeurs de remplissage ou la longueur du texte dans l'un de ces boutons, le tout serait recalculé et repositionné pour nous..
Paddy est un excellent plugin. Je vous recommande de le télécharger et de jeter un coup d'œil sur certaines des choses qu'il peut faire. Cela va certainement vous faire gagner du temps!
Accentsconagua