Saltar al contenido

10 complementos gratuitos de Sketch para desarrolladores web

CSS Buddy

Sketch está ganando terreno entre los diseñadores y desarrolladores web. Probablemente esto se deba a que es intuitivo, fácil de aprender y viene con muchas características que facilitan mucho la creación de un prototipo de sitio web. También puede deberse a que esta aplicación es extensible, es decir, puede agregar nuevas funciones 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. Hay diversos, que van desde generadores de contenido, selector de paleta de colores, y pueden ayudarlo a mostrar medidas de capa o agregar relleno automáticamente a una capa.

Fuentes de la aplicación Sketch: el único sitio que necesita para tutoriales y obsequios de Sketch

Fuentes de la aplicación Sketch: el único sitio que necesita para tutoriales y obsequios de Sketch

No se puede negar que Sketch se ha extendido como la pólvora. Es mucho más barato que todos los de Adobe … Lee mas

1. CSS Buddy

CSS Buddy le permite agregar CSS a su capa en el espacio 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 seleccione una capa y luego seleccione Aplicar a seleccionados en el menú del complemento. Un cuadro de diálogo le pedirá que ingrese su hoja de estilo. Agregue el contenido CSS sin la clase CSS y observe cómo toma forma su capa.

CSS Buddy

2. Paleta de colores de Material Design

Si sigues la tendencia del Material Design, una cosa destacada que notarás es el uso de colores distintivos. Material Design tiene una paleta de colores impresionante. Ahora puedes llevar eso a tu espacio de trabajo con Complemento de paleta de colores de material design.

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

Paleta de colores de material design

3. Cuaderno de bocetos

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

Cuaderno de bocetos es un complemento para documentar su diseño en Sketch con facilidad. Agregará una barra lateral adicional a su espacio 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.

Cuaderno de bocetos

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, puede usar Jugador del día para agregar marcadores de posición personalizados a cualquier capa en su espacio de trabajo de Sketch desde 6 servicios de imágenes de marcadores de posición, incluidos Placehold.it, LoremPixel y Unsplash. Una vez activado, puede establecer el ancho, alto y otra información de la imagen.

Jugador del día

5. Generador de contenido

Ya tenemos un complemento para insertar imágenes de marcador de posición, ¿qué tal uno para contenido general? Generador de contenido le 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 averiguar cómo generar datos en el acto.

Para agregar los datos ficticios, simplemente seleccione una capa, luego seleccione Complemento> Generador, y elige Geo, Persona o Fotos.

Generador de contenido

6. Medida de croquis

Medida de croquis 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 se pueden mostrar mediante atajos de teclado.

Medida de croquis

7. Botón dinámico

Botón dinámico te ayuda a crear botones con almohadillas fijas fácilmente. Automáticamente ajustará el relleno según el valor que le dé, sin importar la longitud de su texto. Con el complemento instalado, un texto se puede convertir en una estructura con el acceso directo Mando+J. La cantidad de relleno necesaria se puede introducir en la capa de texto (0: 0: 0: 0) (en el grupo de botones flexibles).

Botón dinámico

8. Escala tipográfica

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

Escala tipográfica

9. Modulizador

Con Modulizador puede controlar los rellenos para botones, módulos o áreas en su diseño con el atajo de teclado Cambiar + Mando + M. Puede combinar todas sus capas, agruparlas y luego usar el acceso directo para ajustar automáticamente su relleno según el valor de relleno que necesite. Mire la demostración en video para ver esto en acción.

Modulizador

10. Hoja

¿Alguna vez ha pensado en convertir su diseño de boceto a HTML? Si es así, probablemente debería obtener Espada, un complemento de Sketch que genera automáticamente archivos HTML a partir de su diseño. Convertirá el grupo en div, el texto en py así sucesivamente.

Al usar Blade, puede decirle al complemento qué elemento DOM generar agregando un nombre especial a la capa, como [btn] o entrada[text] para que Blade sepa lo que debe hacer. Vea este vídeo de demostración para ver el interior.

Espada

Ahora lea: 12 complementos útiles para desarrolladores de WordPress