UD018900_V1_T1 [Link](01).[Link].

dot

PROTOTIPADO CON FIGMA

 PROTOTIPADO CON FIGMA

ÍNDICE

TU RETO EN ESTA UNIDAD ........................................................................ 3

1. QUÉ ES FIGMA ....................................................................................... 5
1.1. UN POCO DE HISTORIA... ............................................................................... 5
1.2. UN REPASO DE LA UNIDAD DIDÁCTICA ANTERIOR .................................... 7
2. TRABAJANDO CON FIGMA .................................................................... 8
2.1. DESCARGAR FIGMA........................................................................................ 8
2.2. ABRIENDO FIGMA - ESCRITORIO FIGMA .................................................... 10
2.3. COMUNIDAD DE FIGMA ............................................................................... 10
2.4. INTERFAZ DE TRABAJO ............................................................................... 11
2.5. HERRAMIENTAS ........................................................................................... 11
2.6. PROPIEDADES ............................................................................................... 12
2.7. CONFIGURAR RETÍCULAS EN FIGMA .......................................................... 13
2.8. CÓMO CONFIGURAR LAS GUÍAS DE ESTILO .............................................. 13
2.9. EXPORTAR ..................................................................................................... 14
3. PROTOTIPADO EN FIGMA ................................................................... 16
4. TRABAJO EN EQUIPO .......................................................................... 17
4.1. COMPARTIR CON DESARROLLADOR. PLUGINS ......................................... 17
¿QUÉ HAS APRENDIDO? .......................................................................... 19
AUTOCOMPROBACIÓN............................................................................ 21
SOLUCIONARIO ....................................................................................... 25
BIBLIOGRAFÍA ......................................................................................... 27

1
 PROTOTIPADO CON FIGMA

TU RETO EN ESTA UNIDAD

Ahora que has visto cómo funciona el mundo del UX/UI, te vamos a enseñar
cómo funciona una de las herramientas más importantes dentro del diseño web
y de aplicaciones.

El programa que vamos a ver en profundidad es Figma, aunque hay muchos

otros que tienen funcionalidades similares, como Sketch o Adobe Xd.

3
 PROTOTIPADO CON FIGMA

1. QUÉ ES FIGMA
Figma es un editor de gráficos vectorial y una herramienta de generación de
prototipos, principalmente basada en la web, con características off-line adicio-
nales habilitadas por aplicaciones de escritorio en mac OSX y Windows.

En castellano, un programa de diseño de interfaces (vectorial) con la que tam-

bién puedes prototipar y trabajar directamente en el navegador o descargar su
aplicación para tu ordenador, sea del sistema operativo que sea.

1.1. UN POCO DE HISTORIA...

Photoshop y Fireworks

Adobe Photoshop era el programa por excelencia para el diseño de interfaces,

ya que permitía agregar efectos al diseño que otros programas de Adobe (como
Illustrator) no permitían y era el programa más conocido del gigante Adobe.

¿Qué pasó?

 Generaba archivos muy pesados, era lento de ejecutar.

 Aparecieron programas como Sketch, Adobe Xd o Figma.

5
PROTOTIPADO CON FIGMA

Es verdad que algunas personas siguen usando Photoshop, pero es poco reco-
mendable cuando existen herramientas específicas para el diseño de interfaces
que responden a las exigencias y problemas del diseño de interfaces.

En su momento también estaba Adobe Fireworks en Adobe, que pretendía ser

el programa de diseño de interfaces de Adobe, pero no obtuvo su éxito.

Figma versus Sketch

Tiempo después apareció Sketch, con un gran inconveniente: solamente estaba

disponible para mac OSX. A pesar de que los usuarios de Windows se quedaron
mirando y siguieron usando Photoshop, Skech cogió mucha fuerza y se convirtió
en una gran herramienta para el diseño de interfaces.

Con el paso del tiempo, las funcionalidades que los usuarios demandaban se
empezaron a resolver a base de plugins. Y al mismo tiempo aparecieron otros
programas que reunían las carencias de Sketch.

Skech es muy parecido a Figma, lo que sucede es que:

 Solo funciona en un Mac.

 Es de pago.

 No prototipa.

 Necesitamos plugins para añadirle funcionalidades que otros progra-

mas ya tienen.

Figma versus Adobe Xd

La principal ventaja de Adobe Xd es que pertenece al gigante de Adobe y, por lo

tanto, tiene una usabilidad y una integración similar a otros programas de la
marca. Por otro lado, esta aplicación sirve para cualquier sistema operativo y
añade prototipado a diferencia de Sketch.

El gran inconveniente es que tienes que disponer de una suscripción a Adobe

Creative Cloud (por eso, sigue siendo más interesante enseñarte a usar Figma).

6
 PROTOTIPADO CON FIGMA

¿Por qué Figma? Porque...

 Es gratis.

 Funciona en el navegador.

 Trabajo colaborativo a tiempo real. Esta es la gran ventaja frente a

los demás programas.

 Prototipa.

 Funciona en la nube directamente. Trabaja on-line y off-line.

 Control de versiones. Controlar los cambios que se han realizado.

1.2. UN REPASO DE LA UNIDAD DIDÁCTICA ANTERIOR

UX

Es el backend, es decir, el trabajo que hay detrás para que el UI funcione. Es un

conjunto de disciplinas (usabilidad, user research, arquitectura de la información,
análisis de negocio, etcétera) que dan razón de ser a la interfaz. No solo es un
diseño bonito, sino que tiene un fondo.

UI

Es el diseño de la capa visual, lo que el usuario ve. Consiste en wireframes,

mockups, prototipado un sistema de diseño. Y es aquí donde encontramos los
programas de diseño de interfaces.

Estos programas no desarrollan una aplicación o sitio web, es decir, no progra-

man. En el momento en el que tenemos nuestro diseño listo, es el programador
quien se encarga de pasarlo a código.

Con Figma existe la posibilidad de generar el código para favorecer el trabajo

del programador. Pero no es necesario que como profesionales del diseño se-
pamos programar.

7
PROTOTIPADO CON FIGMA

2. TRABAJANDO CON FIGMA

A continuación vamos a dar los primeros pasos con este programa. Es tan ex-
tenso que vamos a ver lo necesario para empezar, pero te animamos a que en-
tres en el programa, explores sus opciones y vayas descubriendo todo lo que
puedes hacer con tus diseños dentro de esta nueva interfaz de trabajo.

2.1. DESCARGAR FIGMA

¿Cómo crear una cuenta en Figma?

Para poder acceder al programa, necesitamos crear una cuenta en la página

web oficial de Figma. En el siguiente vídeo te contamos cómo hacerlo:

Abriendo Figma por primera vez.

(Tienes el material en el Campus Virtual).

Vídeo

8
 PROTOTIPADO CON FIGMA

Formas de trabajar con Figma: Escritorio o Navegador

Figma permite trabajar tanto en el navegador como descargando su aplicación

en escritorio. Lo que debes hacer es registrarte en la plataforma con Google o
manualmente y empezar a disfrutar de Figma gratis.

En el siguiente vídeo te explicamos cómo registrarte.

(Tienes el material en el Campus Virtual).

Vídeo

Tanto la versión buscador como la de escritorio son igual de fluidas. Tan solo
hay pequeñas diferencias en cuanto a la comodidad de uso. Te recomendamos
que la descargues si le vas a dar un uso recurrente.

ESCRITORIO BUSCADOR

Puede trabajar off-line Tienes que tener conexión

Funciona de manera local Funciona on-line

Solamente puedes ver el documento en

Tienes pestañas por cada archivo de
el que estás trabajando. Es decir, tendrás
Figma abierto
que salir para cambiar de documento

Los atajos del teclado pueden no

Atajos de teclado similares a otras
funcionar, ya que pueden entrar en
plataformas
conflicto con atajos propios del buscador

Atajos de teclado similares a otras Compatible con todos los sistemas

plataformas. Es más cómodo operativos

9
PROTOTIPADO CON FIGMA

2.2. ABRIENDO FIGMA - ESCRITORIO FIGMA

Tanto si trabajamos en el navegador como en el escritorio, vamos a tener las

mismas opciones de trabajo.

En la parte superior aparecen dos botones, uno azul y otro morado: el azul es
un nuevo proyecto y el morado es como un cuaderno donde podemos hacer el
brainstorming del proyecto o colocar todo el research que hemos hecho de UX.

Te animamos a que le eches un vistazo y juegues con la herramienta. Figma es

un programa donde se aprende haciendo, además de ser muy intuitivo.

En este vídeo te vamos a mostrar la interfaz de Figma

y qué vas a ver cuando abras el programa. Si todavía
no lo has hecho, te recomendamos que abras ya tu
cuenta para poder ir experimentando todo lo que te
vamos a contar.
Vídeo
(Tienes el material en el Campus Virtual).

2.3. COMUNIDAD DE FIGMA

La comunidad de Figma es una herramienta maravillosa para buscar inspiración

y encontrar plantillas que podemos importar a nuestro espacio de trabajo de
forma gratuita y en un solo clic.

En este vídeo te enseñamos una utilidad maravillosa

de la comunidad de Figma.
(Tienes el material en el Campus Virtual).
Vídeo

10
 PROTOTIPADO CON FIGMA

Además, en esta pestaña también encontraremos los plugins que podemos ins-
talar en Figma para añadirle nuevas funcionalidades y trabajar productivamente
(te dejamos una lista en el apartado "Bibliografía").

2.4. INTERFAZ DE TRABAJO

Vamos a echarle un vistazo general a la interfaz, para saber dónde irá cada cosa
cuando estemos trabajando. Ya verás que después de haber pasado por Pho-
toshop, Illustrator e InDesign, este programa resulta mucho más intuitivo.

Es el momento de que hagamos un pequeño tour ini-

cial de la interfaz de Figma.
(Tienes el material en el Campus Virtual).
Vídeo

2.5. HERRAMIENTAS

Vamos a repasar qué herramientas hay en la barra superior de Figma, para qué
sirven y las opciones que nos ofrecen.

Como puede comprobar, aparentemente son pocas herramientas, pero son

suficientes para cualquier diseño.

11
PROTOTIPADO CON FIGMA

En el siguiente vídeo las repasamos una a una para

que no te quede ninguna duda.
(Tienes el material en el Campus Virtual).
Vídeo

2.6. PROPIEDADES

Después de recorrer la barra de herramientas, es interesante mencionar la ba-

rra derecha de propiedades. Esta barra es un menú dinámico, es decir, varía en
función de la herramienta que tengamos activa o del elemento que tengamos
seleccionado. Desde ahí podemos ir configurando las propiedades de todos los
elementos que añadimos a nuestros diseños.

Normalmente estas son las opciones que encontramos:

12
 PROTOTIPADO CON FIGMA

Aquí te dejamos un vídeo explicándolo más detalladamente:

Barra de propiedades en Figma.

(Tienes el material en el Campus Virtual).

Vídeo

2.7. CONFIGURAR RETÍCULAS EN FIGMA

Ya sabes lo importantes que son las retículas cuando nos enfrentamos a una
maquetación. En este vídeo te enseñamos cómo crear retículas para ayudarte a
la hora de crear tus diseños.

Cómo configurar las retículas en Figma.

(Tienes el material en el Campus Virtual).

Vídeo

2.8. CÓMO CONFIGURAR LAS GUÍAS DE ESTILO

A continuación vamos a realizar un breve ejercicio donde ponemos en práctica

todas las herramientas. Podrás ver cómo nos puede ayudar a maquetar y dise-
ñar rápidamente.

13
PROTOTIPADO CON FIGMA

Vamos a hacer un trabajo completo con Figma.

(Tienes el material en el Campus Virtual).

Vídeo

Te dejamos un pequeño resumen/recordatorio de los puntos que hemos visto

en este vídeo:

 Cómo se divide un proyecto de Figma:

 Páginas.

 Frames.

 Pasos que hay que seguir antes de ponernos a diseñar en Figma:

 Creamos las páginas correspondientes a nuestro proyecto.

 Abrimos los frames con las medidas correspondientes.

 Colocamos las grids o retícula en nuestro frame.

 Comenzamos a diseñar respetando la retícula.

2.9. EXPORTAR

Los proyectos de Figma se pueden exportar de varias formas:

 Podemos exportar por elementos, es decir, cada elemento que aparece

en el frame se exportará por separado.

 Podemos exportar por frame, por mesa de trabajo.

Los formatos en los que podemos exportar son: PDF, PNG, SVG y JPG.

14
 PROTOTIPADO CON FIGMA

En el siguiente vídeo puedes ver cómo se hace y un truquito para exportarlo sin
problemas (no te vendrá mal, porque al principio puede ser un poco lioso).

Veamos cómo exportar desde Figma.

(Tienes el material en el Campus Virtual).

Vídeo

15
PROTOTIPADO CON FIGMA

3. PROTOTIPADO EN FIGMA
¿CÓMO SE LO MUESTRA AL CLIENTE?

Para mostrárselo al cliente, es necesario preparar una presentación del proyec-

to explicando el proyecto y la toma de decisiones. Además, le añadiremos un
enlace al prototipo para mostrarle un flow o un camino predeterminado y poder
visualizar el diseño interactuando con él.

Es como un mockup, pero se puede interactuar con él.

En el siguiente vídeo te enseñamos cómo hacerlo:

Prototipar en Figma.
(Tienes el material en el Campus Virtual).

Vídeo

16
 PROTOTIPADO CON FIGMA

4. TRABAJO EN EQUIPO
Una de las grandes ventajas que tiene Figma es que se puede trabajar simultá-
neamente con otros miembros del equipo.

Permite que en la pestaña "Assets" puedas tener una biblioteca compartida

con todos los miembros del equipo y proyectos. Por ejemplo, si necesitas un
logo de un cliente de otra aplicación que tienes en diseño, aparecerá en esa
pestaña. Solamente tendrás que seleccionarla con el ratón y arrastrarla dentro
del proyecto.

4.1. COMPARTIR CON DESARROLLADOR. PLUGINS

Una vez tenemos nuestro proyecto listo para enviar, podemos enviárselo al
programador para que consiga el código CSS de nuestro diseño: esto nos aho-
rrará mucho tiempo y reducirá los costes.

¿Cómo lo haremos? En este vídeo te lo explicamos.

(Tienes el material en el Campus Virtual).

Vídeo

17
 PROTOTIPADO CON FIGMA

¿QUÉ HAS APRENDIDO?

Ya te has introducido en el mundo del diseño de interfaces (UI). Apasionante,

¿verdad? ¿A que tienes ganas de ponerlo en práctica?

En esta unidad has descubierto una herramienta superútil y que hoy en día es
puntera en la industria. Hemos revisado estos puntos:

 Cómo registrarte en Figma.

 Por qué usar Figma respecto a otras herramientas.

 Ahora sabes cómo abrir un nuevo documento.

 Has conocido la comunidad de Figma, su interfaz y cómo utilizarla.

 Has conocido la herramienta Invision.

 Sabes cómo presentarle la propuesta al cliente y cómo utilizar Figma

con un desarrollador.

Ha llegado tu momento, así que calienta motores y antes de diseñar bocetea,

ten las ideas claras y ¡a por ello!

Esperamos que te haya gustado esta herramienta. Sin duda te será de gran uti-
lidad a la hora de trabajar en tus proyectos de web.

19
 PROTOTIPADO CON FIGMA

AUTOCOMPROBACIÓN

1. ¿Qué diferencia a Figma principalmente?

a) La comunidad.

b) La posibilidad de trabajar en equipo.

c) La versatilidad de trabajar en cualquier sistema operativo.

d) Todas las respuestas son correctas.

2. ¿Qué programa es el más parecido a Figma actualmente?

a) Sketch.

b) Adobe Xd.

c) Photoshop .

d) Todas las respuestas son incorrectas.

3. ¿Cómo se llama a la mesa de trabajo en Figma?

a) Mesa.

b) Tabla.

c) Frame.

d) Las respuestas segunda y tercera son correctas.

21
PROTOTIPADO CON FIGMA

4. ¿Qué lenguaje copia el programador?

a) HTML.

b) Java.

c) CSS.

d) Las respuestas primera y segunda son correctas.

5. ¿Para qué sirve el prototipado en Figma?

a) Para presentarle al cliente la propuesta.

b) Para testear un proyecto web o app.

c) Para ponerlo en el portfolio.

d) Todas las respuestas son correctas.

6. ¿Cómo se divide un proyecto de Figma?

a) Páginas.

b) Frames.

c) Páginas y frames.

d) Todas son incorrectas.

7. Figma es un programa:

a) Pixelar.

b) Vectorial.

c) Todas las respuestas son incorrectas.

d) Las respuestas primera y segunda son correctas.

8. ¿Qué dimensiones tiene el espacio de trabajo de Figma?

a) 1.920 x 1.080.

b) 7.300 x 3.050.

c) Infinito.

d) Todas son incorrectas.

22
 PROTOTIPADO CON FIGMA

9. ¿En qué sistema operativo no funciona Figma?

a) En Linux.

b) En Windows.

c) En Mac.

d) Figma funciona en todos los sistemas operativos.

10. Figma es un programa:

a) De diseño de interfaces.

b) De prototipado.

c) De experiencia de usuario.

d) Las respuestas primera y segunda son correctas.

23
 PROTOTIPADO CON FIGMA

SOLUCIONARIO

1. b 2. b 3. c 4. c 5. d

6. c 7. b 8. c 9. d 10. d

25
 PROTOTIPADO CON FIGMA

BIBLIOGRAFÍA

Libros:

 FROSTM, B. Atomic Design. 2016.

Recursos:

 Página web de Figma:

[Link]

 Comunidad de Figma:

[Link]

 Guía completa en español de Figma:

[Link]

Plugins para Figma:

 Material Design Icons:

[Link]
rial-Design-Icons

 Unsplash:

[Link]
lash

 Downsize:

[Link]
nsize

27
PROTOTIPADO CON FIGMA

 Blobs:

[Link]

 Font Replace:

[Link]
Replacer

 Color Replace:

[Link]
-Replace

 Lorem Ipsum:

[Link]
m-ipsum

 Remove BG:

[Link]
ove-BG

 Image Palette:

[Link]
e-Palette

 Storyset:

[Link]
set-by-Freepik

28