Recursos gratuitos para acelerar diseño Sketch

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:0036:03

Recursos gratuitos para acelerar diseño Sketch

Curso de Sketch 2015

Clase 10 de 19

Clase 10 / 19

Recursos

Domina Sketch con un flujo ágil y profesional: usa recursos gratuitos, templates de iOS, símbolos, máscaras, plugins y InVision para prototipar una app social tipo Instagram en minutos. Aquí verás cómo pasar de wireframes al diseño visual con tipografías de iOS 9 y trucos que ahorran tiempo.

¿Qué recursos y templates de iOS aceleran tu diseño en Sketch?

Explora sketchappsources.com para descargar interfaces, íconos y archivos de Sketch listos para estudiar. Verás ejemplos como la interfaz de 3D Touch del iPhone, Apple TV o Spotify. Analiza cómo otros diseñadores organizan grupos, capas y efectos: es una forma directa de aprender buenas prácticas.

El template iOS UI Design en Sketch incluye status bars, barras de navegación, controles segmentados y toolbars. Copia y pega lo necesario desde el UI Kit y enfócate en la solución, no en reconstruir componentes.

¿Cómo crear wireframes rápidos con artboards y grids?

Presiona A para crear un artboard iPhone 6. También puedes sumar iPhone 6 Plus o iPhone 5.
Traza un feed con fotos cuadradas y una barra inferior de menús.
Diseña el perfil con un avatar grande de 140 px y un grid de fotos.
Mantén visible la barra inferior y alarga el artboard hacia abajo para duplicar contenido cuando haga falta.
Recuerda: un wireframe define el layout básico, no el estilo final.

¿Qué atajos y alineación te ahorran tiempo?

Mueve el canvas con la barra espaciadora presionada y arrastra.
Duplica con la tecla control al arrastrar.
Mide espacios en píxeles con option al pasar el cursor entre formas.
Usa el botón de alinear al centro del artboard para precisión inmediata.
Aprovecha distribución y alineación para ordenar grids en segundos.

¿Cómo aplicar símbolos, tipografías y máscaras para un perfil atractivo?

Convierte la barra de navegación en un símbolo para propagar cambios en todas las pantallas. Cambia color, elimina elementos innecesarios y añade el nombre de la app sin repetir trabajo. Si el texto debe ser un vector fijo, usa convertir a outlines con clic derecho.

Importante: al prototipar en InVision, la status bar se agrega automáticamente, así que no hace falta dibujarla ahora.

¿Cómo funcionan los símbolos y el control de la barra?

Edita una barra que sea símbolo y verás cambios reflejados en todas las vistas.
Arrastra el texto del logo dentro del símbolo para que se replique.
Cambia el color de la barra y mantén coherencia visual en todas las pantallas.

¿Qué tipografías usar en iOS 9 y cómo jerarquizar texto?

Para el logotipo, instala Grand Hotel y escribe el nombre, por ejemplo, Platsigram con la tecla T.
Para interfaz de iOS 9, instala San Francisco: SF UI Display para títulos y SF UI Text para texto corrido. San Francisco Compact es para Apple Watch.
Un título a 18 px funciona bien para encabezados del perfil.
Añade métricas del usuario: 23 fotos, 5 followers, 230 following. Alinea al centro y ajusta peso tipográfico para marcar jerarquía.

¿Cómo enmascarar fotos y aplicar background blur sin perder rendimiento?

Enmascara el avatar con un círculo: selecciona foto + forma y aplica máscara.
Crea una imagen de fondo grande detrás de la barra y el encabezado del perfil.
Agrega un rectángulo sin relleno ni borde con background blur encima para lograr un efecto suave.
Ordena capas y nómbralas, por ejemplo: background y blur. Agrupa con command G.
Si el blur ralentiza, convierte a bitmap: Layer > Flatten Selection to Bitmap. Ganarás rendimiento sin perder el look.

¿Cómo llenar contenido y prototipar con plugins y InVision?

Acelera el llenado de contenido con plugins. Instala Sketch Toolbox para gestionar complementos y agrega Content Generator.

Selecciona los contenedores y aplica fotos de naturaleza o urbanas desde el menú de plugins. Un clic y listo: contenido realista para evaluar el diseño.
Para el avatar, prueba Content Generator > personas > mujer u hombre, o practica máscaras con tus propias imágenes.
Copia la cámara de iOS 9 desde un archivo de recursos (como el set de Menk2) y evita diseñarla desde cero.
Ordena el archivo: renombra capas (por ejemplo, avatar, fotografías) y agrupa con command G para que otros entiendan la estructura.
Crea un proyecto iPhone vertical en InVision llamado Platzygram. Guarda el archivo fuente en la carpeta de assets. Pon un guion al inicio del nombre de los artboards que no deban sincronizarse para que InVision los ignore.
Usa un nombre claro para el archivo maestro, por ejemplo, Platzygram master, y sincroniza para ver las pantallas en el proyecto.

¿Te gustaría ver más trucos de símbolos, máscaras o plugins para Sketch e InVision? Cuéntame en los comentarios qué parte quieres profundizar o qué atajos te funcionan mejor.

Resumen

¿Qué recursos y templates de iOS aceleran tu diseño en Sketch?

¿Cómo crear wireframes rápidos con artboards y grids?

Presiona A para crear un artboard iPhone 6. También puedes sumar iPhone 6 Plus o iPhone 5.
Traza un feed con fotos cuadradas y una barra inferior de menús.
Diseña el perfil con un avatar grande de 140 px y un grid de fotos.
Mantén visible la barra inferior y alarga el artboard hacia abajo para duplicar contenido cuando haga falta.
Recuerda: un wireframe define el layout básico, no el estilo final.

¿Qué atajos y alineación te ahorran tiempo?

Mueve el canvas con la barra espaciadora presionada y arrastra.
Duplica con la tecla control al arrastrar.
Mide espacios en píxeles con option al pasar el cursor entre formas.
Usa el botón de alinear al centro del artboard para precisión inmediata.
Aprovecha distribución y alineación para ordenar grids en segundos.

¿Cómo aplicar símbolos, tipografías y máscaras para un perfil atractivo?

Importante: al prototipar en InVision, la status bar se agrega automáticamente, así que no hace falta dibujarla ahora.

¿Cómo funcionan los símbolos y el control de la barra?

Edita una barra que sea símbolo y verás cambios reflejados en todas las vistas.
Arrastra el texto del logo dentro del símbolo para que se replique.
Cambia el color de la barra y mantén coherencia visual en todas las pantallas.

¿Qué tipografías usar en iOS 9 y cómo jerarquizar texto?

Para el logotipo, instala Grand Hotel y escribe el nombre, por ejemplo, Platsigram con la tecla T.
Para interfaz de iOS 9, instala San Francisco: SF UI Display para títulos y SF UI Text para texto corrido. San Francisco Compact es para Apple Watch.
Un título a 18 px funciona bien para encabezados del perfil.
Añade métricas del usuario: 23 fotos, 5 followers, 230 following. Alinea al centro y ajusta peso tipográfico para marcar jerarquía.

¿Cómo enmascarar fotos y aplicar background blur sin perder rendimiento?

Enmascara el avatar con un círculo: selecciona foto + forma y aplica máscara.
Crea una imagen de fondo grande detrás de la barra y el encabezado del perfil.
Agrega un rectángulo sin relleno ni borde con background blur encima para lograr un efecto suave.
Ordena capas y nómbralas, por ejemplo: background y blur. Agrupa con command G.
Si el blur ralentiza, convierte a bitmap: Layer > Flatten Selection to Bitmap. Ganarás rendimiento sin perder el look.

¿Cómo llenar contenido y prototipar con plugins y InVision?

Acelera el llenado de contenido con plugins. Instala Sketch Toolbox para gestionar complementos y agrega Content Generator.

Selecciona los contenedores y aplica fotos de naturaleza o urbanas desde el menú de plugins. Un clic y listo: contenido realista para evaluar el diseño.
Para el avatar, prueba Content Generator > personas > mujer u hombre, o practica máscaras con tus propias imágenes.
Copia la cámara de iOS 9 desde un archivo de recursos (como el set de Menk2) y evita diseñarla desde cero.
Ordena el archivo: renombra capas (por ejemplo, avatar, fotografías) y agrupa con command G para que otros entiendan la estructura.
Crea un proyecto iPhone vertical en InVision llamado Platzygram. Guarda el archivo fuente en la carpeta de assets. Pon un guion al inicio del nombre de los artboards que no deban sincronizarse para que InVision los ignore.
Usa un nombre claro para el archivo maestro, por ejemplo, Platzygram master, y sincroniza para ver las pantallas en el proyecto.

¿Te gustaría ver más trucos de símbolos, máscaras o plugins para Sketch e InVision? Cuéntame en los comentarios qué parte quieres profundizar o qué atajos te funcionan mejor.

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

Recursos gratuitos para acelerar diseño Sketch

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos