V

INTRODUCCIÓN A

UX
C

2. Figma

Figma es una herramienta que es ideal para poder realizar wireframes, mockups y
prototipos. Al ser una herramienta gratuita facilita que no tengas que comprar una licencia
o pagar una membresía, sino que puedas utilizarla con facilidad desde tu computador :
https://www.figma.com/

c. ¿En qué etapas aplica?

Figma la puedes utilizar principalmente en las etapas de prototipado y testeo:

Prototipado: Figma te permitirá realizar desde wireframes a mockups, es decir, es una

herramienta que es útil tanto para generar prototipos de alta o baja fidelidad. Figma es una
herramienta que nace con énfasis para poder generar diseño web, por lo cual, si te
encuentras diseñando pantallas para un producto digital, seguro será tu mejor aliado.

Testeo: Figma a través de los plugins que son herramientas externas, seguras, no
directamente pertenecientes a Figma, pero que complementan la plataforma, te permite
encontrar herramientas para realizar prototipos animados, que faciliten al usuario
entender tu propuesta y brindar retroalimentación más acertada.

d. Su uso práctico en el UX

Registro: Al ingresar a la página principal: https://www.figma.com/ , encontrarás la opción

“Get Started” . En “Get Started” se abrirá una ventana donde ingresas tus datos o creas tu
cuenta conectándote a tu correo de Google.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Una vez registrados tus datos se te pedirá llenar tres datos sobre tu perfil: Nombre, a qué
te dedicas y para qué usarás la plataforma. Una vez los llenes abrirás tu cuenta. Esto no te
genera ningún costo en ese momento ni a futuro:

Una vez que haz abierto tu cuenta te aparecerá la pantalla principal con un mensaje de
bienvenida, para que puedas crear tu equipo y puedas añadir personas, si deseas, a tu
equipo, sino puedes darle clic a la opción “Do this later”

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Una vez has creado tu equipo te pedirá seleccionar un plan, puedes escoger la opción
Starter que es la opción gratuita o la Profesional, con costo de $15 al mes, que te abrirá
otras opciones de funcionalidades.

Con la opción Starter, tendrás lo básico para realizar tus proyectos: Poder generar archivos
ilimitados en borrador, tendrás cada vez solo 3 archivos de diseño activos, es decir, si ya
superas el número, uno previo se bloqueará. De igual manera, 3 archivos editables de
FigJam, que es una herramienta similar a Miro, pero que no la abarcaremos en este módulo,
pero podrás ya explorar con ciertas nociones que tienes ya de Miro.

Finalmente podrás tener un proyecto activo, al crear otro proyecto , tu proyecto previo se
bloqueará. Y finalmente las versiones de los documentos tendrán un historial de 30 días.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Si bien no es el plan completo, con este plan podrás empezar a explorar y si ya deseas
profundizar en el campo de UX, considerar a futuro en cambiar de plan.

Una vez has escogido tu plan, decidirás que deseas empezar a hacer y nos iremos por la
opción “Design with Figma”

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Ya que lo has elegido se te desplegarán diversas opciones de Plantillas con las que podrás
empezar, si deseas, lo cual facilitará tu trabajo al momento de empezar e ir entendiendo la
plataforma:

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

En este caso, escogeremos el template de “Desktop” para empezar. Con ello se abrirá otra
pestaña con un marco de trabajo listo para empezar a diseñar.

Cursor: Aquí también encontraremos la función del cursor, que tiene 2 funcionalidades
“Move” para mover o “Scale” para seleccionar elementos y cambiar sus dimensiones.
puedes cambiarlos al dar clic en la flecha hacia abajo, junto al icono del cursor:

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Marco: En este programa, es importante siempre generar Marcos, para delimitar el espacio
de trabajo donde se generarán las pantallas de los wireframes y mockups. También podrás
usar la opción “Section” que delimitará un espacio dentro del marco para colocar los
componentes del diseño. Y por último la opción slice, que segmenta espacios para luego
exportar los espacios recortados en el marco si necesitamos como formatos de
imagen: .png, .jpg.

Formas:

Las herramientas de forma están dentro del tercer icono del bloque:

● Rectangle, sin duda alguna el Rectángulo es una de las herramientas más utilizadas
en los diseños de interfaz.
● Line, de la Línea podemos decir lo mismo.
● Arrow, Flecha, también la usaremos bastante.
● Ellipse, con ella podremos crear Elipses o Círculos.
● Polygon, en principio la herramienta Polígono podría parecer de poca utilidad, pero
si miramos nuestros proyectos veremos que siempre hay formas como esas en
nuestras pantallas.
● Star, podemos decir lo mismo de la Estrella.
● Place image or video, Colocar imagen o video será otra de las herramientas que
nos ayudará a crear mejores prototipos de alta fidelidad.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Dibujo: Cuarto bloque de iconos, son dos:

Pen, con “Pluma” vamos a trabajar creando vectores, que son las formas que usamos en
nuestro diseño y las creamos nosotros mismos con esta herramienta
Pencil, con el lápiz podremos dibujar a mano alzada, hacer anotaciones, dibujos, etc.

Texto: Llegamos a los iconos del segundo bloque que no tienen menú, el primero de ellos
es el icono de Texto.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Con esta herramienta podremos crear en el marco bloques de texto que crecerán de
manera horizontal.También podremos dar clic sobre el marco y arrastrar el cursor para
crear una capa de texto de ancho específico.

Las especificaciones de ajuste de color, alineamiento y tamaño del texto las encontrarás
en las opciones izquierdas, con la descripción “Text”, de manera que puedas personalizar tu
texto:

Recursos: Ésta sin duda es una de las herramientas más fuertes de Figma, que te permitirá
complementar tus diseños de manera más sencilla de 3 maneras: Components, Plugins y
Widgets, vamos a ver de qué se trata:

● Components: Components engloba los componentes que se han creado en equipo

y los cuales se pueden subir y crear una librería para poder usarlos en otros futuros
diseños. Esto es especialmente útil cuando trabajamos en una empresa y al realizar
diferentes diseños de pantallas para diferentes plataformas, podemos centralizar
los componentes como Botones, tipos de cajas de texto, entre otros elementos, que
ayudarán a utilizar en todo lo que generemos y brindarle concordancia y armonía a
los diseños:

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Plugins: Aquí encontrarás diferentes tipos de elementos como iconos,

ilustraciones, nuevas herramientas para animar tu diseño, que algunas serán gratis
y otras de pago, pero te permitirán mejorar tu diseño especialmente si realizas
prototipos de alta fidelidad.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Widgets: Widgets te permitirá utilizar otros componentes de diseño como botones,

cajas de texto, entre otros, que ya han generado directamente la comunidad y que
han disponibilizado para que todos puedan utilizarlos:

Mano: La herramienta de mano te permitirá mover la ubicación de tu pantalla para ver

todos los marcos que tienes existentes en tu proyecto:

Comentarios: Te permite colocar observaciones o comentarios a los avances del trabajo

en tu proyecto. Si te encuentras trabajando de manera asíncrona con un equipo y necesitas
dejar observaciones, o si necesitas dejar comentarios para recordar en adelante sobre tu
diseño.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Ahora vamos a ver las opciones que se encuentran en el menú con el logo de Figma:

Back to Files: Esta opción te regresa a la pantalla principal de Figma donde encontrarás
todos los diseños existentes.
Quick actions: Esta opción sirve para encontrar y acceder rápidamente a la herramienta
que necesitemos usar. Es un buscador general de la herramienta.
File: En el menú File podemos usar:

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● New, para crear un nuevo archivo.

● New from Sketch file…, para importar un archivo nativo de la aplicación Sketch.
● Place image…, para buscar una imagen en nuestro ordenador y añadirla al diseño.
Cuando hayamos seleccionado el archivo podremos: descartar la acción, introducir
la imagen o arrastrarla por el marco hasta el lugar deseado.
● Save local copy…, para guardar una copia del archivo en nuestro ordenador.
● Save to version history…, para guardar un “hito” en la historia de versiones de
nuestro archivo. Podremos introducir al hito un título y una descripción.
● Export…, para exportar elementos de nuestro diseño. Para que funcione debemos
utilizar antes el módulo o panel Export ubicado en el sidebar derecho de Figma. A
este panel le dedicaremos otra clase.
● Export frames to PDF…, con esta opción podemos generar y descargar un archivo
PDF con todos los Frames de la página seleccionada en nuestro archivo.

Edit: Edit del menú de Figma es uno de los más extensos y nos presenta las siguientes
opciones:

● Undo, para deshacer cualquier acción.

● Redo, para rehacer una acción.
● Copy as, nos permite copiar algo en un formato específico en el portapapeles de
nuestro sistema, el ítem «Copiar como» despliega un nuevo menú:
● Copy as text, para «Copiar como texto» una cadena seleccionada.
● Copy as CSS, para «Copiar como CSS», esta opción genera las clases (Cascading
Style Sheets) de la selección que hayamos hecho en el marco.
● Copy as SVG, genera el código SVG de la o las formas que tengamos seleccionadas.
Si nuestra selección es una cadena de texto, lo que obtenemos será el mismo texto
pero formado por curvas, es decir… con nodos y vectores.
● Paste over selection, la opción «Pegar sobre la selección» la puedes usar para
pegar el contenido del portapapeles sobre aquello que tengas seleccionado en el
marco.
● Paste to replace, esta opción la usaremos para «Pegar y Reemplazar»
● Duplicate, para duplicar en el marco aquello que hemos seleccionado.
● Delete, para borrar lo que hemos seleccionado.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Set default properties, nos permite establecer las propiedades predeterminadas

de un objeto para luego crear nuevos objetos con las mismas propiedades. Esta
función te ayudará a optimizar tu flujo de trabajo.
● Copy properties, para copiar las propiedades de un objeto.
● Paste properties, para pegar las propiedades que copiaste de un objeto a otro.
● Pick color, para abrir el Selector de color sobre el marco.
● Select all, para hacer una selección de todos los objetos del marco salvo aquellos
que estén bloqueados.
● Select none, para deshacer una selección.
● Select inverse, para seleccionar los objetos del marco que no están seleccionados.

View: encontramos herramientas para controlar cómo y qué vemos en el Editor:

● Pixel grid, para mostrar u ocultar en el marco la cuadrícula de píxeles.

● Layout grid, para mostrar u ocultar la cuadrícula dentro de los Frames en los que
hayamos activado dicha herramienta.
● Rulers, para mostrar u ocultar las reglas en los ejes X e Y del marco.
● Show slices, para mostrar u ocultar en el marco las “rebanadas” o zonas de corte
que queramos exportar.
● Outlines, para activar o desactivar la vista de contornos, de todos aquello que se
encuentre en el marco.
● Pixel preview, para ver nuestro diseño en modo píxeles.
● Mask outlines, para ver u ocultar el contorno de las máscaras que creado en
nuestro diseño.
● Frame outlines, para mostrar u ocultar el contorno de los Frames “padre”, esta
opción es muy útil cuando usamos Frames con fondo transparente.
● Resource use, con esta opción mostramos u ocultamos un pequeño widget en la
esquina superior izquierda del marco donde se muestran el nº de Layers y la
memoria utilizada en nuestro archivo.
● Show/Hide UI, muestra u oculta la Barra de herramientas y las columnas del editor,
dejando sólo visible el marco.
● Multiplayer cursors, con esta opción podremos mostrar u ocultar los cursores de
los compañeros de equipo o colaboradores que estén trabajando en nuestro
archivo.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Panels, el ítem Paneles despliega otro menú para “navegar” o mostrar ciertas zonas
de las columnas izquierda y derecha del Editor.
○ Open layers panel, abre o cierra la pestaña de capas.
○ Open assets panel, abre o cierra la pestaña componentes.
○ Open design panel, abre o cierra la pestaña Diseño.
○ Open prototype panel, abre o cierra la pestaña Prototipo.
○ Open code panel, abre o cierra la pestaña Código.
● Show left sidebar, muestra u oculta el sidebar izquierdo.
● Zoom in, nos acerca al contenido que tenemos en el marco.
● Zoom out, nos aleja del contenido.
● Zoom to 100%, nos muestra el contenido del marco en su tamaño original.
● Zoom to fit, nos muestra todo el contenido del marco.
● Zoom to selection, nos pone en foco el contenido que hayamos seleccionado.
● Previous page, nos lleva a la página anterior de nuestro archivo.
● Next page, nos aleja a la página siguiente.
● Zoom to previous frame, nos pone en foco el frame anterior.
● Zoom to next frame, nos pone en foco el frame siguiente.
● Find previous frame, busca y nos muestra el frame anterior.
● Find next frame, busca y nos muestra el frame siguiente.

Object: El menú que despliega Object es el más grande de la aplicación y nos permite
gestionar los objetos que se encuentran en el proyecto.

● Group selection, crea un Grupo con los elementos que hayamos seleccionado.
● Frame selection, crea un Frame con los elementos que hayamos seleccionado.
● Ungroup selection, deshace una selección de objetos.
● Use as mask, a partir de una selección, crea una máscara para todos los objetos que
están por encima del que se encuentra por debajo de todos.
● Restore default thumbnail, deshace la portada que hayamos creado para nuestro
archivo y la devuelve a su estado original.
● Add Auto Layout, crea un Auto Layout a partir de una selección de objetos en el
marco.
● Create component, crea un Componente con lo que hayamos seleccionado.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Reset all overrides, deshace los cambios que hicimos en una instancia de un
componente.
● Detach instance, deshace la instancia de un componente, todos los objetos quedan
“liberados”.
● Main component, abre otro menú con tres opciones para trabajar con un
componente principal.
○ Go to main component, nos lleva hasta el componente principal (padre) de
la instancia con la que estamos trabajando.
○ Push overrides to main component, aplica al componente principal los
cambios que hayamos hecho en una instancia.
○ Restore main component, con esta opción podemos recuperar el
componente principal si por alguna razón lo hemos eliminado.
● Bring to front, pone un objeto o una selección de objetos por encima de todos los
demás.
● Bring forward, muy parecida a la opción anterior, pone los objetos que hayamos
seleccionado por encima del que se encontraba sobre ellos.
● Send backward, igual que la anterior, pero hacia abajo.
● Send to back, lleva un objeto o una selección de objetos al fondo del marco.
● Flip horizontal, voltea de forma horizontal el o los objetos que hayamos
seleccionado.
● Flip vertical, hace lo mismo que la opción anterior pero en vertical.
● Rotate 180º, rota un objeto o una selección en 180º.
● Rotate 90º left, hace una rotación de 90º hacia la izquierda del objeto o la selección
que hagamos.
● Rotate 90º right, igual que la opción anterior pero hacia la derecha.
● Flatten selection, aplana una selección de objetos.
● Boolean groups, se abre un menú con las operaciones booleanas que podemos
aplicar a una selección.
○ Union selection, une los objetos que hayamos seleccionado.
○ Subtract selection, oculta en el objeto inferior la zona ocupada del mismo
por el o los objetos que tenga encima.
○ Intersect, hace lo mismo que la opción anterior, pero al revés, la deja visible.
Hay otra diferencias, sólo funciona con una selección de dos objetos.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

○ Exclude, oculta las zonas donde se superponen los objetos que hayamos
seleccionado.
● Rasterize selection, genera una imagen bitmap (mapa de bits) con los objetos de
una selección.
● Show/Hide selection, muestra u oculta los objetos seleccionados.
● Lock/Unlock selection, bloque o desbloquea aquello que hayamos seleccionado.
● Hide other layers, oculta los objetos que no estén seleccionados.
● Collapse layers, cierra o contrae todas las capas del marco en el que estemos
trabajando.
● Remove fill, quita el color de relleno del o los objetos que tengamos seleccionados.
● Remove stroke, quita el contorno de los objetos que tengamos en nuestra
selección.
● Swap fill and stroke, invierte los colores de relleno y contorno del o los objetos que
tengamos en nuestra selección.

Vector: Es probable que la cantidad de herramientas del menú Vector te sorprendan, como
puedes ver en la captura de pantalla son sólo tres.

● Join selection, une los nodos de los vectores que tengamos seleccionados.
● Smooth join selection, une los nodos de los vectores seleccionados.
● Delete and heal selection, borra los nodos seleccionados de un vector.

Text: Nos ayuda a configurar el aspecto de las cadenas de texto utilizadas en nuestros
diseños.

Las herramientas del ítem Text:

● Bold, pone el texto seleccionado en negrita.

● Italic, pone un texto seleccionado en cursiva.
● Underline, subraya el texto.
● Strikethrough, tacha una cadena de texto con una línea continua.
● Original case, pone una cadena de texto en su formato original, esta opción está
relacionada con las dos siguientes.
● Upper case, pone todas las letras de un texto en mayúsculas.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Lower case, hace lo mismo que la opción anterior, pero en minúsculas.

● Increase font size, sube un punto el tamaño del texto.
● Decrease font size, hace lo mismo que la opción anterior pero al contrario, lo baja.
● Increase font weight, incrementa el peso de un texto, por ejemplo, de Regular a
Medium.
● Decrease font weight, hace lo mismo que la opción anterior pero al contrario, lo
reduce, de Medium a Regular.
● Increase font height, sube un punto el alto de fila de un texto.
● Decrease font height, hace lo mismo que la opción anterior pero al contrario, lo
baja.
● Increase font spacing, sube un punto el espaciado de una cadena de texto.
● Decrease font spacing, hace lo mismo que la opción anterior pero al contrario, lo
baja.
● Align, este ítem despliega un nuevo menú que nos permite cambiar la alineación del
texto.
○ Text align left, ajusta el texto a la izquierda.
○ Text align center, ajusta el texto en el centro.
○ Text align right, ajusta el texto a la derecha.
○ Text align justified, justifica el texto.
○ Text align top, ajusta el texto al margen superior de la fila.
○ Text align middle, ajusta el texto en el medio de la fila, en el “centro
vertical”.
● Text align bottom, ajusta el texto al margen inferior de la fila.

Arrange: Con las opciones del menú Arrange podremos controlar la alineación y
distribución de los objetos que haya en el marco.

● Round pixel, ajusta los objetos seleccionados a coordenadas de píxeles redondos,

por ejemplo -70px en el eje X.
● Align left, ajusta a la izquierda los objetos de una selección.
● Align horizontal centers, ajusta los objetos en el centro horizontal.
● Align right, los ajusta a la derecha.
● Align top, ajusta los objetos al borde superior de la selección
● Align vertical center, los ajusta en el centro vertical.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Align bottom, los ajusta al borde inferior.

● Tidy up, ajusta los objetos de una selección a los márgenes superior e inferior o
izquierdo y derecho, dependiendo de la ubicación que tengan. Si hay más de dos, se
aplica automáticamente la misma separación entre todos ellos.
● Pack horizontal, ajusta todos los objetos de una selección en posición horizontal,
sin separación entre ellos.
● Pack vertical, hace lo mismo que la opción anterior pero lo hace en posición vertical.
● Distribute horizontal spacing, aplica el mismo espacio horizontal entre todos los
objetos seleccionados.
● Distribute vertical spacing, hace lo mismo que la opción anterior pero en vertical.
● Distribute left, distribuye de forma escalonada los objetos de una selección a partir
de su margen izquierdo.
● Distribute horizontal centers, hace lo mismo que la opción anterior pero a partir
de su centro horizontal.
● Distribute right, los distribuye como en las opciones anteriores pero tomando
como referencia su margen derecho.
● Distribute top, los distribuye “en cascada” a partir de tu margen superior.
● Distribute vertical centers, igual que la opción anterior pero a partir de su centro
vertical.
● Distribute bottom, hace lo mismo que las cinco anteriores, pero toma como
referencia el margen inferior.

Plugins: Muestra en primer lugar la lista de plugins que hayamos instalado en nuestra
cuenta. Algunos de los ítems de esta lista podrá tener su propio menú, todo depende del
plugin, algunos la tienen y otros no.

● Run last plugin, para ejecutar el último plugin utilizado, esta opción es muy
apropiada si queremos optimizar el tiempo.
● Manage plugins…, nos llevará al apartado Plugins de nuestro panel de usuario. Allí
podremos eliminarlos.
● Browse plugins in Community, si queremos buscar nuevos plugins podemos dar
clic en esta opción que nos llevará a Figma Community.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

Integrations: Despliega un menú con las integraciones que hayamos configurado en

nuestra cuenta de Figma. Allí aparecerán herramientas como Jira, Trello, Asana, Zeplin,
Confluence, Maze, Framer, Slack, Notion, etc.

Preferences: Herramientas para configurar Figma a tus necesidades:

● Snap to geometry, activamos esta opción cuando trabajamos con formas y

queremos ajustar nuestros vectores a los nodos de la misma.
● Snap to objects, esta opción nos ayuda a ajustarnos a los objetos que tenemos en
el marco.
● Snap to pixel grid, si tenemos esta opción activada nos ajustaremos a la cuadrícula
de píxeles.
● Keep tool selected after use, la activaremos para mantener una herramienta
seleccionada después de usarla.
● Highlight layers on hover, para resaltar las capas cuando pasamos sobre ellas con
el ratón.
● Rename duplicated layers, para cambiar el nombre de las capas duplicadas, lo hará
Figma será mantener el nombre de la capa original añadiendo un nº al final.
● Show dimensions on objects, cuando seleccionemos uno o más objetos del
marco, Figma mostrará sus dimensiones en el margen inferior de la selección.
● Hide marco UI during changes, oculta las “ayudas visuales” de Figma cuando
hacemos cambios en un objeto que tenemos seleccionado, por ejemplo cuando
modificamos el color de un contorno.
● Keyboard zooms into selection, esta opción nos dará más control y precisión si
seleccionamos uno o más objetos y utilizamos el Zoom desde el teclado.
● Substitute smart quotes, para sustituir las comillas tipográficas.
● Show Google Fonts, para mostrar las fuentes de Google.
● Flip objects while resizing, para voltear objetos mientras cambiamos el tamaño.
● Invert zoom direction, para invertir la dirección del zoom.
● Use number keys for opacity, para cambiar la opacidad de los objetos utilizando las
teclas numéricas.
● Open links in desktop app, para abrir los enlaces en la aplicación de escritorio. Esta
opción sólo se muestra cuando usamos Figma en el navegador.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

● Nudge amount…, esta opción abrirá un pequeño modal desde el cual podemos
cambiar el valor de empuje para mover o redimensionar los objetos del marco.

Libraries: Abre una ventana desde donde podremos controlar (activar o desactivar) las
librerías que utilice nuestro archivo, también podremos conocer los detalles de las
actualizaciones que hayamos hecho en ellas.

Get desktop app: Cuando damos clic en esta opción automáticamente se inicia la descarga
de la aplicación para usar Figma para nuestro escritorio. El sistema detectará si estás
trabajando con macOS o con Windows. Get desktop app sólo aparecerá cuando usemos
Figma en el navegador.

Help and account: ¿Qué encontramos en Help and account?

● Help page, nos llevará a la página de ayuda de Figma.com

● Keyboard shortcuts, abre un panel sobre el Editor en el cual podemos ver los
principales atajos de teclado de la aplicación.
● Community forum, nos lleva al apartado de de Figma en Spectrum.chat
● Video tutorials, abre una pestaña con el canal de Figma en YouTube.
● Release notes, nos muestra un apartado del sitio web de Figma donde se dejan
notas con descripciones de todos los upgrades.
● Open font settings, descarga la aplicación para gestionar tus fuentes.
● Legal summary, muestra una página con información legal, privacidad, condiciones
de uso, etc.
● Account settings, nos manda al perfil de nuestra cuenta de usuario.
● Log out, cierra la sesión de la cuenta.

Con este tutorial inicial, te encuentras listo para empezar a crear en Figma tus primeros
prototipos.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX
C

3. Ejercicio en casa: Utilizando una de las herramientas

aprendidas, elabora un prototipo para un e-commerce de
calzado.

Puedes utilizar tanto Miro o Figma, el objetivo del ejercicio es que empieces a generar tus
primeros prototipos de alta o baja fidelidad en las plataformas para que puedas adquirir
experiencia en las mismas.

Recuerda pensar desde el punto de vista del usuario:

● ¿Qué es lo primero que buscará?
● ¿Qué información buscaría tener?
● ¿De qué manera es ideal mostrar la información para que pueda encontrar todos los
datos necesarios y poder completar una compra?

En muchas ocasiones te habrás encontrado en esta situación, por lo que es el momento

ideal para que puedas proponer ¿cómo me gustaría encontrar la información, si quisiera
elaborar un ecommerce de calzado?

Al tener listo tu prototipo, no olvides validarlo con amigos y familia para tener
retroalimentación y saber cómo mejorar tu propuesta.

INTRODUCCIÓN A UX - Módulo 4:
Herramientas que apoyan los procesos en UX