Contenido
- 01. Copiar y pegar guías
- 02. Limpiador de bocetos
- 03. Anima
- 04. Reaccionar Sketch.app
- 05. Complemento Git Sketch
- 06. ImageOptim
- 07. Espejo mágico
- 08. Exportar más
- 11. Marketch
- 12. Círculos segmentados
- 13. Corredor de bocetos
- 14. Fuente de iconos
- 15. Buscar y reemplazar
Los complementos de Sketch ayudan a que Sketch sea aún mejor. Sketch es la herramienta de diseño web de interfaz de usuario preferida por muchos, y parte de lo que hace que sea tan bueno es la comunidad de personas que trabajan para ampliar su funcionalidad y características mediante la creación de complementos personalizados.
La administración de sus complementos de Sketch ahora es más fácil que nunca. Los complementos se actualizan automáticamente y los obsoletos están desactivados. Hacer que el ecosistema de complementos sea aún más útil es Sketch Cloud, un servicio de intercambio de archivos en el que cualquiera puede registrarse, donde puede ver, descargar y comentar documentos de Sketch que se han compartido públicamente o de forma privada directamente desde Sketch.
Así que echemos un vistazo a los mejores complementos de Sketch, los que podrían cambiar drásticamente la forma en que diseña las interfaces de usuario. Una vez que haya encontrado uno que le guste, lea sobre cómo instalar los complementos de Sketch. Si le encantan sus herramientas web, no se pierda nuestras herramientas de diseño web favoritas, creador de sitios web y resúmenes de almacenamiento en la nube. Y recuerde, su elección de proveedor de alojamiento web es crucial para el éxito de su sitio (nuestra guía lo ayudará).
01. Copiar y pegar guías
- Descarga aquí
- Precio: Libre
- Resumen: Copie, pegue o elimine guías de sus mesas de trabajo
Cada diseñador tiene una relación de amor / odio con los guías. A veces son absolutamente esenciales y el resto del tiempo simplemente se interponen en tu camino. Si está utilizando guías en lugar de la opción de diseño de Sketch, cambiarlas para varias mesas de trabajo puede ser una pesadilla, pero con este complemento es fácil copiar, pegar y eliminar guías de todas sus mesas de trabajo.
02. Limpiador de bocetos
- Descarga aquí
- Precio: $2
- Resumen: Obtenga sus archivos de diseño tan limpios como un silbato
Cualquier diseño de Sketch que haya pasado por algunas iteraciones seguramente recogerá un poco de basura en el camino, como capas ocultas, posiciones de borde inconsistentes y estilos de capa no utilizados.
Si bien no es el fin del mundo tener un archivo Sketch desordenado, podría afectar la transferencia y facilitará la vida a cualquiera que tenga que encontrarle sentido en el futuro. En lugar de revisar todo a mano, use Sketch Cleaner para resolver todos los problemas comunes automáticamente.
03. Anima
- Descarga aquí
- Precio: Gratis hacia arriba
- Resumen: Cree prototipos receptivos y de alta fidelidad
Anteriormente disponible como complementos gratuitos separados - Diseño automático y Launchpad - Anima ahora es un complemento todo en uno diseñado para ayudarlo a crear diseños receptivos con pines, pilas y relleno, y prototipos de alta fidelidad que se ajustan a todas las pantallas. Todavía hay una versión gratuita que admite un proyecto; para proyectos ilimitados, el precio comienza en $ 25 por mes.
04. Reaccionar Sketch.app
- Descarga aquí
- Precio: Libre
- Resumen: Renderizar componentes de React en Sketch
La gestión de activos de diseño en Sketch puede resultar difícil. Este práctico complemento de Sketch proporciona una forma más fácil y confiable de administrar sus activos. Implemente sus diseños en código como componentes de React, luego use este complemento para convertirlos en bocetos. También facilita la obtención e implementación de datos reales en sus archivos de Sketch.
React Sketch.app fue desarrollado por Airbnb para su uso con su sistema de diseño, con el objetivo de ayudar a cerrar la brecha entre diseñadores y desarrolladores.
05. Complemento Git Sketch
- Descarga aquí
- Precio: Libre
- Resumen: Un cliente de Git integrado en Sketch
Este complemento tiene como objetivo llevar el control de versiones a Sketch. Funciona exportando una imagen para cada parte del diseño y luego generando diferencias bonitas para que quede claro qué cambios se han realizado. Al documentar cada paso del proceso de diseño, todos los miembros del equipo pueden ver cómo ha progresado el diseño.
El complemento Git Sketch fue creado por Mathieu Dutour, quien desde entonces ha pasado a crear un sistema de control de versiones de pago más completo llamado Kactus.
06. ImageOptim
- Descarga aquí
- Precio: Libre
- Resumen: Optimización de imágenes en Sketch
Si bien Sketch ofrece su propia solución para optimizar archivos SVG, no existe un rango de opciones para comprimir imágenes JPG y PNG. Dado que ImageOptim ha estado ofreciendo un servicio sólido durante varios años, tiene sentido que traiga esta funcionalidad a Sketch.
Cualquier diseñador que se preocupe por los tiempos de carga y la optimización de la imagen (que deberían ser todos los diseñadores) debería agregar ImageOptim a su caja de herramientas. Tenga en cuenta que, además del complemento, necesitará la aplicación principal ImageOptim (gratuita) instalada en su sistema macOS, y aún debe marcar las capas como exportables en Sketch (navegue hasta "Exportar y optimizar todos los activos" para comenzar).
07. Espejo mágico
- Descarga aquí
- Precio: Desde $ 4 / mes
- Resumen: Herramienta de transformación de perspectiva de imagen
Si está tratando de hacer maquetas de productos impresionantes pero tiene que seguir saltando a Photoshop para lidiar con las cosas difíciles, Magic Mirror podría salvarle la vida. Es una herramienta de transformación de perspectiva de imagen, que le permite crear maquetas de perspectiva y otros efectos distorsionados sin tener que salir de Sketch.
08. Exportar más
- Descarga aquí
- Precio: Libre
- Resumen: Genera automáticamente imágenes de marcador de posición
Agregar imágenes de marcador de posición a un diseño es una parte necesaria de la creación de prototipos, pero encontrar las imágenes reales puede ser una molestia. Entonces, en lugar de perder el tiempo en eso, déjelo todo a Day Player. Esto le permite agregar imágenes de marcador de posición personalizadas a cualquier documento de Sketch, desde varios servicios de imagen de marcador de posición diferentes, por lo que la decisión más importante que tendrá que tomar será si desea utilizar a Bill Murray, Nicolas Cage o gatitos.
11. Marketch
- Descarga aquí
- Precio: Libre
- Resumen: Genere una página html que pueda medir y obtener estilos CSS
Si desea recuperar estilos CSS de sus diseños de Sketch, un complemento como Marketch es absolutamente esencial. Le permite exportar sus mesas de trabajo de Sketch como un archivo zip lleno de documentos HTML que luego puede extraer para extraer una gran cantidad de CSS dulce, listo para usar.
12. Círculos segmentados
- Descarga aquí
- Precio: Libre
- Resumen: Crea gráficos circulares precisos
Esta es una forma rápida de hacer círculos segmentados para gráficos y diagramas. Este complemento puede producir varios estilos de diagrama circular, incluidos los círculos de puntos y marcas, y los grosores se controlan mediante una lista simple de valores separados por comas.
13. Corredor de bocetos
- Descarga aquí
- Precio: Libre
- Resumen: Spotlight para búsqueda
Sketch es muy querido por su flujo de trabajo de teclado minimalista. Dicho esto, siempre hay dos o tres atajos de teclado que siempre parece olvidar o confundir con otra aplicación de diseño como Photoshop, y no olvidemos esas herramientas y funciones menos comunes que no tienen un atajo de teclado y están ocultas en el fondo Menú de croquis.
Sketch Runner resuelve estos problemas y lo hace de una manera con la que los usuarios de macOS están familiarizados: Sketch Runner es macOS Spotlight, pero para Sketch.
14. Fuente de iconos
- Descarga aquí
- Precio: Libre
- Resumen: Administrar fuentes de iconos
Las fuentes de iconos son una forma muy eficaz de utilizar iconos en sus diseños web sin tener que exportar y optimizar una tonelada de recursos de imagen. Por lo general, hacemos referencia a las fuentes de iconos en el cabeza> sección de páginas web HTML, como hacemos con CSS y JavaScript. Sin embargo, usarlos en Sketch es un poco más complicado. Afortunadamente, Icon Font lo hace fácil.
Después de descargar e instalar Sketch IconFont, descargue archivos de fuentes SVG o descargue este paquete de fuentes, que incluye los archivos de fuentes para FontAwesome, Material Design Icons, Ion Icons e Simple Line Icons. Cuando haya terminado, vaya a Complementos> Fuente de icono> Instalar un paquete de fuentes, seleccione las fuentes descargadas en el cuadro de diálogo Abrir archivo, luego navegue a Complementos> Fuente de icono> Insertar cuadrícula> [la fuente de icono deseada] para insertar un icono.
Incluso si tiene la intención de diseñar un conjunto de iconos personalizados para su diseño, tener iconos listos para usar a su disposición puede ayudarlo con la creación rápida de prototipos en las primeras etapas del diseño, agregando un poco más de claridad / fidelidad a sus maquetas de baja fidelidad. .
15. Buscar y reemplazar
- Descarga aquí
- Precio: Libre
- Resumen: Buscar y reemplazar texto en capas seleccionadas
Los editores de texto no son el único lugar que necesita buscar y reemplazar, también es útil en Sketch. Este complemento tiene muchas opciones avanzadas y le permite buscar instancias de palabras o frases particulares en el texto en las capas seleccionadas (y todo lo que contiene), y luego reemplazarlo fácilmente.
Página siguiente: más complementos de Sketch que ahorran tiempo
