10 complementos de boceto gratuitos para desarrolladores web

bosquejo Se ha vuelto muy popular entre los diseñadores y desarrolladores web, esto puede deberse a que es Intuitivo y fácil de aprender. Y viene con muchas características que facilitan la creación de prototipos de sitios web. También es posible porque la aplicación es extensible, es decir. puede agregar fácilmente nuevas funciones a la aplicación mediante complementos.

Aquí hay 10 complementos para ayudarlo a ser más productivo al usar Sketch. Los generadores de contenido, los selectores de paletas y más pueden ayudarlo a mostrar las medidas de las capas o agregar rellenos automáticamente a las capas.

1 amigos de css

amigos de css Le permite agregar CSS a las capas en el espacio de trabajo de Sketch. En general, puede aplicar ancho, alto, opacidad, sombra, borde y fondo a las capas mediante CSS.

Después de instalar este complemento, simplemente seleccione una capa y seleccione aplicar a seleccionado desde el menú de complementos. Un cuadro de diálogo le pedirá que ingrese una hoja de estilo. Agregue contenido CSS sin clases CSS y observe cómo se forman sus capas.

2. paleta de diseño de materiales

Si sigues la tendencia del diseño de materiales, una cosa que notarás es el uso de colores únicos. Material Design tiene una gran paleta de colores. Ahora puedes llevarla a tu espacio de trabajo Complemento para la paleta de diseño de materiales.

El complemento generará paletas en segundos sin cerrar el espacio de trabajo. Elija entre Hue, Value o Swatch para generar una paleta de colores adecuada para su proyecto.

3. bloc de dibujo

A veces tenemos que mostrar lo que hacemos en comentarios o documentación. También es necesario si trabajas en proyectos con otros diseñadores o clientes para asegurarte de que el resultado es el objetivo de todos.

bloc de dibujo es un complemento para documentar fácilmente sus diseños en Sketch. Agregará una barra lateral adicional a su espacio de trabajo con notas para cualquier elemento que agregue a su diseño. Puede reorganizar los comentarios, reorganizar, eliminar y cambiar la visibilidad de los comentarios.

4. Jugador diario

A menudo usamos imágenes alternativas para acelerar el proceso de diseño antes de usar imágenes reales en nuestros diseños. Para Sketch, puede usar Jugador diario Agregue marcadores de posición personalizados a cada capa en su espacio de trabajo de Sketch desde 6 servicios de imágenes, incluidos Placehold.it, LoremPixel y Unsplash. Una vez activado, puede establecer el ancho, alto y otra información de la imagen.

5. generador de contenido

Ya tenemos un complemento para insertar imágenes para un lugar, ¿qué tal un complemento para contenido general? generador de contenido Le ayuda a agregar datos falsos como avatares, nombres, datos de geolocalización y más. Excelente para diseñar modelos y reducir el dolor de cabeza de tratar de descubrir cómo generar datos en el campo.

Para agregar datos ficticios, simplemente seleccione una capa, luego seleccione Complementos> Generadoresy seleccione geografía, personas o Foto.

6. Medición de croquis

Medición de croquis es una herramienta de medición para Sketch. Mide la longitud o el tamaño de una (o más) capas en un diseño. También puede obtener los campos de relleno y margen y la distancia entre dos capas. Sketch Measure también puede imprimir propiedades de capa como el color, el borde y la opacidad. Todas las medidas se pueden recuperar mediante atajos de teclado.

7. Botón dinámico

Botón dinámico Te ayuda a crear fácilmente botones con un forro fijo. Independientemente de la longitud del texto, ajustará automáticamente el relleno en función del valor que proporcione. Una vez que se instala el complemento, se puede usar un acceso directo para convertir el texto en estructura. Pedido+jLuego puede ingresar la cantidad deseada de relleno en la capa de texto (0: 0: 0: 0) (debajo del grupo de botones flexibles).

8. escala tipografica

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

9. modulador

y modulador Puede usar atajos de teclado para controlar el relleno de botones, bloques o áreas en su diseño. transferir + Pedido + M. Puede combinar todas las capas, agruparlas y usar atajos para ajustar automáticamente el relleno al valor de relleno que necesita. demostración de vídeo Vea esto en acción.

10 espada

¿Ha considerado alguna vez convertir su diseño de boceto a HTML? Si es así, probablemente debería obtener espada, Complemento de Sketch que genera automáticamente archivos HTML a partir de sus proyectos. Convierte el grupo en div, el texto se convierte p etc

Al usar Blade, puede decirle al complemento qué elemento DOM debe generar dándole a la capa un nombre especial, p. [btn] o entrar[text] Entonces Blade sabe qué hacer. Mira este video demostración Mirar dentro.

Ahora lea: 12 complementos útiles para desarrolladores de WordPress