10 complementos gratuitos de croquis para desarrolladores web
Sketch está obteniendo mucha tracción entre los diseñadores y desarrolladores web. Esto es probablemente porque es intuitivo, fácil de aprender y viene con muchas características que hacen que sea mucho más fácil crear 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 al trabajar 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 relleno automáticamente a una capa.
1. CSS Buddy
CSS Buddy le permite agregar el CSS a su capa en el espacio de trabajo de Sketch. Básicamente, puede aplicar ancho, alto, opacidad, sombreado, borde y fondo a la capa usando CSS.
Con este complemento instalado, solo seleccione una capa y luego seleccione Aplicar a seleccionado 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 su capa toma forma.

Si sigues la tendencia del diseño de materiales, una cosa destacada que notarás es el uso de colores distintivos. Material Design tiene una paleta de colores impresionante. Ahora puede llevar eso a su espacio de trabajo con el Complemento de paleta de colores de Material Design .
Este complemento generará paletas de colores en segundos sin tener que cerrar su espacio de trabajo. Elija Hue, Value o Swatch para generar una paleta de colores adecuada para su proyecto.

A veces tenemos que 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 es lo que todo el mundo estaba buscando.
Sketch Notebook 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.

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

Ya tenemos un complemento para insertar imágenes de marcador de posición, ¿qué tal uno para el contenido general? Content Generator te 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 sobre el terreno.
Para agregar los datos ficticios, simplemente seleccione una capa, luego seleccione Complemento> Generador y elija Geo, Persona o Fotos.

Sketch Measure 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 mediciones se pueden mostrar a través de atajos de teclado.

El botón dinámico te ayuda a crear un botón con almohadillas fijas fácilmente. Se ajustará automáticamente el relleno en función del valor que brinde, sin importar la longitud de su texto. Con el complemento instalado, un texto se puede convertir en una estructura con el atajo Comando + J. La cantidad de relleno requerida se puede insertar en la capa de texto (0: 0: 0: 0) (en el grupo de botones flexibles).

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 (simple o múltiple) o la capa mixta que contenga al menos una capa de texto, luego 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.

Con Modulizer puede controlar los rellenos para botón, módulo o áreas en su diseño con el atajo de teclado Shift + Comando + M. Puede combinar todas sus capas, agruparlo y luego usar el atajo para ajustar automáticamente su relleno en función del valor de relleno necesitas. Mire la demostración en video para ver esto en acción.

¿Alguna vez has pensado en convertir tu diseño de boceto a HTML? Si es así, probablemente deberías obtener Blade, un complemento de Sketch que genera automáticamente archivos HTML a partir de tu diseño. Convertirá grupo en div
, texto en p
etc.
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 qué debe hacer. Echa un vistazo a esta demostración en video.



20 conceptos de diseño web que harán volar tu mente
Crear una experiencia efectiva y emocionante es una parte crucial del éxito de cualquier diseño de sitio web. Con HTML5 ahora es posible agregar interacciones dinámicas a los sitios web y hacer que cobren vida. En la colección de hoy me gustaría compartir los 20 conceptos de diseño web más geniales que se encuentran en la Web .En est

GraphicsJS le permite crear cualquier gráfico web que pueda imaginar
Las API de JavaScript personalizadas son el futuro de la web. El movimiento de fuente abierta junto con los gráficos SVG han abierto las posibilidades para los desarrolladores web.GraphicsJS es una biblioteca de código abierto y una API JS para crear gráficos personalizados en navegadores web. Se puede usar como una herramienta de visualización para graficar datos, o se puede usar para hacer cosas geniales solo para presumir . En