Domina la alineación y distribución en Sketch

En este tutorial aprenderemos cómo alinear y distribuir objetos a la perfección usando Sketch 3. Usaré algunos ejemplos básicos para explicar completamente las opciones –¡algunas de ellas te sorprenderán!

1. Alinear una sola capa a la mesa de trabajo

Quizá esta sea la técnica más fácil.

Mira la parte superior del inspector: verás unos botones relacionados a la alineación. Los seis botones localizados a la derecha (alinear a la izquierda, horizontalmente, a la derecha, hacia arriba, verticalmente y hacia abajo) son para alinear capas entre ellas, pero si sólo quieres tener un objeto seleccionado, se alineará a la mesa de trabajo de origen. Así es como funciona:

Como te mencioné, puedes usar los mismos botones cuando tienes múltiples objetos seleccionados para alinearlos entre ellos. Pero, ¿y si queremos alinear múltiples objetos a la mesa de trabajo?

2. Alinear múltiples capas a la mesa de trabajo

Para alinear múltiples objetos a la mesa de trabajo, agrúpalos en un solo grupo de capa. El grupo actuará como un solo objeto cuando uses los botones de alineación.

Sin embargo, agruparlos de esta manera no siempre se adapta a tu caso. Déjame mostrarte otro método.

Selecciona las capas que quieres alinear, mantén presionada la tecla Alt para hacer que los iconos de alineación en el Inspector cambien de apariencia. ¡Ya estás alineando las capas a la mesa de trabajo! Ten en cuenta que las capas seleccionadas deben estar dentro de la mesa de trabajo, si no, esta opción no estará disponible.

En el siguiente ejemplo tengo tres capas diferentes seleccionadas.

Esto también funciona con grupos de capa; esto significa que puedes seleccionar múltiples grupos de capa, mantén presionada la tecla Alt y alinéalas a la mesa de trabajo.

3. Alinear capas específicas

Otro escenario: quiero que todo se alinee a un solo objeto. Primero debes entender que, por defecto, Sketch siempre alinea a la capa más alejada de todas las seleccionadas. Esta capa se conoce como "el objeto clave".

Por lo tanto, para alinear todos los objetos seleccionados a la parte superior, el objeto que se encuentre en la posición superior más alejada será el objeto clave. Aquí hay un ejemplo donde alineo tres objetos a la posición superior derecha (el cuadrado rojo es nuestro "objeto clave"):

Sería bueno que pudiéramos cambiar el objeto clave para que sea el que queremos, ¿no? Este es el truco: bloquea la capa que quieres que sea el objeto clave, luego selecciona todas las capas otra vez. (Solo puedes seleccionar capas bloqueadas mediante la lista de capas).

En el siguiente ejemplo, el cuadrado azul ya está bloqueado, así que actuará como nuestro nuevo objeto clave. Ahora alineemos los objetos a la parte superior derecha otra vez:

Descubrí este útil truco gracias a SketchTips. Y puedes usar el plugin Align To hecho por Lucien Lee para lograr los mismos resultados.

4. Alinear puntos de vectores

Tip: también puedes usar los botones de alineación para alinear múltiples puntos de vector cuando estás en el Edit Mode. Selecciona el objeto de vector, haz doble clic para cambiar al Edit mode (también puedes usar el icono de Edit de la barra de tareas principal) y selecciona todos los puntos de vectores que quieras alinear.

5. Distribuir capas

Si miramos la parte superior del panel de Inspector, te darás cuenta de que no he mencionado los dos iconos de alineación a la izquierda. Esos botones son para distribuir objetos de manera horizontal y vertical. También podemos distribuirlos de manera uniforme, ¡lo cual es muy útil! Digamos que tenemos unas cuantas formas seleccionadas y nos gustaría distribuirlas de manera horizontal. Usa el botón Distribute Horizontally o ve a Arrange > Distribute > Horizontally.

Las capas que están más a la izquierda y más a la derecha se quedarán donde están, mientras que las capas del medio serán espaciadas de manera uniforme entre ellas. Puedes hacer lo mismo con los ejes verticales usando la opción Distribute Vertically.

6. Distribuir capas con un espaciado fijo

Ok, pero ¿y si quiero que esas capas estén a 20 px entre ellas? Distribute Horizontally/Vertically no servirá para esto.

En este caso podemos usar la herramienta Make Grid (Arrange > Make Grid) para definir el espaciado horizontal y vertical entre los objetos. Puede ser un poco difícil de entender al principio, así que deja que te muestre otro ejemplo animado:

Aquí quería distribuir cuatro capas diferentes con un espaciado de 20 px entre ellas. Hice una cuadrícula de una sola fila (para alinear todas las capas de manera horizontal) y cuatro columnas (una columna por capa). Luego ajusté el margen de las columnas a 20 px para obtener el espaciado deseado. Si quiero distribuir las capas de manera vertical, tengo que hacer una cuadrícula de cuatro líneas (con un margen de 20px) y una columna.

Si no te sientes cómodo usando este método, puedes intentar con el plugin SketchDistributor. Te permite distribuir objetos seleccionados con un espaciado específico.

Eso es todo por ahora

Espero que hayas disfrutado de este tutorial. ¡Dominar las herramientas de alineación y distribución en Sketch te ahorrará mucho tiempo!