CLASE 5 INTRODUCCION A FIGMA

1. FIGMA
Phd(c). Richard Mendoza
Docente

2. 2
TEMA 1

4. 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
adicionales habilitadas por aplicaciones
de escritorio en macOS y Windows. Las
aplicaciones Figma Mirror companion
para Android y iOS permiten mirar los
prototipos de Figma en dispositivos
móviles. El conjunto de funciones de
Figma, se enfoca en el uso de la interfaz
de usuario y el diseño de experiencia de
usuario, con énfasis en la colaboración en
tiempo real.
FIGMA

6. VENTAJAS FIGMA
Figma posee las siguientes características
que destacan por las ventajas que
proporcionan a sus usuarios:
Basado en web aunque también posee una
aplicación.
Librerías de componentes para utilizarlos
entre proyectos y diseños.
Código CSS de los componentes.
Compartir diseños mediante URL
Comunidad y plugins
Trabajo offline mediante la aplicación.
Interfaz simple e intuitiva
Estas características ofrecen multitud de
ventajas a aquellos equipos de trabajo
multidisciplinares, especialmente en estos
años que se ha vuelto tan popular el trabajo
remoto. https://www.figma.com/

7. VENTAJAS FIGMA
https://mockuuups.studio/blog/post/best-figma-plugins/
1. Starter Team
•Gratis.
•Puede tener hasta 2 editores.
•Usuarios ilimitados con permisos para: visualizar, comentar,
exportar y ver guías.
•Se pueden agregar hasta 3 proyectos simultáneos.
•El versionamiento se limitará a los últimos 30 días.
3. Educación
Si eres un estudiante o profesor, puedes calificar para un plan de
Figma Education. Hay varios criterios específicos que se deben
cumplir para ser parte del programa, y puedes aplicar aquí.
Los equipos en el plan de Education permiten acceso a todas las
funcionalidades del plan Professional de manera gratuita, a la
vez que también se accede a comunidades y recursos para las
aulas de clase.
Los planes de Education son válidos por hasta 2 años
consecutivos. Si todavía eres estudiante o profesor luego de
esos dos años, puedes volver a aplicar para reactivar tu status
de Education.
2. Professional
•$12 dólares por editor con pago anual, $15 dólares si se
paga mensual.
•Usuarios ilimitados con permisos para: visualizar,
comentar, exportar y ver guías.
•Proyectos ilimitados.
•Versionamiento ilimitado.
•Team library con estilos y componentes ilimitados.
•Integración automatizada con Slack.
•Permisos avanzados por proyecto.
https://www.figma.com/education/apply/

8. INTERFAZ FIGMA
https://www.figma.com/downloads/

9. Los archivos existen dentro de proyectos y
equipos, es decir figma tiene una jerarquía
de cómo organiza todas las cosas que
existen dentro del espacio de trabajo. Lo
más grande que puedes tener es un equipo
en donde conviven las diferentes personas y
estas personas pueden establecer cuales
son los proyectos en los que están
trabajando. Un proyecto puede ser nuestra
marca, otro proyecto puede ser ilustraciones
y otro proyecto puede ser nuestra página
web o nuestra app, cada proyecto a su vez,
tiene una serie de archivos y los archivos
pueden ser partes diferentes de ese
proyecto, si estamos trabajando.
INTERFAZ FIGMA
https://www.figma.com/downloads/
Equipo��
� �
Proyecto 📁📁
Archivos📒📒
Páginas📄📄

10. Los archivos existen dentro de proyectos y
equipos, es decir figma tiene una jerarquía de
cómo organiza todas las cosas que existen
dentro del espacio de trabajo. Lo más grande
que puedes tener es un equipo en donde
conviven las diferentes personas y estas
personas pueden establecer cuales son los
proyectos en los que están trabajando. Un
proyecto puede ser nuestra marca, otro
proyecto puede ser ilustraciones y otro
proyecto puede ser nuestra página web o
nuestra app, cada proyecto a su vez, tiene
una serie de archivos y los archivos pueden
ser partes diferentes de ese proyecto, si
estamos trabajando.
DOMINA LA HERRAMIENTA DE TEXTO

11. En relacion a los Frames
Frame (F)
Slice (S)
En relacion a las figuras
Rectangulo (R)
Linea (L)
Flecha (Shift + L)
Elipse (O)
Colocar una imagen (Ctrl + Shift + K)
En relacion a plumas
Pluma fuente (P)
Lapiz (Shift + P)
Texto y otros
Texto (T)
Herramienta de “mano” (H)
Agregar un comentario (C)
CREACIÓN DE OBJETOS Y EFECTOS

12. CREACIÓN EFECTOS
● Guíasinteligentes
● Smartselection
● Paddingentre elementos
● Mostrar/Ocultar
➔ Selecciona elemento
➔ Panelde propiedades
◆ Effects
● InnerShadow
● Drop Shadow
● Layer Blur
● BackgroundBlur

13. Para ocultar columnas:
MacOS: [Control] + [G]
Windows: [Ctrl] + [Shift] + [4]
RETÍCULAS Y GUÍAS:
COMPONER LA COMPLEJIDAD
Recomendaciones de medidas
•Mobile
• Count = 6
• Margin = 20
• Gutter = 12
•Tablet
• Count = 6
• Margin = 30
• Gutter = 20
•Desktop
• Count = 6
• Margin = 42
• Gutter = 32
➔ Shift+R
◆ Paramostrarlasreglas
➔ Jalardesdelareglaverticaluhorizontal
◆ Llevarhastaelpuntoobjetivodentrodel
frame

14. AGREGANDO IMAGENES
➔ Draganddrop
➔ Copy /Paste
➔ File >Place Image
➔ Command +Shift +K
➔ Modo de Superposición
◆ PassThrough
➔ Dentro de unobjeto
◆ Fill
◆ Fit
◆ Crop
◆ Tile
➔ Ajustesde imagen
◆ Exposición, contraste,etc...

15. AGREGANDO IMAGENES
➔ Objetos contenedores
◆ Limitan la visibilidad de las
imágeneso elementos en
nuestra composición
➔ T
enermínimo 2 elementosenunframe
◆ El objeto queenmascaraabajo
➔ Command +Control +M
◆ Objeto queenmascarapierde susotras
propiedades
➔ Crear unframedentro de otro frame
◆ Seleccionar “Clip Content”

16. SELECCIÓN COLOR
➔ Objeto seleccionado
➔ Panel de propiedades
◆ Fill
◆ Stroke
◆ Effects
● Detalle
➔ Herramienta “Eyedropper” (i)
➔ Objeto seleccionado
➔ Panel de propiedades
◆ Fill, Stroke
➔ Seleccionar Color
● Linear, Radial, Angular y Diamond

17. ➔ P para usar la herramienta
“Pen”
◆ Click en cualquier lugar
para empezar
◆ Escape para abandonar
➔ En Figma, un punto puede
alojar una cantidad infinita de
trazos que salgan desde ese
punto
➔ Cuando seleccionas y
mueves dicho punto, todos
los trazos se mueven con él
CONSTRUYENDO VECTORES
➔ Stroke
◆ Center
◆ Inside
◆ Outside
➔ Cap
◆ Round -Square - Arrows
➔ Dashes
EDITANDO TRAZOS

18. Figma soporta:
◆ JPEG
◆ PNG
◆ SVG
◆ .sketch
QUE SE PUEDE IMPORTAR
➔ Drag and drop
◆ En archivos
◆ En proyectos
➔ Command +Shift +K
➔ Ícono de importar
➔ Copy/Paste desde:
◆ Sketch
◆ Illustrator
◆ Otros archivos de Figma
COMO IMPORTAR

19. ➔ Sumas y Restas
◆ Union
◆ Substract
➔ Combinatorias
◆ Intersect
◆ Exclude
➔ Mínimo 3 objetos
◆ Triángulo
◆ Círculo
◆ Línea
➔ Combinacionesdeestosobjetoscon
operacionesbooleanas
TIPOS DE OPERACIONES

20. Figmapuedeexportarcualquiercosacomo:
◆ JPEG
◆ PNG
◆ SVG
QUE SE PUEDE EXPORTAR
Op1
◆ Seleccionar elemento
◆ Agregar propiedad de
“Export”
◆ Definir parámetros
● JPEG, SVG
● 1X, 2X, 3X
COMO EXPORTAR
➔ Op2
◆ Sin ninguna selección
activa
◆ Command +Shift +E
◆ Seleccionar elementos a
exportar
➔ Fondos transparentes

21. Sí,puedes tener una
versión offline en .fig
◆ ¿Pero paraqué?
PUEDO EXPORTAR UN ARCHIVO .FIG
➔ Permisos de edición
➔ Vista de frames
◆ Permite crear nuevos parámetros
de exportar
➔ Vista solo de prototipo
COMPARTIR UN ARCHIVO

22. PROYECTO MOVIL

24. • **Interfaz: **Aquello que nos conecta a una
maquina y que nos ayuda a u manejo.
• Tecnología CRT (esta tecnología se creo y
perfecciono en la segunda guerra mundial se
usaba en radares )1948 mostraba en pantalla los
resultados de las operaciones Manchester baby
primer ordenador que almacena en memoria.
• 1970-1980 El modo Obscuro es el predeterminado
letras verdes fondo negro.
• WYSIWYG What You See Is What You Get
Lo que ves es lo que tienes
HISTORIA DE LA INTERFAZ GRAFICA

25. • Primeros diseñadores de UX objetivo
reproducir el mundo físico en lo digital.
• CRT(Tubo de Rayos Catódicos)
• LCD hasta mediados del 2000 logra
calidad para posterior mente abrir camino
a la tecnología LED y OLED=fondo negro.
HISTORIA DE LA INTERFAZ GRAFICA

26. • La pupila es quien Controla la cantidad de
luz que enciende la célula de nuestra retina.
Tenemos que tener en cuenta que la pupila
es esa puerta de entrada a la retina y que
atraviesa la luz hasta penetra al ojo
• Mientras mas luz se adapta nuestra pupila
poniéndose pequeña y entre mas luz mas
grande se pone nuestra pupila.
• Polarización de contraste: es cuando el
cambio de claro a oscuro de una manera
brusca conseguimos fatiga visual y es algo
que debemos evitar.
¿COMO VEMOS LOS HUMANOS?

27. • Comprender los fundamentos biológico de
la vista es imprescindible para diseñar
• Aplicaremos es con el sentido de la vista.
el sentido de la vista no solo es lo que ve
el ojo si no también lo que procesa el
cerebro.
• Existe dos forma de recibir información de
luz
• 1. Luz emitida por ejemplo (ordenador,
movil, tv, etc)
• 2. Luz reflejada (es cuando la luz proyecta
en un área y ella transmite posterior una
luz reflejada desde el área.
¿COMO VEMOS LOS HUMANOS?
“Lo que los ojos no ven y la mente
no conoce, no existe.”
—David Herbert Lawrence

28. Luz emitida Luz reflejada
LA LUZ LO ES TODO
Analogia Cámara de Fotos, Aberracciones Esfericas,
Polarización de Contraste y Subjetividad de los colores.

29. • Lo que transmitimos con el diseño
• Elegancia las marcas con darkmode son
percibidas como elegantes o de lujo (jugar con
la tonalidades, no siempre negro y blanco)
• Focalización en el contenido: el contenido
sobresale mientras que la UI permanece en el
fondo
• Lo que esperan los usuarios
• La costumbre: herramientas de diseño o del
trading lo que quieren los usuarios
VENTAJAS MODO OSCURO

30. • La novedad: Se ha puesto de moda en los
últimos años
• Enfoque en la usabilidad
• Preferido por personas con problemas de
visión. según estudios recientes
VENTAJAS MODO OSCURO

31. ¿Cuándo usar Light mode?
• Cuando tenemos mucho texto que el
usuario leerá.
• Si tenemos muchos elementos.
• Cuando utilicemos diferentes elementos
de color.
• Si la app se usará principalmente de día.
LIGHT MODE VS DARK MODE
¿Cuándo usar Dark mode?
•Cuando tenemos poco texto y más
imágenes
•Si tenemos pocos elementos, bien
espaciados.
•Cuando queremos transmitir un entorno
oscuro.
•Para destacar un elemento principal.
•Reducir el cansancio ocular, sobre todo
cuando sabemos que los usuarios pasarán
mucho tiempo en nuestra app.

32. • El fondo: es el color más oscuro de
nuestra paleta de colores
• Barras de menú: que están a la
izquierda o en la parte superior,
con un tono ligeramente más claro
• Las cards: suelen tener un gris
claro
• Los divisores: tienen un tono un
poco más claro que las cards
• Los botones: son las llamadas al
acción, por lo que se colocan el
color de acento de la marca
PATRONES MODO OSCURO

33. • Define de manera cuidadosa la paleta de colores.
• Que el sistema que definamos sea resistente a los cambios.
• Gris vs negro: NO se usa negro puro.
• Que resalte justo lo necesario.
• Menos es más: Evita tener muchos tonos de colores, de colores
distintos.
• Solo los elementos básicos cuentan.
• •Cuida la parte emocional: No perder la conexión con las emociones
del usuario.
CONSIDERACIONES PREVIAS

34. • Evitar utilizar blanco y
negro puros.
• Utilizar gris oscuro en
lugar de negro puro.
• Evitar emplear colores
saturados.
• Utilizar tonos oscuros que
contrasten con el blanco.
BUENAS PRACTICAS
Negro
#000000
Gris Oscuro
#333335

35. • Los tonos base de tu diseño ha de ser lo
suficientemente oscuro para mostrar
texto blanco.
• Lo más elevado que esté un elemento,
más fuerte y luminoso que ha de ser el
tono.
• Cambiando colores de modo light a sus
variantes dark no da buen resultado.
BUENAS PRACTICAS
Titular
Loremipsumdolor sit
amet,
Titular
Loremipsumdolor sit
amet,
Pasa AAA
Pasa AA
No pasa ningún estándar
Pasa AAA

36. https://www.figma.com/file/xWXc0T7DGpwQuD59P6ZQku/Material-Dark-Theme-Design-Kit?node-id=0%3A306

37. Balsamiq Studios es un ISV fundado en
marzo de 2008 por Peldi Guilizzoni, un
ex ingeniero de software sénior de Adobe.
Balsamiq Wireframes es una aplicación de
creación de estructura de alambre de sitio
web de interfaz gráfica de usuario . Permite al
diseñador organizar widgets preconstruidos
utilizando un editor WYSIWYG de arrastrar y
soltar . La aplicación se ofrece en una versión
de escritorio , así como un complemento para
Google Drive , Confluence y JIRA.
BALSAMIQ
•https://balsamiq.com/
La herramienta de maquetas Balsamiq basada en la web se
lanzó en junio de 2008. Balsamiq tiene 33 empleados. En
2011, Balsamiq logró casi $5 millones de dólares en
ventas, y $6,4 millones de dólares en 2015

38. 38

39. InVision es una plataforma de diseño para
desarrollo con herramientas y funciones
integradas que permiten a los individuos y
equipos crear prototipos móviles y web de alta
fidelidad, colaborar en tiempo real y gestionar
sus proyectos con facilidad. Millones de
personas utilizan InVision para crear
prototipos, revisar, refinar, gestionar y probar
productos web y móviles, todo sin una sola
línea de código.
INVISION
•https://www.invisionapp.com

40. 40