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

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:0066:17

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

Curso de Sketch 2015

Clase 15 de 19

Clase 15 / 19

Recursos

Domina Sketch con un flujo moderno y claro para diseño de interfaces. Aquí encontrarás respuestas directas sobre unidades, atajos, símbolos, exportación, prototipado y tipografías. Todo explicado con ejemplos prácticos que mejoran velocidad y consistencia.

¿Qué es Sketch y cómo se usa para diseño digital?

Sketch está pensado para productos digitales y trabaja en píxeles. No permite cambiar a centímetros. Es ideal para apps, web e íconos; combina capas tipo Photoshop y vectores tipo Illustrator. El canvas es virtualmente infinito y el rendimiento es estable, salvo abusar de blurs.

No exporta HTML; solo entrega fragmentos de CSS como apoyo. Usa HTML/CSS manualmente para calidad de código.
Soporta flujo con InVision para prototipos y Zeplin para inspección de estilos y medidas por parte de desarrollo.
Presentación sin distracciones con el presentation mode: command punto.

¿Píxeles vs centímetros en Sketch?

No es posible cambiar a centímetros.
Para impresión, se puede configurar el documento y exportación, pero la unidad base sigue siendo píxeles.

¿Mobile first o desktop first en responsive design?

Diseña en paralelo: considera móvil y escritorio al mismo tiempo para no bloquearte con decisiones unilaterales.
Aplica responsive design: un mismo sitio que se adapta, no una “mini versión móvil”.
Evalúa el contexto de uso. Algunas experiencias privilegian móvil, otras escritorio.

¿Qué integra Sketch con otras herramientas?

Prototipado: InVision, Marvel y UX Pin funcionan bien; en estudio se prefiere InVision por velocidad y compatibilidad.
Entrega a desarrollo: Zeplin facilita medidas, colores y assets sin abrir Sketch.
No existe integración directa con WordPress o Mailchimp. Diseña y luego implementa fuera de Sketch.

¿Qué herramientas y atajos aceleran el trabajo en Sketch?

Aprovecha herramientas vectoriales y símbolos para consistencia y rapidez. Ajusta curvas, aplica degradados y sombras internas para detalles nítidos en íconos y componentes.

¿Cómo usar pluma, nodos y operaciones booleanas?

Vector tool con tecla V; el lápiz dibuja libre y es menos preciso.
Ajusta curvas moviendo anclas con command; alinear a 90° mejora transiciones.
Operaciones booleanas: sustracción, adición, diferencia e intersección para combinar o recortar formas.
Preferible intersecar formas en lugar de solo enmascarar si necesitas un vector editable.
Copia color de relleno con control C.
Construye profundidad con degradado de dos o tres pasos y sombra interna blanca para relieve.
Redondea esquinas y define remates de línea para trazos más orgánicos.

¿Cómo organizar símbolos y páginas consistentes?

Convierte elementos repetidos en símbolos (por ejemplo, la barra de navegación).
Cambios en el símbolo principal se propagan a todas sus instancias dentro del mismo archivo.
Estructura jerárquica: archivo > página > artboard > objeto. Los símbolos no se comparten entre archivos.

¿Cómo gestionar tipografías con Typekit?

Typekit ofrece suscripción a fuentes para escritorio y web, con sincronización local y carga por código en HTML.
Planes orientados a page views: gratuito con catálogo limitado y opciones de pago para más tráfico.
Ejemplos mencionados de uso profesional: Gotham, Montserrat, Helvetica, Work Sans, Circular, San Francisco, Open Sans, Lato.
Para identificar fuentes en imágenes: servicios como WhatTheFont o Identifont ayudan, pero no son perfectos.

¿Cómo exportar, prototipar y entregar a desarrollo?

Exporta en múltiples formatos y escalas, genera slices y define assets exportables. Estandariza densidades para iOS y Android y comparte prototipos claros.

¿Cómo exportar formatos, slices y múltiples escalas?

Marca capas o grupos como Make exportable.
Formatos: PNG, JPG, TIFF, PDF, EPS, SVG.
Exporta artboards completos y arrástralos desde la previsualización para rapidez.
Slices con tecla S para definir áreas específicas y márgenes personalizados.
Exporta varias capas exportables a la vez y define múltiples salidas (por ejemplo, PNG y SVG simultáneo).
Para quitar transparencias, usa JPG al exportar artboards.
Sketch no vectoriza mapas de bits; Illustrator ofrece Live Trace y herramientas como Vector Magic. Evita vectorizar fotos por resultados pobres.

¿Cómo manejar densidades y assets para iOS y Android?

Trabaja a 1x en iOS y a 1dp en Android.
Luego exporta assets escalados a las resoluciones requeridas.
Mantén consistencia de tamaños y espaciados para un handoff limpio.

¿Cómo prototipar y colaborar con desarrollo?

Prototipa pantallas estáticas en InVision.
Entrega especificaciones con Zeplin para medidas y estilos.
Sketch es “code friendly”, pero no genera HTML/CSS finales. Copia atributos CSS puntuales cuando te ayuden.
Auto Save en macOS se gestiona en Preferencias del Sistema > General. Desactiva “preguntar mantener cambios…” si quieres guardado automático silencioso.
Autoguardado en iCloud ayuda a recuperar documentos tras un cierre forzado.

¿Tienes dudas puntuales sobre símbolos, exportación o responsive? Comparte tu reto y lo resolvemos con ejemplos concretos.

Resumen

¿Qué es Sketch y cómo se usa para diseño digital?

No exporta HTML; solo entrega fragmentos de CSS como apoyo. Usa HTML/CSS manualmente para calidad de código.
Soporta flujo con InVision para prototipos y Zeplin para inspección de estilos y medidas por parte de desarrollo.
Presentación sin distracciones con el presentation mode: command punto.

¿Píxeles vs centímetros en Sketch?

No es posible cambiar a centímetros.
Para impresión, se puede configurar el documento y exportación, pero la unidad base sigue siendo píxeles.

¿Mobile first o desktop first en responsive design?

Diseña en paralelo: considera móvil y escritorio al mismo tiempo para no bloquearte con decisiones unilaterales.
Aplica responsive design: un mismo sitio que se adapta, no una “mini versión móvil”.
Evalúa el contexto de uso. Algunas experiencias privilegian móvil, otras escritorio.

¿Qué integra Sketch con otras herramientas?

Prototipado: InVision, Marvel y UX Pin funcionan bien; en estudio se prefiere InVision por velocidad y compatibilidad.
Entrega a desarrollo: Zeplin facilita medidas, colores y assets sin abrir Sketch.
No existe integración directa con WordPress o Mailchimp. Diseña y luego implementa fuera de Sketch.

¿Qué herramientas y atajos aceleran el trabajo en Sketch?

Aprovecha herramientas vectoriales y símbolos para consistencia y rapidez. Ajusta curvas, aplica degradados y sombras internas para detalles nítidos en íconos y componentes.

¿Cómo usar pluma, nodos y operaciones booleanas?

Vector tool con tecla V; el lápiz dibuja libre y es menos preciso.
Ajusta curvas moviendo anclas con command; alinear a 90° mejora transiciones.
Operaciones booleanas: sustracción, adición, diferencia e intersección para combinar o recortar formas.
Preferible intersecar formas en lugar de solo enmascarar si necesitas un vector editable.
Copia color de relleno con control C.
Construye profundidad con degradado de dos o tres pasos y sombra interna blanca para relieve.
Redondea esquinas y define remates de línea para trazos más orgánicos.

¿Cómo organizar símbolos y páginas consistentes?

Convierte elementos repetidos en símbolos (por ejemplo, la barra de navegación).
Cambios en el símbolo principal se propagan a todas sus instancias dentro del mismo archivo.
Estructura jerárquica: archivo > página > artboard > objeto. Los símbolos no se comparten entre archivos.

¿Cómo gestionar tipografías con Typekit?

Typekit ofrece suscripción a fuentes para escritorio y web, con sincronización local y carga por código en HTML.
Planes orientados a page views: gratuito con catálogo limitado y opciones de pago para más tráfico.
Ejemplos mencionados de uso profesional: Gotham, Montserrat, Helvetica, Work Sans, Circular, San Francisco, Open Sans, Lato.
Para identificar fuentes en imágenes: servicios como WhatTheFont o Identifont ayudan, pero no son perfectos.

¿Cómo exportar, prototipar y entregar a desarrollo?

Exporta en múltiples formatos y escalas, genera slices y define assets exportables. Estandariza densidades para iOS y Android y comparte prototipos claros.

¿Cómo exportar formatos, slices y múltiples escalas?

Marca capas o grupos como Make exportable.
Formatos: PNG, JPG, TIFF, PDF, EPS, SVG.
Exporta artboards completos y arrástralos desde la previsualización para rapidez.
Slices con tecla S para definir áreas específicas y márgenes personalizados.
Exporta varias capas exportables a la vez y define múltiples salidas (por ejemplo, PNG y SVG simultáneo).
Para quitar transparencias, usa JPG al exportar artboards.
Sketch no vectoriza mapas de bits; Illustrator ofrece Live Trace y herramientas como Vector Magic. Evita vectorizar fotos por resultados pobres.

¿Cómo manejar densidades y assets para iOS y Android?

Trabaja a 1x en iOS y a 1dp en Android.
Luego exporta assets escalados a las resoluciones requeridas.
Mantén consistencia de tamaños y espaciados para un handoff limpio.

¿Cómo prototipar y colaborar con desarrollo?

Prototipa pantallas estáticas en InVision.
Entrega especificaciones con Zeplin para medidas y estilos.
Sketch es “code friendly”, pero no genera HTML/CSS finales. Copia atributos CSS puntuales cuando te ayuden.
Auto Save en macOS se gestiona en Preferencias del Sistema > General. Desactiva “preguntar mantener cambios…” si quieres guardado automático silencioso.
Autoguardado en iCloud ayuda a recuperar documentos tras un cierre forzado.

¿Tienes dudas puntuales sobre símbolos, exportación o responsive? Comparte tu reto y lo resolvemos con ejemplos concretos.

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

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

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos