Símbolos en Sketch: cómo identificarlos y usarlos

Contenido del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0023:09

Símbolos en Sketch: cómo identificarlos y usarlos

Curso de Sketch 2015

Clase 12 de 19

Clase 12 / 19

Recursos

Domina un flujo sólido con Sketch, InVision y Zeplin: diseña ágil, entrega claro y prototipa sin fricción. Aquí encontrarás respuestas prácticas sobre símbolos, exportación @1x/@2x/@3x, medidas, sincronización, autosave y tipografías que aceleran proyectos reales.

¿Cómo se integran Sketch e InVision en el flujo de trabajo?

Un diseño en Sketch se convierte en prototipo navegable en InVision. Sketch diseña pantallas; InVision conecta, comparte y sincroniza. El entregable ideal es el proyecto de InVision: incluye pantallas, carpeta de assets, fonts y acceso al archivo fuente con invitación. Nada de zips pesados: InVision Sync mantiene todo al día y permite invitar al equipo por correo.

Prototipado en InVision: conecta pantallas y prueba en smartphone con Internet y navegador. Nada depende del sistema operativo del cliente.
Accesos: solo quien recibe invitación puede descargar assets. Un enlace público solo muestra pantallas permitidas.
Ignorar pantallas: agrega un guion al inicio del nombre del artboard para que InVision no lo exporte.
Comparativas: PoP Prototyping on Paper es más básico; InVision es más completo. Zeplin no prototipa: convierte diseños en especificaciones para developers.
Sincronización con otras apps: hay soporte para PSD/AI/Sketch, pero el mirror en tiempo real funciona mejor con Sketch.

¿Qué hace cada herramienta en la cadena?

Sketch: diseño visual, símbolos, exportables, organización por artboards.
InVision: prototipado, comentarios, entrega y sincronización.
Zeplin: medidas, estilos y recursos para desarrollo.

¿Se integra Sketch con WordPress?

No hay integración directa a código. Sketch exporta imágenes (PNG, PDF y similares). El código y las animaciones se resuelven con otras herramientas.

¿Qué debes dominar de Sketch para trabajar más rápido?

La gestión de símbolos es clave. Un símbolo activo se ve en morado; un grupo normal, en azul. No es posible anidar símbolos dentro de símbolos. Si necesitas romper la relación, usa Detach from symbol con clic secundario.

Exportación para Xcode: marca “Hacer exportable”, elige formato y tamaños @1x, @2x, @3x. 1x: pre-retina display. 2x: retina display. 3x: teléfonos recientes.
Organización: crea una carpeta de assets y exporta por lotes.
Medidas y specs: el plugin Measure añade overlays con tamaños. O usa Zeplin para ver medidas al pasar el mouse.
Contenido realista: el plugin de content rellena textos e imágenes para evitar lorem ipsum.
Vista en móvil: usa mirror de Sketch para previsualizar en tiempo real.
Autosave: se puede desactivar a nivel de sistema operativo. Aun así, cuentas con múltiples undo.
Pixel art: sí es posible en Sketch para ejercicios simples.

¿Cómo diferenciar y editar símbolos y grupos?

Color morado: símbolo activo. Cambios afectan instancias.
Color azul: grupo normal. Cambios no se replican.
Detach: rompe vínculo para personalizar sin afectar los demás.

¿Cómo optimizar la exportación?

Define tamaños @1x/@2x/@3x según densidad.
Nombra y agrupa artboards por flujo.
Usa el guion inicial para excluir artboards en InVision.

¿Qué pautas de tipografía y diseño conviene aplicar?

No hay una regla única, pero hay referencias útiles. En iOS, los labels suelen ir en 17 px y el texto común en 15 px. Por debajo de 10 px se dificulta la lectura. Por encima de 18 px luce grande para texto de párrafo. Cada sistema operativo renderiza distinto: valida siempre en dispositivo.

Usa plantillas de Sketch para iOS y Android. Facilitan familiarizarte con componentes nativos.
Revisa los guidelines: Android en google.com/design e iOS en developer.apple.com/ios.
Ajusta tamaños según contexto web o móvil.

¿Qué habilidades clave fortaleces?

Configurar exportables y densidades para entrega a desarrollo.
Construir símbolos, diferenciarlos de grupos y usar detach.
Preparar prototipos en InVision y compartir con permisos.
Obtener medidas y estilos listos para developers con Zeplin o plugins.
Mantener un flujo sincronizado con InVision Sync.

¿Tienes dudas sobre símbolos, exportación o entrega en equipo? Cuéntame tu caso y afinamos el flujo juntos.

Resumen

¿Cómo se integran Sketch e InVision en el flujo de trabajo?

Prototipado en InVision: conecta pantallas y prueba en smartphone con Internet y navegador. Nada depende del sistema operativo del cliente.
Accesos: solo quien recibe invitación puede descargar assets. Un enlace público solo muestra pantallas permitidas.
Ignorar pantallas: agrega un guion al inicio del nombre del artboard para que InVision no lo exporte.
Comparativas: PoP Prototyping on Paper es más básico; InVision es más completo. Zeplin no prototipa: convierte diseños en especificaciones para developers.
Sincronización con otras apps: hay soporte para PSD/AI/Sketch, pero el mirror en tiempo real funciona mejor con Sketch.

¿Qué hace cada herramienta en la cadena?

Sketch: diseño visual, símbolos, exportables, organización por artboards.
InVision: prototipado, comentarios, entrega y sincronización.
Zeplin: medidas, estilos y recursos para desarrollo.

¿Se integra Sketch con WordPress?

No hay integración directa a código. Sketch exporta imágenes (PNG, PDF y similares). El código y las animaciones se resuelven con otras herramientas.

¿Qué debes dominar de Sketch para trabajar más rápido?

Exportación para Xcode: marca “Hacer exportable”, elige formato y tamaños @1x, @2x, @3x. 1x: pre-retina display. 2x: retina display. 3x: teléfonos recientes.
Organización: crea una carpeta de assets y exporta por lotes.
Medidas y specs: el plugin Measure añade overlays con tamaños. O usa Zeplin para ver medidas al pasar el mouse.
Contenido realista: el plugin de content rellena textos e imágenes para evitar lorem ipsum.
Vista en móvil: usa mirror de Sketch para previsualizar en tiempo real.
Autosave: se puede desactivar a nivel de sistema operativo. Aun así, cuentas con múltiples undo.
Pixel art: sí es posible en Sketch para ejercicios simples.

¿Cómo diferenciar y editar símbolos y grupos?

Color morado: símbolo activo. Cambios afectan instancias.
Color azul: grupo normal. Cambios no se replican.
Detach: rompe vínculo para personalizar sin afectar los demás.

¿Cómo optimizar la exportación?

Define tamaños @1x/@2x/@3x según densidad.
Nombra y agrupa artboards por flujo.
Usa el guion inicial para excluir artboards en InVision.

¿Qué pautas de tipografía y diseño conviene aplicar?

Usa plantillas de Sketch para iOS y Android. Facilitan familiarizarte con componentes nativos.
Revisa los guidelines: Android en google.com/design e iOS en developer.apple.com/ios.
Ajusta tamaños según contexto web o móvil.

¿Qué habilidades clave fortaleces?

Configurar exportables y densidades para entrega a desarrollo.
Construir símbolos, diferenciarlos de grupos y usar detach.
Preparar prototipos en InVision y compartir con permisos.
Obtener medidas y estilos listos para developers con Zeplin o plugins.
Mantener un flujo sincronizado con InVision Sync.

¿Tienes dudas sobre símbolos, exportación o entrega en equipo? Cuéntame tu caso y afinamos el flujo juntos.

Introducción a Sketch

Flujo de trabajo moderno con Sketch

Curso de Sketch para diseño web desde cero

Interface de Sketch: canvas infinito y artboards

Replicar el ícono de Tweetbot en Sketch

Crear íconos Material Design en Sketch

Diseñando para Web

Sketch con Illustrator: compatibilidad y plugins

Sketch, Prototipados y Optimización para Web

Preguntas antes de Clase

Sketch + InVision: prototipos con hover automático

Recursos gratuitos para acelerar diseño Sketch

Cómo crear tab bar iOS en Sketch e InVision

Símbolos en Sketch: cómo identificarlos y usarlos

[Extra] Creando prototipos con Marvel y Sketch

[Extra] Cómo pasar un archivo de Sketch a Zeplin

Presenta un proyecto de Sketch a tu Cliente

Sketch para interfaces: unidades, símbolos y exportación

Creación de portafolios responsivos en Sketch

Cómo hacer portafolios responsivos en Sketch

Proyecto: Sitio Responsive III

Crear grids para proyectos con mucho contenido

Símbolos en Sketch: cómo identificarlos y usarlos

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos