Diseño de Interfaces para Design Thinking

Sesión 4
Figma – Flujo de Trabajo (Work Flow)
 Parte 2:
Temas para ésta sesión 3. Organización
a. Introducción
b. Concepto de Capas
Parte 3: c. Concepto de Grupos
Figma – Organización d. Ejemplo de Capas y Grupos
e. Concepto de Páginas y ejemplo
f. Componentes

g. Atajos de Teclado

2
FIGMA – Flujo de Trabajo ( Work Flow)
Introducción

Vamos a planificar el trabajo para diseñar una aplicación que sirve tanto para Web cómo para dispositivos móviles,
luego veremos los estilos, Wireframes que deberíamos tener, componentes para que después podamos crear el
diseño de los Wireframes planificados y la navegación entre ellos.

Tareas a realizar SMS

• Planeación • Mockups - Creación de pantalla Registro
• Guía de estilos Exitoso
• Wireframes • Mockups - Creación Pantalla Principal
• Mockups - Creación pantalla bienvenida • Mockups - Creación pantalla contactos
• Mockups - Creación pantalla Login • Mockups - Creación pantalla
• Mockups - Creación Pantalla conversación
WalkThrough • Prototipando
• Mockups - Creación de pantalla • Figma Mirror
Registrarse • Compartiendo nuestro trabajo
3
• Mockups - Creación de pantalla Código
FIGMA – Flujo de Trabajo ( Work Flow)
Planeación

Marco de Trabajo y de Planeación: Atomic Design

Atomic Design es un framework teórico y un marco de construcción para el sistema de diseño, el cual es una
colección de reglas, restricciones y principios para implementar el diseño y código de nuestro producto. Está
herramienta busca definir nuestro diseño a través de diferentes componentes:

• Átomos: son la unidad más fundamental de una interfaz, puede ser un button o un label.
• Moléculas: son la unión de varios átomos, por ejemplo, un formulario.
• Organismos: es la unión de varias moléculas, a este punto la interfaz empieza a tener formas definidas, por
ejemplo, una cabecera de una página o de una pantalla (header).
• Templates: es lo que denominamos Wireframe, se pueden empezar a realizar pruebas de concepto. Es la
unión de varios organismos.
• Páginas: también llamados mockups de alta fidelidad, es cuando vacías información real dentro de un
template.

4
FIGMA – Flujo de Trabajo ( Work Flow)
Planeación

Plan
Vamos a realizar el prototipo de presentación final para ParkeaTE.com, cuyo prototipo de validación funcional lo
hemos desarrollado con Balsamiq Mockup.

5
FIGMA – Flujo de Trabajo ( Work Flow)
Guía de estilos

En éste punto vamos a crear nuestros estilos para los colores a utilizar, así cómo los textos, tipos de botones y las
cabeceras de los Wireframes (las pantallas) que vamos a crear.

6
FIGMA – Flujo de Trabajo ( Work Flow)
Guía de estilos

Colores

7
FIGMA – Flujo de Trabajo ( Work Flow)
Guía de estilos

Textos y Botones

8
FIGMA – Flujo de Trabajo ( Work Flow)
Guía de estilos

Cabeceras: Diseño libre de sus propias cabeceras tanto para sus diseños de páginas Web lo mismo que sus diseños
para las aplicaciones móviles

9
FIGMA – Flujo de Trabajo ( Work Flow)
Wireframes

• Bienvenida
• Login
• WalkThrough
• Registrarse
• Código SMS
• Registro Exitoso
• Principal
• Contactos
• Conversación

10
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación pantalla de bienvenida

Laboratorio: Debemos lograr el diseño que se muestra en la figura o algo similar:

PASOS:

1. Incorporar una imagen de un estacionamiento

2. El logo de ParkeaTE
3. Dos botones:
a) More Info
b) Login

11
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación pantalla Login

Laboratorio: Debemos lograr el diseño que se muestra en la figura o algo similar:

PASOS:

1. Incorporar dos botones

a) Sing up with email
b) Login
2. Dos enlaces y 2 imágenes:
a) Continue with Google
b) Continue with Facebook
3. Un texto: ¿Eres usuario de ParkeaTE?

12
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación Pantalla WalkThrough

Laboratorio: Hacer la navegación desde la primera pantalla mostrada hasta la ultima de ellas.

13
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación de pantalla Registrarse

Laboratorio: Debemos lograr el diseño que se muestra en la figura o algo similar:

PASOS:

1. Incorporar etiquetas y textos para solicitar:

a) Sing up with email
b) Login
c) Continue with Google
d) Continue with Facebook
2. Un enlace para continuar el registro: Siguiente

14
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación de pantalla Código SMS

Laboratorio: Diseño libre, el participante del curso tiene la libertad de definir ésta pantalla a su criterio.

15
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación de pantalla Registro Exitoso

Laboratorio: Diseño libre, el participante del curso tiene la libertad de definir ésta pantalla a su criterio.

16
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación Pantalla Principal

Laboratorio: Debemos lograr el diseño que se muestra en la figura o algo similar:

PASOS:

1. Debe mostrar las iniciales del cliente dentro de un círculo

2. Mostrar un saludo: Hola Luis por ejemplo
3. Mostrar debajo de lo anterior el menú de opciones disponibles

17
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación pantalla Contactos

Laboratorio: Diseño libre, el participante del curso tiene la libertad de definir ésta pantalla a su criterio. Puede
tomarse cómo referencia los ejemplos de Balsamiq Mockup: 100Wrireframes.com Templates

18
FIGMA – Flujo de Trabajo ( Work Flow)
Mockups - Creación pantalla Conversación

Laboratorio: Diseño libre, el participante del curso tiene la libertad de definir ésta pantalla a su criterio. Puede
tomarse cómo referencia los ejemplos de Balsamiq Mockup: 100Wrireframes.com Templates

19
 FIGMA – Flujo de Trabajo ( Work Flow)
Prototipando
Es crear prototipos que se sientan como la
experiencia real del usuario / cliente.
Es convertir archivos de diseño estático en una
experiencia interactiva, sin necesidad de
programar..

• Construcción intuitiva: simplemente

conecte los elementos de la interfaz de
usuario y elija sus interacciones y
animaciones.

• Interacciones: defina interacciones sutiles,

como al hacer clic, mientras se desplaza,
mientras se presiona un botón, y más.

• Optimizado para dispositivos móviles: los

detalles como marcos de dispositivos y
desplazamiento de impulso hacen que sus
prototipos se sientan como una experiencia 20
real.
FIGMA – Flujo de Trabajo ( Work Flow)
Figma Mirror

Es un aplicativo móvil
que puedes descargar,
para ver tu diseño en tu
celular.

21
FIGMA – Flujo de Trabajo ( Work Flow)
Compartiendo nuestro trabajo

Crear y Gestionar Equipos

Para empezar a trabajar con equipos de Figma primero debe crear un nuevo equipo. Inicie sesión en
Figma y presione el botón de Nuevo Equipo en la esquina inferior izquierda de la interfaz:

22
FIGMA – Flujo de Trabajo ( Work Flow)
Compartiendo nuestro trabajo

Crear y Gestionar Equipos

Para empezar a trabajar con equipos de Figma primero debe crear un nuevo equipo. Inicie sesión en
Figma y presione el botón de Nuevo Equipo en la esquina inferior izquierda de la interfaz:

23
 LinkedIn
Vincular con perfil de LinkedI
n

Twitter
@jcvgmail

Gracias
Correo electrónico
jose.canchucaja@gmail.com

Teléfono
+51 945336834

24