Share
Dans cette astuce, je veux vous montrer une astuce intéressante pour créer des bordures unilatérales dans Sketch et Adobe XD..
Si vous avez déjà utilisé l'une de ces applications auparavant, vous saurez que la création de bordures est en réalité assez simple. Le problème est que les bordures sont ajoutées à tout le bord extérieur d'un objet. Aucune application ne permet d'ajouter une seule bordure le long d'un seul côté..
Il est toutefois possible de réaliser ce que nous voulons en utilisant des ombres portées. Nous allons jeter un coup d'oeil.
Commençons par un simple rectangle sur notre toile, utilisant dans ce cas Adobe XD. Il a une couleur de remplissage et une bordure:
Adobe XDSi nous voulons que la bordure apparaisse uniquement le long du bord inférieur, nous pouvons supprimer le Frontière (en décochant les paramètres de bordure dans la barre latérale des propriétés) puis en sélectionnant Ombre au lieu.
Nous allons donner à l'ombre une valeur le long du Y décalage (qui repoussera l'ombre vers le bas), assurez-vous que le X offset lit 0, et enlève le B valeur (c'est le flou). Donnez à l'ombre une couleur appropriée (# 707070 dans notre cas) et assurez-vous que l'opacité est définie sur 100%.
Bordures unilatérales dans Adobe XDNous y avons une technique simple pour créer une bordure unilatérale. Les bordures de ce type constituent un moyen très efficace (mais subtil) d'ajouter de la dimension à vos conceptions d'interface utilisateur. Essayez-le sur les boîtes de dialogue ou les entrées de formulaire.
Dans Sketch, il est également possible d’ajouter plusieurs ombres, et donc plusieurs bordures unilatérales. Clique le + icône à côté des paramètres de l'ombre pour en ajouter un autre. Dans l'exemple ci-dessous, vous pouvez voir une bordure plus large le long du bord inférieur, avec une bordure plus fine au sommet:
Plusieurs bordures unilatérales dans SketchUn inconvénient de cette technique est la manière dont les angles sont rendus dans le cas où deux bordures sont adjacentes. Il y a un écart criant:
Ce n'est pas comme si CSS rendrait le coin, et ce n'est pas vraiment soluble dans Sketch à moins que vous n'utilisiez le plugin suivant:
Pour encore plus de contrôle (et pour résoudre le problème mentionné précédemment), vous pouvez utiliser un plugin Sketch appelé single-border.
Remarque: les plug-ins tiers ne sont pas encore disponibles pour Adobe XD, même si vous pouvez vous attendre à ce qu'ils jouent un rôle important dans l'évolution de XD à l'avenir.
Une fois installé, sélectionnez un objet et allez à Plugins> Single Border> Single Border. Dans la fenêtre contextuelle résultante, vous pouvez spécifier exactement à quoi vous souhaitez que votre bordure ressemble:
C'est tout; une astuce simple pour améliorer la conception de votre interface utilisateur dans Sketch et Adobe XD. Si vous connaissez d'autres astuces similaires, veuillez nous le faire savoir dans les commentaires.!
Accentsconagua