10 complementos gratuitos de Sketch para desarrolladores web

Sketch está recibiendo mucha tracción entre los diseñadores y desarrolladores web. Esto es probablemente porque es intuitivo, facil de aprender y viene con muchas características que facilitan mucho la creación de un prototipo de sitio web. También puede ser porque esta aplicación es extensible, es decir, puede agregar nuevas características a la aplicación fácilmente con la ayuda de complementos..

Aquí hay 10 complementos que pueden ayudarlo a aumentar su productividad cuando trabaja con Sketch. Existen diversos, que van desde generadores de contenido, selector de paleta de colores, y pueden ayudarlo a mostrar las mediciones de capa o agregar automáticamente relleno a una capa.

1. CSS Buddy

CSS Buddy le permite agregar el CSS a su capa en el área de trabajo de Sketch. Básicamente, puede aplicar ancho, alto, opacidad, sombra de cuadro, borde y fondo a la capa usando CSS.

Con este complemento instalado, simplemente selecciona una capa y luego selecciona Aplicar a Seleccionado desde el menú del plugin. Un diálogo le pedirá que ingrese su hoja de estilo. Agregue el contenido CSS sin la clase CSS y vea cómo toma forma su capa.

2. Diseño de la paleta de colores del material

Si sigues la tendencia del diseño de materiales, una cosa prominente que notarás es el uso de colores distintivos. Material Design tiene una impresionante paleta de colores. Ahora puedes traer eso a tu espacio de trabajo con Material de diseño de la paleta de colores Plugin.

Este complemento generará paletas de colores en segundos sin que tenga que cerrar su área de trabajo. Elija Tono, Valor o Muestra para generar una paleta de colores que sea adecuada para su proyecto.

3. Cuaderno de dibujo

A veces necesitamos mostrar lo que hacemos en un comentario o mediante documentación. Si está trabajando en proyectos con otros diseñadores o con la participación de un cliente, esto también es necesario para que pueda asegurarse de que el resultado sea el objetivo que todos buscaban..

Cuaderno de dibujo es un plugin para documentar tu diseño en Sketch con facilidad. Agregará una barra lateral adicional a su área de trabajo, que contiene los comentarios que agrega a cualquier elemento de su diseño. Puede reordenar comentarios, realinear, eliminar y alternar la visibilidad de los comentarios.

4. Jugador de día

Antes de usar imágenes reales en un diseño, a menudo usamos imágenes de marcador de posición para acelerar el proceso de diseño. Para Sketch, puedes usar Jugador de día para agregar marcadores de posición personalizados a cualquier capa en su área de trabajo de Sketch desde 6 servicios de imagen de marcador de posición, incluidos Placehold.it, LoremPixel y Unsplash. Una vez activada, puede configurar el ancho, la altura y otra información de la imagen..

5. Generador de contenido

Ya tenemos un complemento para insertar imágenes de marcador de posición, ¿qué tal una para contenido general?? Generador de contenido lo ayuda a agregar datos ficticios, como avatares, nombres, datos de geolocalización y más. Funciona muy bien para diseños de maquetas y para reducir los dolores de cabeza al tratar de descubrir cómo generar datos en el momento.

Para agregar los datos ficticios, simplemente seleccione una capa, luego seleccione Plugin> Generador, y elige Geo, Persona o Las fotos.

6. Sketch Measure

Medida del bosquejo Es una herramienta de medición para Sketch. Mide la longitud o el tamaño de una capa (o capas) en su diseño. También obtiene el relleno y el margen de una capa, así como la distancia entre dos capas. Sketch Measure también puede imprimir las propiedades de la capa, como el color, el borde y la opacidad. Todas las medidas pueden ser traídas a través de atajos de teclado.

7. Botón dinámico

Botón dinámico Te ayuda a crear botones con rellenos fijos fácilmente. Ajustará automáticamente el relleno según el valor que proporcione, sin importar la longitud del texto. Con el complemento instalado, un texto se puede convertir en una estructura con el acceso directo Comando + J. La cantidad de relleno requerido se puede insertar en la capa de texto (0: 0: 0: 0) (bajo el grupo de botones flexibles).

8. Escala tipográfica

Escala tipográfica es un complemento para convertir la capa de texto seleccionada en escala tipográfica. Para usar este complemento, simplemente seleccione la capa de texto (única o múltiple), o la capa mixta que contiene al menos una capa de texto, luego seleccione Plugin> Escala tipográfica y ajustar el valor en el diálogo. El resultado es un conjunto de texto escalado que sigue las reglas de la escala tipográfica..

9. Modulizador

Con Modulizador puede controlar los rellenos para el botón, el módulo o las áreas de su diseño con el método abreviado de teclado Shift + Comando + M. Puede combinar todas sus capas, agruparlas y luego usar el método abreviado para ajustar automáticamente el relleno según el valor de relleno que necesita . Mira el video de demostración para ver esto en acción..

10. cuchilla

¿Alguna vez has pensado en convertir tu diseño de boceto a HTML? Si es así, probablemente debería obtener Espada, un complemento de Sketch que genera automáticamente archivos HTML desde su diseño. Se convertirá grupo en div, texto en pag y así.

Al usar Blade, puede decirle al complemento qué elemento DOM generar al agregar un nombre especial a la capa, como [btn] o ingresar [texto] para que Blade sepa lo que debe hacer. Echa un vistazo a esta demostración de vídeo para ver el interior..

Ahora lea: 12 complementos útiles para desarrolladores de WordPress