Paddy: añade relleno y espaciado automatizados en Sketch

En este consejo breve, te enseñaré una forma realmente fácil de añadir relleno y espaciado a tus diseños en Sketch.

Mira el screencast

Un problema común en el diseño de UI (interfaz de usuario) en Sketch

Déjame empezar mostrándote un problema que quizá hayas enfrentado muchas veces al trabajar en Sketch. Digamos que quieres crear un simple botón; comenzarías con una forma de rectángulo en la mesa de trabajo, le darías un color apropiado, y luego le añadirías texto en otra capa. Finalmente, alinearías los objetos, los agruparías, y habrías terminado

Ahora imaginemos que quieres crear otro botón; similar, pero con un texto diferente. Es probable que dupliques el que ya se ha hecho, y que después cambies el texto.

Suponiendo que deseas mantener el mismo relleno lateral en cada uno, entonces modificarías los anchos de los rectángulos dependiendo de cómo quieres que aparezcan. Un proceso manual:

Esto quizá parezca una tarea sencilla, pero si tienes que hacer esto una y otra vez, en realidad puede requerir mucho tiempo.

La solución: Paddy

Permíteme presentarte a Paddy, un plugin para Sketch que te ahorrará mucho tiempo.

Ajustando el relleno

Empieza instalando el plugin, después, con algún texto seleccionado en tu mesa de trabajo ve a Plugins > Paddy > Enter padding for selection (Plugins > Paddy > Introducir relleno para la selección). En el cuadro de diálogo que aparece, puedes ajustar el relleno como lo harías en CSS. Por ejemplo, introduciendo un valor de 10 20 te dará 10px de relleno en la parte superior e inferior, con 20px a la derecha y a la izquierda.

Paddy creará automáticamente un rectángulo de fondo, del tamaño que desees. Pero aquí está la parte genial: cuando cambies el texto, el rectángulo de fondo conservará las medidas del relleno que estableciste anteriormente.

Editar el nombre de la capa de Background (10 20) a, digamos, Background (20 20) cambiará el relleno para reflejar los nuevos valores.

Estableciendo el espaciado

Esto también funciona cuando se añade la separación entre los objetos. Imagina que tenemos dos botones y queremos añadir 50px de espacio entre ellos. Seleccionamos ambos botones, después vamos a Plugins > Paddy > Spacing for selection (Plugins > Paddy > Espaciado para la selección) y luego podemos introducir el valor que deseamos. Usaríamos unidades v para definir la separación vertical, o unidades h para el horizontal.

En este caso hemos usado 50v para separar nuestros dos botones exactamente a 50px de distancia, de manera vertical.

Como puedes ver, los grupos de botones han sido envueltos en otro grupo, que mantiene el valor de espaciado. Si añadiéramos otro botón dentro de este grupo, también heredaría el mismo espaciado. Y si modificáramos los valores de relleno, o la longitud del texto dentro de uno de estos botones, todo sería recalculado y reposicionado por nosotros.

Conclusión

Paddy es un excelente plugin; te recomiendo que lo descargues y les eches un vistazo a algunas de las otras cosas que puede hacer. ¡Definitivamente te ahorrará tiempo!