30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cómo Crear Borders en un Solo Lado en Sketch y Adobe XD

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste consejo rápido quiero mostrarte un buen truco para crear bordes en un solo lado tanto en Sketch como en Adobe XD.

Si has utilizado cualquiera de éstas aplicaciones antes, sabrás que crear bordes es realmente muy sencillo. El problema es que los bordes son añadidos a todo un objeto en sus límites-ninguna aplicación permite agregar un borde a únicamente un lado.

Sin embargo, es posible lograr lo que queremos al usar sombras paralelas. Veamos.

Mira el Video

Creando Fácilmente Bordes en un Solo Lado

Comencemos con un simple rectángulo en nuestro lienzo, en éste caso usando Adobe XD. Tiene un color de relleno, y un borde.

borders in Adobe XD
Adobe XD

Si queremos que el borde aparezca únicamente a lo largo del extremo inferior, podemos remover el Borde (al desmarcar los ajustes de borde en la barra lateral de las propiedades) luego seleccionando Sombra.

Daremos a la sombra un valor de desplazamiento en Y (que empujará la sombra hacia abajo) asegúrate de que el desplazamiento en X sea de 0, y remueve el valor de B (éste es el desenfoque). Da a la sombra un color adecuado (#707070 en nuestro caso) y asegúrate de que la opacidad sea establecida en 100%.

one-sided borders in Adobe XD
Bordes de un solo lado en Adobe XD

Ahí lo tenemos-una técnica sencilla para crear borde de un solo lado. Los bordes como éste son una manera realmente efectiva para agregar dimensión a nuestros diseños UI. Pruébalo en cuadros de diálogo o casillas de formularios.

Múltiples Bordes de un Solo Lado

En Sketch también es posible añadir múltiples sombras, y por lo tanto múltiples bordes de un solo lado. Haz click en el ícono + junto a los ajustes de sombra para agregar otra. En el ejemplo de abajo puedes ver un borde más grande a lo largo del extremo inferior, con un borde más delgado a lo largo del extremo superior:

Multiple one-sided borders in Sketch
Múltiples bordes de un solo lado en Sketch

Una desventaja de ésta técnica es la manera en que las esquinas son renderizadas en el evento de tener dos bordes adyacentes. Hay una brecha notable:

Ésto no es como CSS debería renderiza la esquina,y realmente no se soluciona de una manera perfecta en Sketch a menos que uses el siguiente plugin:

Plugin de Sketch para un Solo Borde

Para tener aún más control (y para resolver el problema mencionado previamente) puedes usar un plugin de Sketch llamado single-border (un solo borde).

Nota: plugins de terceros aún no están disponibles para Adobe XD aunque puedes esperar a que sean incluidos según el desarrollo de XD en el futuro.

Una vez instalado, selecciona un objeto y ve a Plugins > Single Border > Single Border. En la ventana emergente resultante puedes especificar exactamente como quieres que se vea tu borde:

single border sketch plugin on github

Conclusión

Eso es todo; un simple truco para mejorar tu diseño UI en Sketch y Adobe XD. Si conoces cualquier otro truco similar por favor ¡cuéntalo en los comentarios!

Aprende Más Sobre Diseño UI

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.