Design Thinking - Interfaces - Sesion02

Diseño de Interfaces para Design Thinking
Sesión 2
Balsamiq – Tópicos especiales
Figma
Parte 1:
Temas para ésta sesión 4. Tópicos especiales de Mockup Balsamiq
a. Cambiar la piel (Skin)
Parte 1: b. Diseñar una Landing Page

c. Diseñar estadísticas y Dashboards
Balsamic Mockup – Prototipeo rápido
d. Diseñar un e-Commerce
e. Diseñar Feedback del cliente
2
Parte 2:
1. Introducción a FIGMA
a. Canvas y Frames
b. Herramientas Básicas
2. Panel de Propiedades
Temas para ésta sesión a. Aplicar Propiedades en FIGMA
b. Alineación
Parte 2: c. Coordenadas y tamaño
Figma – Prototipeo de Alto Impacto d. Relleno

e. Borde y Efectos
f. Constraints / Restricciones
g. Layout grid y propiedades a Frames
h. Guía y Reglas
i. Creando una interfaz para Exportar
j. Export y Slice Tool
3
Tópicos especiales de Mockup Balsamiq
Controles - Botones
4
Persona del Landing Page de cursos OnLine
● NOMBRE: Paola Medina (38 años)
● LEMA: Mamá que se respeta, puede con todo
Personal y Familiar
● Vive con su esposo e hijo de 11 años
● Esposo trabaja fuera de casa
● Suele conversar con sus padres que viven solos
● Le gusta ver TV con su familia
● Odia las noticias por que son muy negativas
● Ya no cuenta con ayuda de nadie para que la ayude en la casa por la pandemia
● Se siente mal por no poder dedicar más tiempo a ayudar a su hijo en sus
estudios (le estresan esos pensamientos)
● Le gusta música de los 80’ y 90’
● Extraña poder viajar con la familia o su esposo
● Le gustaría que su esposo la ayude con los quehaceres domésticos
Laboral Social
● Trabaja en una compañía de seguros como Analista Senior ● Se relaciona con amistades por chats, video llamadas,
● En esta situación, se esta esforzando mucho para poder conseguir un ascenso llamadas o redes sociales, pero cada vez menos
laboral ● Sus compañeros de trabajo se han convertido en su vida
● Tiene temor a la reducción de puestos en la empresa social por la pandemia (por el tiempo que pasa en
● Trabaja de lunes a viernes pero dedica algunas horas del fin de semana a teletrabajo)
avanzar temas pendientes. ● Extraña poder reunirse con amigas al terminar un día de
● Considera que el teletrabajo le exige mas horas de las que debiera y en trabajo.
ocasiones es más estresante que trabajo presencial. ● Extraña salir de compras 5
● Siente que trabaja bajo mucha presión, todo lo quieren para ayer
Diseñar una Landing Page
6
CTA: Call To Action
Elementos esenciales de una Landing Page exitosa Cómo crear CTA en una Landing Page
1.
Seleccionar
Media
2. Luego Image y
arrastrar al lienzo
7
8
Diseñar estadísticas y DashBoards
9
Diseñar un e-Commerce
10
Diseñar Feedback del cliente
11
Introducción a FIGMA
¿Qué es Figma?
Software para diseñar interfaces. Es probablemente la mejor aplicación para proyectos de diseño colaborativo en
equipos.
Figma brinda todas las herramientas necesarias para la fase de diseño del proyecto, incluidas las herramientas
vectoriales capaces de ilustrar completamente, así como aquellas para la creación de prototipos y la generación
de código para el traspaso (hand-off).
Figma funciona en línea

Aunque Figma funciona en el navegador, también hay una versión de escritorio para Windows y Mac OS.
Posiblemente se trate aplicaciones “empaque” que ejecutan un navegador dentro de ellas; pero ya sea ese el caso
o no, Figma siempre se ejecuta en línea dentro de esas aplicaciones.
Nota: Si pierdes la conectividad, puedes seguir trabajando en cualquier documento que ya hayas abierto.
12
Instalación https://www.figma.com/downloads/
13
Canvas (Lienzos) y Frames (Marcos)
El Canvas (lienzo en Figma) es el telón de fondo en el que Se puede agregar capas al Canvas. Si se diseña para
viven todos sus Frames(marcos), grupos y otras capas. un tamaño de pantalla específico o par aun
Tiene un tamaño finito de -65.000 a +65.000 en cada eje. dispositivo, es posible crear un contenedor para los
diseños. Aquí es donde entran los Frames(marcos).
El color de fondo predeterminado del Lienzo será Los Frames (marcos) permiten elegir un área del
#E5E5E5, pero puede cambiarse el color de fondo en el Canvas para crear los diseños.
Panel de Propiedades deseleccionando las Capas y Se puede anidar marcos dentro de otros marcos. Esto
haciendo clic en el selector de color etiquetado como permite crear diseños más complejos que funcionan
"Fondo". en conjunto.
Crear Frames (marcos) en el Canvas con la herramienta de

marcos:
Usa los atajos de teclado F o A

Seleccione la herramienta de marco en la barra de
herramientas: 14
1. Clic en
Frame
2.
Redimensione
el Frame aquí
15
Propiedades de un Frame
Hay algunas propiedades asociadas con los Frames. Los Frames admiten las siguientes propiedades.
• Radio de esquina: redondee la esquina de un marco para crear bordes más suaves.
• Clip de contenido: oculte cualquier objeto dentro del marco que se extienda más allá de los límites del marco.
• Cuadrículas de diseño: cree pautas para ayudar con la estructura visual de sus diseños.
• Diseño automático: cree Frames dinámicos que respondan a su contenido
• Relleno: aplique un relleno sólido, degradado, imágenes (PNG, JPEG, GIF, TIFF y WEBP) a un marco.
• Trazo: agregue trazos a un marco para crear un borde o contorno
• Efectos: agregue una sombra o desenfoques a un marco
16
Propiedades de un Frame
Hay algunas propiedades asociadas con los Frames. Los Frames admiten las
siguientes propiedades.
• Radio de esquina: redondee la esquina de un marco para crear bordes más

suaves.
• Clip de contenido: oculte cualquier objeto dentro del marco que se extienda
más allá de los límites del marco.
• Cuadrículas de diseño: cree pautas para ayudar con la estructura visual de
sus diseños.
• Diseño automático: cree Frames dinámicos que respondan a su contenido
• Relleno: aplique un relleno sólido, degradado, imágenes (PNG, JPEG, GIF, TIFF
y WEBP) a un marco. 1. Dar borde
• Trazo: agregue trazos a un marco para crear un borde o contorno redondeado
• Efectos: agregue una sombra o desenfoques a un marco
17
Funcionalidad extra
Los marcos le permiten acceder a funciones adicionales en Figma. Necesitará utilizar Frames para utilizar las
siguientes características o funciones:
• Cuadrículas de diseño: aplique cuadrículas, columnas y / o filas transparentes a los marcos para proporcionar
una estructura visual
• Restricciones: defina cómo responden los objetos secundarios cuando cambia el tamaño de un marco. Aplicar
restricciones a los objetos dentro de un marco.
• Diseño automático: agregue diseño automático a los marcos para crear diseños dinámicos que respondan a su
contenido
• Creación de prototipos: cree prototipos interactivos que se muevan entre marcos en su lienzo
• Un marco es un objeto padre. Esto significa que puede controlar o influir en cualquier objeto secundario que
coloque en él.
18
Canvas (Lienzos) y Frames (Marcos) – Frames anidados (Nested Frames)
19
Herramientas básicas
Rectángulos, Polígonos, Líneas, Flechas, Elipse, Estrella e
Imágenes
1. Clic para
modificar la
esquina y
Polígono redondearla
2. Clic para
cambiar el
número de
lados
Triángulo
20
Laboratorio: Diseñar una aplicación Web con Figma
1. Se visualizará un vídeo tutorial hasta que termine

2. Se realizará todos los pasos que muestra el vídeo
• En caso de dudas pausar el vídeo
• En caso de tener problemas consultar al profesor
21
Laboratorio: Ver vídeo y realizar lo mismo que muestra el vídeo
Como diseñar una Web | tutorial en Figma
22
FIGMA - Panel de Propiedades
Aplicar Propiedades en FIGMA
Los objetos pueden tener una serie de propiedades aplicadas a ellos en Figma. En esta parte de nuestra serie de
trucos y consejos de Figma veremos como trabajar con las propiedades, ¡mejor y más rápido!
1. Copiar una o varias propiedades entre objetos
En Figma puedes copiar todas las propiedades de un objeto, o puedes copiarlas de una en una.
• Para copiar todas las propiedades de un objeto: selecciónalo, luego ve a Edit (Edición) > Copy Properties
(Copiar propiedades), o usa el atajo (CTRL o CMD) + ALT + C, luego selecciona tu nuevo objeto y ve a Edit >
Paste Properties (Pegar propiedades) o pulsa (CTRL o CMD) + ALT + V.
• Para copiar solo una propiedad de un objeto:
• Selecciona el objeto
• Ve al panel Properties (Propiedades) y haz clic a la izquierda de una propiedad (como Fill (Rellenar)).
• Esto seleccionará esa propiedad, así ́ que puedes pulsar (CTRL o CMD) + C para copiar. (CTRL o CMD) +
V pegará esa propiedad en el objeto seleccionado.
• Si mantienes pulsada la tecla SHIFT mientras seleccionas las propiedades individuales, podrás especificar
exactamente las que quieres copiar. 23
24
2. Suavizar las esquinas de un objeto con "Squircles"
• Se redondea las esquinas de un objeto haciendo clic en la opción Independent Corners (Esquinas

independientes) del panel de propiedades para controlar cada esquina de forma independiente.
• Luego junto a los valores del radio usa el icono del menú́ para abrir el control deslizante Corner Smoothing
(Suavizado de esquinas).
25
3. Cambiar la cursiva, el subrayado y la negrita

• Se puede utilizar atajos para alternar entre cursiva (CTRL o CMD) + i, subrayado (CTRL o CMD) + u, y negrita
(CTRL o CMD) + b cuando se selecciona un objeto de texto.
4. Valores de scrub
• En lugar de escribir valores, se puede
restregar los valores en un campo de
configuración manteniendo pulsada la
tecla ALT o la tecla OPTION (si usas iOS), y
luego arrastrando a la izquierda o a la
derecha en ese campo.
26
Alineamiento y redimensionamiento
1. Formas inclinadas para facilitar el redimensionamiento isométrico
• Si trabajas con ilustraciones isométricas en Figma, hay una gran manera de inclinar tus formas y ayudar a redimensionar las
cosas de forma más intuitiva.
• Para ello, toma un objeto (por ejemplo, un cuadrado) y rótalo 45°, mantén presionada la tecla SHIFT y arrastra la esquina
para rotarlo incrementalmente.
• Para aplastar ese cuadrado al revés, primero hay que agruparlo (por sí mismo), restableciendo efectivamente el
cuadro de límites en el proceso. Ahora, cuando lo selecciones, podrás aplanarlo en los ejes X e Y.
• Para cambiar sus dimensiones sin dejar de ser fiel a sus líneas isométricas, desagruparlo, y luego
redimensionarlo con las manijas.
27
2. Diseño rápido de columnas
• Se puede generar rápidamente un diseño de columna utilizando el snapping y la distribución. Por ejemplo,
encajar dos cuadrados a los lados de una artboard, y luego empujar cada uno ligeramente hacia adentro.
• Añade algunas otras formas entre ellos, luego selecciona todo el lote y ve al Main menu (menú principal) >
Arrange (Organizar) > Distribute Horizontal Spacing (Distribuir el espacio horizontal). ¡Bingo! Un diseño de
columna perfecto para trabajar.
28
Ejemplo:
29
3. Eliminar el espacio entre los artículos
• Selecciona los objetos, y luego ve al Main menu > Arrange > Pack Horizontal (Agrupar horizontal) para quitar
todo el espacio horizontal. Lo mismo es posible hacerlo verticalmente, yendo al Main menu > Arrange > Pack
Vertical (Agrupar vertical).
• Combina estas opciones con las herramientas de alineación para ayudarte a crear diseños basados en filas y
columnas.
30
4. Hacer la alineación extra precisa
• Puedes obtener ayuda para alinear los objetos con precisión asegurándote de que las reglas estén activas
(SHIFT + R) y luego, cuando muevas una forma, verás su ancho y alto representados en las reglas.
5. AutoLayout
• Es una característica revolucionaría en el mundo del diseño web con la cual podemos crear frames con
tamaños dinámicos en Figma. El tamaño de estos frames dependerá del contenido que haya dentro de ellos.
• Vídeo de AutoLayout
31
Coordenadas y tamaño
1. Predeterminado: Clic y arrastrar
Para cambiar el tamaño de un elemento necesitas seleccionarlo, usar uno de los
controles de transformación y arrastrar el objeto según lo necesites. Sus dimensiones
se mostrarán en la información sobre las herramientas a medida que lo hagas.
Presiona SHIFT mientras haces esto y restringirás las

proporciones.
Al hacer clic y arrastrar no funciona

Verás que a veces este enfoque no funciona como cabría
esperar; algunas veces falla en objetos con trazos. Por ejemplo,
este icono, cuando se escala con la misma técnica, se
distorsiona por completo porque el trazo permanece del mismo
ancho:
32
2. Herramienta de escala de Figma
• La herramienta de escala en Figma se puede encontrar aquí (o mediante el atajo de teclado K):
• El cursor cambiará ligeramente, y ahora puedes hacer clic y arrastrar los controles de la misma manera,
pero conservar la proporción del ancho del trazo a medida que cambias el tamaño del objeto.
33
3. El inspector de propiedades
Si deseas cambiar el tamaño de un objeto con extrema precisión, busca los campos de anchura y altura en el
inspector:
Arrastra los valores con el cursor del ratón o introduce

los valores con el teclado.
Bono de Matemáticas
Se puede realizar operaciones matemáticas en los
campos del inspector. Introducir 300+150 se resolverá
en 450 (por ejemplo) y todas las demás operaciones
comunes funcionarán muy bien.
34
4. Atajos de teclado
• Se puede usar atajos de teclado. Selecciona un objeto y, a continuación, usar CTRL en Windows o COMMAND
en Mac y, a continuación, utiliza las teclas de flecha para aumentar el ancho o alto del objeto 1px a la vez.
Presionar SHIFT al mismo tiempo aumentará el incremento a 10px para acelerar las cosas.
35
Relleno
Comenzaré creando un objeto en el lienzo, luego iré a la opción Relleno (Fill), en el panel de propiedades
a la derecha, y seleccionaré relleno de Imagen (Image) como en el ejemplo.
36
Relleno
Luego, podrás subir una imagen de tu elección y tendrás 4 opciones de tipo de relleno, como:
1. Relleno (Fill)
• Estará seleccionado de forma predeterminada. Esto garantiza que la
imagen va a rellenar todo el objeto.
• Si el objeto es más ancho o alto que la imagen, esta se estirará o recortará
según el objeto, pero siempre permanecerá centrada y dejará visible la
mayor parte posible:
37
Relleno
2. Ajustar (Fit)
Si cambiáramos el tipo de relleno a Ajustar (Fit) en este punto, podremos
ver la imagen en el objeto contenedor, incluso si esto significa que parte del
objeto no tendrá relleno.
38
Relleno
3. Recortar (Crop)
Se comporta de manera similar a Fill (relleno por defecto), con la diferencia
de que te ofrece herramientas de posicionamiento para personalizar el
recorte por ti mismo. Como se ve en el ejemplo de abajo, podrás escalar y
mover el objeto sobre la imagen como si fuera una ventana:
39
Relleno
4. Mosaico (Tile)
Se repite la imagen una y otra vez. Esto se demuestra mejor en la imagen de abajo, donde podemos ver una
imagen con un mosaico que se repite:
40
Borde y Efectos
Veremos cómo personalizar los bordes de los objetos y darle efectos a nuestros objetos en Figma:
1. Bordes redondeados
• Seleccionar un objeto
• En la propiedades ir a Design, cambiar de valor a
Corner Radius
2. Vídeo sobre darle efectos a los objetos (Efecto Hover)
41
Constraints / Restricciones
Los Constraints nos van a permitir definir cómo queremos que se comporte la distancia de las capas a
los márgenes del frame cuando redimensionamos un frame. Podemos crear diseños responsive.
Como ejercicios para practicar lo que hemos visto en este tema, realizaremos lo siguiente:
• Crear el texto «Descargar». Añade Auto Layout con Shift + A para crear un botón.
• Cámbiale el color de fondo y redondea las esquinas.
• Selecciona el frame del botón y añadir Auto Layout.
• Seleccionar el frame del botón y duplica ese botón con CMD + D (en Mac) o CTRL + D (en Windows).
• Desde las opciones del panel de la derecha, Auto Layout, colocar los dos botones en horizontal.
• Cambiar el texto de uno de los botones para comprobar que el Padding sigue siendo el mismo.
• Reducid el espacio entre los dos botones a 8 píxeles.
• Crear un frame. Dentro de ese frame, crear una estrella (Star) que esté restringida (Constraints) a 24 píxeles de distancia de la
parte superior del frame (Top) y a 18 píxeles de la parte derecha (Right).
• Redimensionar el frame y, para comprobar que la estrella se mantiene restringida a esa distancia, averiguar las distancias
seleccionando la capa de la estrella y, pulsando la tecla Alt, situando el cursor encima del frame, sin hacer clic.
• Crear un frame y añádele una rejilla de 12 columnas (Column), de tipo (Type) Stretch, con 8 píxeles de margen (Margin) y 8
píxeles de espacio entre columnas (Gutter).
42
Figma nos facilita muchísimo la vida a la hora de crear buenos diseños: con consistencia y responsive.
Layout Grid y propiedades a Frames
Un Layout Grid posee cuadrículas, columnas y filas
Al diseñar para la pantalla, hay que lidiar con una gran cantidad de diseños. Para permitir
que nuestros diseños se adapten, necesitamos precisión y flexibilidad.
Pixel Grid nos brinda precisión y control sobre la ubicación. Un Layout Grid nos da mayor
flexibilidad a la hora de implementar nuestros diseños.
¿Qué son Layout Grid (las cuadrículas de diseño)?

• Las cuadrículas de diseño nos ayudan a alinear objetos dentro de un marco. Otorgan
estructura visual a los diseños. Ayudan a que sigan siendo lógicos y coherentes en
diferentes plataformas y dispositivos.
• Las cuadrículas de diseño no dependen de la cuadrícula de píxeles. Esto significa que no

dependen de una resolución o dimensiones específicas.
• Solo puede aplicar cuadrículas de diseño a marcos. Puede ser un marco de nivel superior 43
o un marco anidado dentro de otro marco.
Los Layout Grid nos permiten:
• Establezcer coherencia en múltiples plataformas.
• Tome menos decisiones al definir diseños.
• Reduzca el tiempo necesario para definir diseños para maquetas o wireframes.
• Admite diversas técnicas de diseño, p. Ej. galerías, iconos o diseños de página completos.
¿Qué son Layout Grid (las cuadrículas de diseño)?
• Las cuadrículas de diseño nos ayudan a alinear objetos dentro de un marco. Otorgan estructura visual a los
diseños. Ayudan a que sigan siendo lógicos y coherentes en diferentes plataformas y dispositivos.
• Las cuadrículas de diseño no dependen de la cuadrícula de píxeles. Esto significa que no dependen de una
resolución o dimensiones específicas.
• Solo puede aplicar cuadrículas de diseño a marcos. Puede ser un marco de nivel superior o un marco anidado
dentro de otro marco.
44
Aplicar cuadrículas de diseño
• Puede aplicar un Layout Grid a cualquier marco. Recuerde
que los componentes también son marcos, por lo que
también puede aplicarlos a los componentes.
• Puede encontrar la configuración del Layout Grid en el Panel

de propiedades:
45
Para aplicar una cuadrícula de diseño:
1. Seleccione el marco en el panel Capas o en el lienzo:
2. Haga clic en el icono + junto a Layout Grid en el Panel de

propiedades
3. Se aplicará una cuadrícula uniforme al marco de forma

predeterminada
4. Luego puede hacer clic en el icono de Grid para abrir la

configuración de Layout Grid y actualizar las propiedades:
46
Guía y Reglas
Cuando trabajan varios diseñadores o programadores en un proyecto muy grande, lo mejor es crear una guía de
estilo para que nadie se salga del guion y acabe diseñando algún componente fuera de tono en comparación al
resto. Para evitar esto, existen las guías de estilos.
Así que cuando llega alguien nuevo al proyecto, le podemos dar la bienvenida con una bonita guía de estilos.
47
Creando una interfaz para Exportar
¿Cómo exportar en Figma?
48
Export y Slice Tool
La Slice Tool (herramienta de corte) se encuentra en el menú desplegable Herramienta de región en la barra de
herramientas.
• Permiten especificar una región de la pantalla para exportar, incluso si no están organizados en un solo grupo.
Simplemente arrastre un sector alrededor de la región que desea exportar y agregue una configuración de
exportación al objeto de sector.
• Con "Sólo contenido" habilitado, Slice exportará su capa principal y los elementos secundarios de ese padre.
Con "Sólo contenido" deshabilitado, se exportará todo lo que se superponga al sector.
• Estos son útiles porque puede mostrarlos / ocultarlos todos rápidamente y pueden agruparse fuera de otro
contenido o colocarse en la parte superior de la pila de capas.
• Las rebanadas también te permiten controlar el relleno. De lo contrario, el relleno se calcula a partir de los
límites de la forma general. Este último se ajusta cuando la forma cambia de tamaño, mientras que el corte es
absoluto.
• Los marcos son similares a los sectores, pero los marcos normalmente contienen y recortan las capas
secundarias, tienen un fondo, efectos, etc. Los sectores son simplemente un límite rectangular más ligero que
existe fuera de la jerarquía para la exportación.
49
LinkedIn
Vincular con perfil de LinkedI
n
Twitter
@jcvgmail
Gracias
Correo electrónico
jose.canchucaja@gmail.com
Teléfono
+51 945336834
50

Design Thinking - Interfaces - Sesion02

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Design Thinking - Interfaces - Sesion02

Cargado por

Copyright:

Formatos disponibles

Diseño de Interfaces para Design Thinking

Parte 1: b. Diseñar una Landing Page

Figma – Prototipeo de Alto Impacto d. Relleno

Figma funciona en línea

Crear Frames (marcos) en el Canvas con la herramienta de

Usa los atajos de teclado F o A

• Radio de esquina: redondee la esquina de un marco para crear bordes más

1. Se visualizará un vídeo tutorial hasta que termine

Como diseñar una Web | tutorial en Figma

2. Suavizar las esquinas de un objeto con "Squircles"

• Se redondea las esquinas de un objeto haciendo clic en la opción Independent Corners (Esquinas

3. Cambiar la cursiva, el subrayado y la negrita

Presiona SHIFT mientras haces esto y restringirás las

Al hacer clic y arrastrar no funciona

Arrastra los valores con el cursor del ratón o introduce

2. Vídeo sobre darle efectos a los objetos (Efecto Hover)

¿Qué son Layout Grid (las cuadrículas de diseño)?

• Las cuadrículas de diseño no dependen de la cuadrícula de píxeles. Esto significa que no

¿Qué son Layout Grid (las cuadrículas de diseño)?

• Puede encontrar la configuración del Layout Grid en el Panel

1. Seleccione el marco en el panel Capas o en el lienzo:

2. Haga clic en el icono + junto a Layout Grid en el Panel de

3. Se aplicará una cuadrícula uniforme al marco de forma

4. Luego puede hacer clic en el icono de Grid para abrir la

¿Cómo exportar en Figma?

También podría gustarte