12 complementos de bocetos gratuitos esenciales
Cuando Sketch 44 sale de beta, echamos un vistazo a una de las mejores características de Sketch: la gran selección de complementos de código abierto.
La comunidad Sketch es tremendamente solidaria y puedes encontrar montones de increíbles complementos que mejorarán radicalmente tu flujo de trabajo. En esta publicación, cubriré los 12 mejores plugins de Sketch que todo diseñador debería tener.
1. Bosquejo de la Medida
Sketch Measure ayuda a los diseñadores a organizar y describir su trabajo para desarrolladores, gerentes de proyecto y otros miembros del equipo.
Pero esto también es increíblemente útil para los lobos solitarios que diseñan y codifican todos sus proyectos. Con el plugin Measure puede esbozar los elementos que muestran las dimensiones específicas de ancho / alto para obtener medidas adecuadas de un vistazo.
Esto incluye todos los elementos de la página como botones, texto, íconos e incluso partes principales de la mesa de trabajo.
Con Sketch Measure puede incluso exportar páginas a HTML / CSS con estilos de página intactos. De acuerdo hay Herramientas de Adobe eso puede hacer esto también Pero tener toda esta funcionalidad en Sketch hace que tu trabajo sea mucho más fácil.
2. InVision Craft
Hace un tiempo, el equipo de InVision anunció un nuevo complemento Arte . Pero esto es más como un conjunto de complementos donde obtienes toneladas de funciones adicionales y accesos directos.
Un ejemplo es el Plugin de datos que permite a los diseñadores extraer texto / datos directamente de API públicas en la web. De esta manera, puedes completar automáticamente tu aplicación con contenido e imágenes reales sobre la marcha.
Los desarrolladores de InVision están actualizando constantemente Craft con nuevas funciones de complemento para que esto sea aún más valioso para los diseñadores. ¿Y mencioné que esto es totalmente gratis?
Hasta ahora, Craft tiene 6 funciones de complemento principales, todas las cuales vale la pena agregar a su flujo de trabajo de diseño.
- Carta blanca - colaboración en tiempo real en Sketch
- Prototipo - prototipos dinámicos de alta fidelidad
- Sincronización - sincronización instantánea entre los prototipos de InVision y Sketch
- Datos - extraer datos reales de la web en su maqueta de bocetos
- Biblioteca - diseñar activos en la nube que se puedan compartir con todo su equipo
- Duplicar - Clonación ultrarrápida de UI
Eche un vistazo a la Página de manualidades y mira lo que piensas Una vez que lo intentes, nunca querrás volver atrás.
3. Sketch Toolbox
Todo usuario de Sketch debe saber sobre el Sketch Toolbox . Es un exquisito administrador de complementos que hace que la instalación / personalización de tus complementos sea mucho más fácil.
Con esta Caja de herramientas puede navegar a través de cientos de complementos de Sketch y elegir cuáles desea instalar. Simplemente haga clic en lo que desea y se descargará automáticamente a su computadora, listo para usar.
Y Sketch Toolbox actualiza automáticamente los complementos para que funcionen sin problemas.
Técnicamente esto todavía está en beta y siempre está recibiendo nuevas actualizaciones en GitHub . Pero creo que es lo suficientemente sólido como para usarlo en un flujo de trabajo de producción. De hecho, yo diría que un buen flujo de trabajo de Croquis no estaría completo sin este increíble administrador de complementos.
4. Exportar activos
Una de las tareas más detalladas de un diseñador es asignar recursos y compartirlos con los desarrolladores. Todos los pequeños íconos, gráficos, patrones de fondo, todos deben ser exportados (generalmente a mano).
los Complemento de exportación de activos hace que este proceso sea muy sencillo. Solo tenga en cuenta que este enchufe está hecho específicamente para aplicaciones móviles donde los diseñadores necesitan exportar activos de interfaz Android / iOS. Esto incluye activos de retina para tamaños de pantalla @ 2x y @ 3x.
No he visto ninguna característica relacionada con el diseño web de retina, pero puede consultar Exportador de bocetos plugin también. Actualmente está en versión beta y pretende ser una versión mejorada del original.
5. Generador de contenido
El complemento de Craft que mencioné anteriormente ofrece la generación de contenido. Pero es posible que desee algo un poco más simple como este Generador de contenido por Timur Carpeev.
Una vez instalado, puede rellenar automáticamente varios elementos de Sketch a la vez con datos relacionados, como:
- Avatares de usuario
- Nombres y apellidos
- Texto de párrafo ficticio
- Cadenas personalizadas (geos, precios, números de tarjetas CC, etc.)
Todo el contenido se extrae de bases de datos de código abierto como Unsplash y Uinames para que pueda usar esto en proyectos múltiples, comerciales o de otro tipo.
6. Looper
Photoshop tiene su propio panel Acciones donde puede automatizar acciones repetidas. Sketch no tiene un panel como este, pero sí tiene Plugin Looper que es completamente gratis y muy fácil de aprender.
Esto es más útil para crear patrones repetitivos que se apoderan de toda la página. Los diseñadores gráficos pueden encontrar más uso para este complemento que los diseñadores web, pero puede ahorrar mucho tiempo al pasar por las tareas repetitivas de escalado / duplicación.
Echa un vistazo a la Página de Looper para ver lo que puede hacer. Puede no ser útil para todos, pero para aquellos que pueden usarlo, se ahorrará mucho tiempo.
7. Sketch Iconfont
Los diseñadores web les encanta fuentes del icono . Los iconos geniales hacen que el diseño de la interfaz de usuario sea mucho más fácil y los archivos de fuentes generalmente son más pequeños que las imágenes.
los Sketch Iconfont plugin es una suite de administración completa para almacenar, clasificar y extraer fuentes de iconos directamente en Sketch. De manera predeterminada, el complemento viene vacío, por lo que deberá descargar fuentes de iconos localmente para usarlas.
Pero esto le otorga acceso completo para trabajar con cualquier fuente de iconos que encuentre en línea. De hecho, hay un paquete de paquete de fuentes hecho específicamente para este complemento si está buscando llenar su carpeta iconfont rápidamente. Y siempre puedes buscar en la web más a medida que pasa el tiempo.
Recomiendo absolutamente agarrar una copia de este complemento. Las fuentes de iconos llegaron para quedarse y son invaluables para los sitios web modernos.
8. Inventario de estilo
Cada vez que inicie un nuevo archivo de boceto, deberá volver a crear estilos desde cero o deberá copiar / pegar estilos de maquetas anteriores.
Con el Complemento de inventario de estilo puedes eludir todo este trabajo adicional. Solo unos pocos clics importan todos sus estilos anteriores directamente en su nuevo documento de boceto para facilitar el acceso.
Estos estilos incluyen colores, estilos de texto y símbolos, junto con estilos de capa para ciertos elementos.
Este complemento raramente se actualiza, pero lo recomiendo para fusionar maquetas similares. También puedes probar el Complemento de paletas de bocetos para guardar e importar esquemas de color.
9. Pixel Perfecter
Todos los diseñadores digitales se enorgullecen de las maquetas de píxeles perfectos. Esta tarea no es difícil, pero sí requiere que todos los elementos de diseño estén perfectamente alineados con la cuadrícula, sin superposiciones ni imperfecciones.
Si alguna vez desea verificar su trabajo antes de exportar, puede ejecutar Pixel Perfecter . Este pequeño complemento comprueba todos tus activos de archivos para ver si los píxeles sobrepasan las posiciones de coordenadas X / Y tradicionales creando píxeles imperfectos.
Tenga en cuenta que esto no corregirá automáticamente estos valores de píxeles desplazados. Simplemente encontrará la (s) capa (s) que causan problemas y las resaltará para que pueda ingresar y solucionarlas usted mismo. Todavía ahorra mucho tiempo verificando cada capa de forma manual.
10. Botón dinámico
El plugin de botón dinámico original fue abandonado un poco en 2015, pero el más nuevo Botón dinámico el complemento es aún mejor y es compatible con Sketch 3.5+.
Agrega automáticamente estilos de relleno y botones en cualquier capa de texto que cree, y el relleno es dinámico, por lo que se actualiza independientemente del tamaño del texto. Esto es tremendamente útil para los diseñadores de IU que constantemente realizan cambios en sus maquetas.
Esto también se puede usar para aplicaciones móviles donde los botones generalmente siguen un tamaño / razón fijo. No es el plugin de Sketch más glamoroso, pero cumple bien su función.
11. Compo
Si desea un generador de botones junto con algunas características adicionales, entonces el Compo plugin vale la pena probarlo
El creador de Compo tuvo la idea después de usar el complemento Dynamic Button por un tiempo, y finalmente deseó algo un poco más rápido. Compo genera automáticamente el tamaño de botón y el tamaño de texto adecuados para que coincidan con sus especificaciones exactas. Un clic y usted tiene un componente de Sketch en funcionamiento que se dimensiona automáticamente y se coloca correctamente.
Normalmente, cuando crea un botón y cambia el texto, solo afectará a la capa de texto. Entonces, el botón subyacente sería demasiado pequeño. Compo cambia automáticamente el tamaño del botón y el texto como si fueran un elemento.
Puedes encontrar toneladas de demos en Repo de GitHub junto con algunas guías de usuario para comenzar.
12. CSSketch
Por último, pero no menos importante, es el CSSketch enchufar. Esto es más útil para combos de diseñadores + desarrolladores que desean acceso directo al código CSS para todos los estilos que crean.
Cualquier página que diseñe puede ejecutarse a través de este complemento para exportar una hoja de estilo completa con todos los activos contabilizados. Pero como esto es automático, no se puede esperar un código de calidad A ++.
Todavía prefiero codificar mi CSS a mano, pero este complemento al menos ofrece un punto de partida para diseñadores o desarrolladores no técnicos que quieran ahorrar un poco de tiempo.
