Exportar assets de Sketch a Invision

Lo primero que tienes que hacer es instalar el plugin Craft en Sketch, para poder sincronizar tus diseños con Invision.

Cuando estos diseños ya están sincronizados y los tenemos dentro de un proyecto de Invision, se habilitará una función llamada Inspect Mode.

Con esta herramienta, la persona que maquetará el diseño, podrá ver tamaños de elementos, espacios, colores, tipografía, etc. e implementar los diseños de manera más rápida y eficaz. ¡Y no solo eso! También podrá descargar todos los assets que hayamos exportado en Sketch previamente.

¿Cómo exportar los assets correctamente?

Para que la iconografía esté bien exportada y no de problemas a la hora de maquetar, debemos seguir estos pasos:

  • Selecciona todas las capas del icono que quieres exportar y pulsa “Layer” > “Convert to outlines”. Esta función hará que tu icono este compuesto por formas rellenas y no por trazos.

  • Une todos los elementos con el buscatrazos (“Union”)

  • ¿Se te ha roto el icono? No te preocupes! Es normal. Abre el icono y cambia todas aquellas capas que tengan el símbolo de “Union” a “None”.

Cuando veas correctamente el icono, debemos exportarlo al formato necesario. Para eso, selecciona el icono y dale a “Make Exportable” (esquina inferior derecha). Establece el formato (lo normal es SVG).

Acto seguido, en tu carpeta aparecerá un icono de una cuchilla, que indica que ya está exportado, y cuando sincronices con Craft, ya se habrá añadido como asset al proyecto de Invision.

Acuérdate de nombrar el icono con su nombre correspondiente para no crear varios con el mismo nombre, si no Invision no los reconocerá.

 

¿Y si el icono lo tengo como símbolo?

No pasa nada, puedes exportarlo igualmente siempre y cuando el símbolo esté bien ejecutado tal y como hemos explicado anteriormente.

 

Te recomendamos que sigas estos pasos desde que creas el primer icono del documento, así no se hará tan pesado después.