Flujo de trabajo moderno con Sketch

Diseñar interfaces modernas exige herramientas ágiles y enfocadas. Con Sketch, el enfoque cambia: del mapa de bits a lo vectorial, del archivo pesado a un flujo de trabajo rápido, y de maquetas estáticas a prototipos navegables. Aquí encontrarás una guía clara para entender qué es Sketch, cómo se compara con otras herramientas y qué necesitas para empezar a diseñar web y móvil con confianza.

¿Qué es Sketch y por qué cambia el diseño de interfaces?

Sketch es una app profesional para diseño de interfaces web y móviles. No es un programa de dibujo libre ni para pintar con pinceles. Es una herramienta pensada para crear pantallas, componentes y sistemas con precisión.

• Enfoque vectorial: escalas sin pérdida y editas sin destrucción.
• Pensado para UI: capas, grupos, símbolos y artboards optimizados.
• Exportación ágil: assets en 1x, 2x y 3x con un clic.
• Plantillas listas: tamaños para iPhone, Android, íconos y web responsiva.
• Integración con prototipado: subes a InVision y navegas tus flujos.

¿Cómo se trabaja con capas, exportación y artboards?

El paradigma es familiar si vienes de PSD: usas capas, las agrupas y las exportas por objeto o por grupo. Con artboards defines múltiples pantallas y tamaños en un mismo archivo para web responsiva y apps móviles. Resultado: velocidad y consistencia.

• Exporta múltiples assets en lote con un botón.
• Reutiliza símbolos como la barra de status de iOS.
• Mantén variantes por tamaño sin perder el control visual.

¿Puedo prototipar con InVision y validar en Sketch Mirror?

Sí. Arrastras tu archivo de Sketch a InVision y este genera las pantallas. Conectas áreas clicables y simulas navegación sin esfuerzo. Además, con Sketch Mirror ves en tiempo real tu diseño de iOS en el teléfono: validas legibilidad, espacios y alcance del dedo.

• InVision facilita feedback con clientes y equipos.
• Sketch Mirror muestra cambios al instante en el dispositivo.

¿Cómo se compara Sketch con Photoshop e Illustrator?

El contexto importa. Photoshop nació para editar imágenes en mapa de bits; Illustrator, para gráfica vectorial. Se usaron por años para UI, pero eran un hack: hoy la web es HTML/CSS/JS, no rebanadas de imágenes. Sketch se concentra en lo que importa al diseñar interfaces.

• Photoshop es excelente para foto y efectos, pero pesado para UI.
• Illustrator brilla en ilustración vectorial, pero su exportación para web puede ser engorrosa.
• Fireworks (descontinuado desde 2012) llenaba el hueco; Sketch tomó la posta con enfoque actual.

Importaciones y compatibilidad:

• Importa vectores desde Illustrator convertidos a EPS o SVG.
• Copiar/pegar no siempre es perfecto entre apps, pero funciona la mayoría de veces.
• Muchas veces es más rápido reconstruir el vector en Sketch.

Productividad y rendimiento:

• Sketch aprovecha tecnologías de macOS como autoguardado y versionado.
• Es ligero y rápido incluso en equipos como el New MacBook.
• Algunas operaciones (por ejemplo, blur) usan más memoria, pero el desempeño general es estable.

Ergonomía al diseñar:

• No necesitas tableta: con teclado, trackpad o mouse trabajas bien.
• Una Wacom o mouse vertical puede ayudar si buscas reducir carga en muñecas.

¿Qué aprenderás y qué necesitas para iniciar con Sketch?

La ruta de aprendizaje va de lo simple a lo complejo, enfocada en diseño visual más que en UX research. Desde iconos hasta una app móvil completa, siempre con buenas prácticas y patrones de diseño.

¿Qué verás paso a paso en el curso?

• Día 1: familiarización con el 95 % de las herramientas y creación de íconos (material design, Mac, iOS y uno extra).
• Día 2: construcción de una web responsiva y flujo de trabajo para escritorio.
• Día 3: diseño de una app para iOS e intento de incluir Android para comparar.
• Plus: prototipado con InVision y vista en vivo con Sketch Mirror.

¿Qué plantillas y sistemas están disponibles?

• Plantillas para iOS y Android con tamaños oficiales.
• Soporte para material design con paletas y componentes de construcción.
• Artboards para web, íconos y hasta hoja tamaño carta.

¿Cómo obtener Sketch, precio y descuentos?

• Disponible en la Mac App Store.
• Precio aproximado: 99 dólares o alrededor de 1500 MXN.
• Prueba completa de 14 días desde el sitio de Bohemian Coding, con guardado y sin marcas de agua.
• Descuento estudiantil del 50 % con credencial vigente.
• Tip adicional compartido por la comunidad: cupón de 20 dólares “TREEHOUSE VEINTE”.

Consejos para llegar listo:

• Instala la versión de prueba y explora los artboards y la exportación.
• Reúne tus paletas y tipografías para acelerar decisiones visuales.
• Abre InVision y crea una cuenta gratuita para tus primeros prototipos.
• Comparte dudas con el hashtag Platzi Sketch y prepara tus preguntas.

¿Tienes una inquietud puntual sobre flujo, exportación, prototipado o plantillas de iOS/Android? Cuéntala en los comentarios y sigamos la conversación.