Paddy ... una solución realmente simple a un problema que todos tenemos al diseñar botones ...

Todos hacemos botones. Están en todas partes en nuestro sitio y diseños de aplicaciones. En Sketch, realmente no hay una manera fácil de manejar los botones. Una vez que haya hecho uno, es bueno hasta que tenga que hacer el siguiente, luego debe cambiar el tamaño de ese rectángulo para que se ajuste a su nueva etiqueta, verificando constantemente las distancias para asegurarse de que todo esté correctamente espaciado.

Crear un botón dinámico en Sketch with Paddy es fácil. Lo guiaré a través de la configuración de su botón, descifrando los valores de relleno y usando símbolos para ver el valor real de este complemento. También crearemos un botón con un icono. Antes de comenzar, asegúrese de descargar el complemento aquí: https://github.com/DWilliames/paddy-sketch-plugin o use SketchRunner para instalarlo.

Vamos a utilizar la función de relleno de capa para estos botones. Los tutoriales sobre las otras características vendrán más adelante.

PASO 01: Cree su botón y asígnele una etiqueta simple.

nada lujoso aquí ... todavía ...

PASO 02: Calcula tus valores de relleno.

Una vez que su etiqueta esté donde la desea, simplemente seleccione el texto y mantenga presionada la tecla de opción mientras coloca el cursor del mouse dentro del botón. Sketch le mostrará la distancia de la etiqueta desde los bordes de su botón.

la distancia se calcula desde los bordes del botón hasta el cuadro delimitador del texto.

PASO 03: Agrupe los elementos de su botón.

Seleccione su texto y botón y haga clic en el botón Agrupar en la barra de herramientas o use el acceso directo, CMD + G.

PASO 04: Una vez agrupados, podemos usar Paddy.

Primero, seleccione su botón agrupado. Luego seleccione Paddy en el menú de complementos o use SketchRunner. Asegúrese de seleccionar "Relleno para la selección"

PASO 05: Agregue los valores de relleno.

El cuadro de diálogo para Paddy es bastante simple. Todo lo que necesita hacer es ingresar los valores que encontramos anteriormente, 12 16 12 16. Paddy establece estos valores en este orden, arriba a la derecha, abajo a la izquierda. Esto es como CSS. Paddy también te permite atajar estos valores como CSS. Por ejemplo, puede usar un valor único como 20, que aplicaría 20 a los 4 lados. También puede usar dos valores como 20 40, que se aplicarán 20 a la parte superior e inferior, y 40 a la derecha e izquierda. Para este ejemplo, vamos a usar 12 16 12 16. (también podríamos usar 12 16) Una vez que haya hecho eso, simplemente haga clic en Aceptar.

PASO 06: Paddy Magic.

Después de hacer eso, su botón no se verá muy diferente. Pero. ahora podemos hacer algo de magia Paddy! Haga clic dentro del botón del texto y cámbielo a algo largo como "Los buenos diseñadores quieren que se demuestre que están equivocados, los malos diseñadores esperan que se demuestre que tienen razón". (Esta es una buena cita de Andy Budd) Una vez que haya hecho eso, solo necesita hacer clic fuera de la etiqueta de texto y ¡voilà !, su botón cambiará de tamaño al relleno que configuramos.

Si observa los detalles del botón en el panel de capas, verá que la capa del botón tiene un [12 16] adjunto. Esto es todo lo que hace el complemento, agrega esos valores a la capa más inferior del grupo, en realidad puede cambiar los valores allí y habrá aplicado el complemento como si usara el cuadro de diálogo Paddy.

PASO 07: ¡Paddy también funciona con símbolos!

Facilita cambiar las etiquetas de los botones. Hagamos un intento. Primero, cree un símbolo fuera de nuestro botón haciendo clic en el botón "Crear símbolo" (no hay acceso directo a menos que tenga algo personalizado). Aparecerá el cuadro de diálogo Crear nuevo símbolo. Asignemos un nombre simple a este símbolo, "botón de texto" y haga clic en Aceptar.

PASO 08: Anula ese símbolo.

Ahora que nuestro botón es un símbolo, es muy fácil cambiar la etiqueta y permitir que Paddy cambie el tamaño de nuestro botón. Seleccione su nuevo símbolo de botón. Uno a la derecha aparecerá el panel Anulaciones. Escriba su nueva etiqueta y presione enter / return. ¡Eso es! su botón está recién Paddy’ed.

PASO 09: Hagamos un botón un poco más elegante y agreguemos un ícono.

Crea un nuevo botón con tu ícono. Como hicimos en el Paso 2, vamos a descubrir el relleno que necesitamos establecer. Sin embargo, en lugar de medir la distancia desde el texto, vamos a seleccionar tanto el icono como la etiqueta y medir desde allí. Para hacer esto, seleccione el icono y la etiqueta, manteniendo presionada la tecla de opción mientras coloca el cursor del mouse dentro del botón para ver las medidas.

PASO 10: Repita

El resto es simple. Agrupe los tres elementos tal como lo hicimos en el paso 3. Ejecute Paddy y use los valores que encontramos en el paso 9, 8 16 7 8. Saltemos adelante y conviértalo en un símbolo y llámelo "botón de icono"

Ahora, hay una cosa especial que debe hacer para asegurarse de que nuestro ícono no se estire cuando cambiemos nuestra etiqueta. Haga clic en la página Símbolos en el panel Páginas en el lado izquierdo de la interfaz de Sketch. Luego, haga clic en el icono para que se seleccione. En el lado derecho de la interfaz de Sketch verá el panel Restricciones. Aquí podemos decirle al icono cómo comportarse cuando se cambia el tamaño del botón. Asegúrese de seleccionar "Fix Width" y "Fix Height". También seleccione los controles superior e izquierdo, indicando al icono que permanezca anclado en el lado superior e izquierdo del botón.

PASO 11: establezca algunas restricciones

Con las restricciones del icono establecidas, ahora podemos cambiar nuestra etiqueta. Regrese a la instancia de símbolo de nuestro botón y use el panel de anulaciones para cambiar la etiqueta.

Si desea el ícono en el lado derecho, puede hacer lo mismo que se mencionó anteriormente, simplemente voltee donde están la etiqueta y el ícono.

Conclusión: ¡Eso es! Ahora puedes hacer botones que siempre mantendrán su forma. ¡Piense en todo el tiempo que ahorrará al no tener que cambiar el tamaño de los botones todo el día!

Si amas este complemento, ¿por qué no gritarle a David Williames (el creador de Paddy) un café via️ a través de PayPal para compartir el amor! Definitivamente lo ayudará a poder soportar más este complemento. También puedes seguirlo en el twitter @davidwilliames

** Nota ** Desde que publiqué esto, David ha dicho que se ha pedido mucho el soporte de símbolos anidados y que está trabajando en ello. ¡Manténganse al tanto!

Este es el primero de una serie de artículos que pronto llegará a sketchtools.co. Todavía no hay nada allí, pero sígueme en Twitter o aquí en Medium para saber cuándo hay.