Figma - Speaker Deck

Slide 1

Slide 1 text

Imanol Terán Maruri - @itermar FIGMA Diseño colaborativo y online

Slide 2

Slide 2 text

¿QUIÉN SOY? IMANOL TERÁN MARURI ‣ Diseñador y desarrollador frontend ‣ Fundador de widdiapps.com ‣ Puedes encontrarme en: ‣ itermar.io ‣ @itermar ‣ [email protected]

Slide 3

Slide 3 text

PROGRAMA ‣ Introducción ‣ Software de diseño vectorial ‣ Photoshop VS Sketch VS Figma ‣ Figma ‣ Características ‣ Herramientas de diseño ‣ Importación de trabajos previos ‣ Flujo de trabajo ‣ Proyecto: diseño de una app utilizando Figma

Slide 4

Slide 4 text

INTRODUCCIÓN Sobre el diseño de web y apps

Slide 5

Slide 5 text

INTRODUCCIÓN ‣ Muchas veces nos encontramos antes la necesidad de realizar algún diseño, previo a la implementación si somos desarrolladores o maquetadores, o bien como tarea principal si somos diseñadores ‣ Las herramientas de diseño tradicionales tienen interfaces complejas, que “asustan” un poco ‣ Demasiadas opciones, curva de aprendizaje pronunciada

Slide 6

Slide 6 text

INTRODUCCIÓN ‣ Herramientas muy buenas, muy potentes y que sirven para todo ‣ Illustrator, Fireworks, Afﬁnity Designer, incluso Photoshop* ‣ * No es la mejor idea utilizar para diseñar una herramienta de tratamiento de imágenes (lo ideal —> mejor vectorial)

Slide 7

Slide 7 text

INTRODUCCIÓN ‣ Con el auge de las aplicaciones móviles y el responsive web design, surgen nuevas herramientas de diseño vectorial orientadas especíﬁcamente a diseñar para estos casos ‣ Ejemplos: Sketch, Adobe XD, Figma ‣ Interfaces más limpias, menos opciones pero más especiﬁcas ‣ Algunas, como Sketch, se pueden ampliar todo lo que queramos mediante plugins

Slide 8

Slide 8 text

PHOTOSHOP vs SKETCH vs FIGMA El “gigante” vs los “recién llegados”

Slide 9

Slide 9 text

Photoshop vs Sketch vs Figma ‣ Todavía hoy en día mucha gente diseña usando Photoshop ‣ Con la cantidad de tamaños de pantalla, resolución de assets para diferentes dispositivos…etc, diseñar en vectorial es obligatorio ‣ Gracias a esto podemos escalar nuestros diseños todo lo necesario ‣ Adobe tiene otras herramientas: ‣ Illustrator ‣ Adobe XD

Slide 10

Slide 10 text

Photoshop vs Sketch vs Figma ‣ Sketch y Figma tienen una ventaja principal sobre Illustrator ‣ Están pensadas y muy orientadas al diseño de interfaces ‣ Cuentan con interfaces muy simples e intuitivas

Slide 11

Slide 11 text

Online vs Nativo ‣ Estamos acostumbrados a trabajar a diario con herramientas online: Gmail, Drive, Dropbox…etc ‣ Sin embargo, no tenemos en cuenta las herramientas online para tareas “mayores”, como el diseño

Slide 12

Slide 12 text

Online vs Nativo ‣ Ventajas de las aplicaciones online: ‣ Acceder desde cualquier dispositivo o lugar ‣ No debemos preocuparnos de actualizaciones ‣ Facilidad para compartir documentos

Slide 13

Slide 13 text

Online vs Nativo ‣ Ventajas de las aplicaciones de escritorio: ‣ Rendimiento

Slide 14

Slide 14 text

Online vs Nativo ¿Y si te digo que Figma une lo mejor de los dos mundos?

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

FIGMA ¿Qué es y cómo puede ayudarnos?

Slide 17

Slide 17 text

“El Google Docs del diseño”

Slide 18

Slide 18 text

FIGMA ‣ Herramienta de diseño vectorial online ‣ Colaboración en tiempo real ‣ Permite importar desde Sketch ‣ Puedes descargar los ﬁcheros ‣ Exportación a PNG, SVG, JPG

Slide 19

Slide 19 text

FIGMA ‣ Shortcuts similares a los de Sketch ‣ Soporta navegadores Chrome y Firefox ‣ Versiones Desktop para Windows y macOS (WebView)

Slide 20

Slide 20 text

FIGMA ‣ Por defecto, trabaja con Google Fonts ‣ También puedes importar tus propias fuentes ‣ Incluye Fontawesome

Slide 21

Slide 21 text

CARACTERÍSTICAS Que hacen único a Figma

Slide 22

Slide 22 text

EDITOR

Slide 23

Slide 23 text

EDITOR ‣ El editor está formado por los siguientes elementos: ‣ Canvas ‣ Barra de herramientas (toolbar) ‣ Panel de capas ‣ Panel de propiedades ‣ Opciones para desarrolladores

Slide 24

Slide 24 text

CANVAS ‣ Zona en la que se sitúan todos los elementos que vayamos diseñando ‣ Se trata de un canvas inﬁnito ‣ Podemos habilitar reglas en el canvas

Slide 25

Slide 25 text

TOOLBAR ‣ Ocupa toda la zona superior de nuestro editor y engloba todas las herramientas que están disponibles en nuestro editor

Slide 26

Slide 26 text

PANEL DE CAPAS ‣ Se sitúa en el lateral izquierdo del editor ‣ Contiene todas las capas y elementos que forman nuestro diseño, ordenados de forma jerárquica ‣ Podemos mover los elementos como queramos dentro de este panel, en función de la profundidad que queramos darles dentro del canvas

Slide 27

Slide 27 text

PANEL DE PROPIEDADES ‣ Se sitúa en el lateral derecho del editor ‣ Muestra las propiedades y valores que podemos asignarles, del elemento que tengamos seleccionado en ese momento en el canvas ‣ Por tanto, las opciones disponibles varían según el tipo de elemento seleccionado.

Slide 28

Slide 28 text

OPCIONES PARA DESARROLLADORES ‣ Sobre el panel de propiedades, encontramos 3 pestañas ‣ Todo elemento creado en Figma, genera un código, muy útil para desarrolladores ‣ Debe estar seleccionado el “modo código” ‣ Se puede generar código para: CSS, iOS (Swift) y Android (XML)

Slide 29

Slide 29 text

PROPIEDADES

Slide 30

Slide 30 text

PROPIEDADES ‣ Las opciones de este panel cambian de forma dinámica en función del elemento que esté seleccionado en ese momento.

Slide 31

Slide 31 text

Posiciones y dimensiones ‣ Opciones para alinear un objeto o un conjunto de objetos ‣ Opciones para dar tamaño y coordenadas de posicionamiento a un objeto

Slide 32

Slide 32 text

Constraints ‣ Podemos añadir constraints a nuestros elementos ‣ De esta forma, le decimos a Figma como redimensionar o mover esos elementos a medida que su contenedor cambie de tamaño ‣ Tenemos constraints horizontales y verticales

Slide 33

Slide 33 text

Layout Grid ‣ Solo podemos utilizarlo en los frames ‣ Son guías visuales que nos ayudan a mantener nuestros objetos alineados al colocar todos los elementos en nuestro frame ‣ Podemos elegir ﬁlas o columnas para cambiar la orientación del layout

Slide 34

Slide 34 text

Efectos ‣ Podemos añadir efectos como sombras o difuminados a nuestros elementos. ‣ Figma nos permite tener hasta 8 tipos de sombra en un elemento, pero solo 1 tipo de difuminado en un mismo elemento ‣ El difuminado (blur) implica pérdida de rendimiento en el diseño

Slide 35

Slide 35 text

Relleno ‣ Podemos rellenar cualquier forma que creemos ‣ Distintos tipos de relleno: ‣ Solido, linear gradient, radial gradient, angular gradient, diamond gradient o imagen. ‣ También tenemos la opción de poner border, mediante la opción STROKE

Slide 36

Slide 36 text

VERSIONES

Slide 37

Slide 37 text

HISTÓRICO DE VERSIONES ‣ Figma realiza copias de nuestros diseños, de forma automática ‣ De esta forma podemos ver versiones anteriores de nuestro proyecto, y de esta forma, restaurarlas o duplicarlas

Slide 38

Slide 38 text

HISTÓRICO DE VERSIONES ‣ Las versiones se crean cuando estamos 30min sin realizar ningún cambio en el proyecto ‣ Estos cambios se guardan automáticamente, podemos cerrar la pestaña del navegador sin ningún miedo

Slide 39

Slide 39 text

HISTÓRICO DE VERSIONES ‣ Si accedemos al histórico de versiones, veremos en la parte derecha quien y cuándo ha creado esas versiones ‣ Haciendo clic en una versión, tendremos la opción de restaurar o duplicar

Slide 40

Slide 40 text

HERRAMIENTAS DE DISEÑO Objetos, textos…

Slide 41

Slide 41 text

DIBUJO

Slide 42

Slide 42 text

MEDIR DISTANCIAS ‣ Muchas veces nos resulta muy cómodo poder conocer las distintas distancias de un objeto seleccionado, tanto en relación a otros elementos como al propio frame ‣ Para ello, con el objeto seleccionado, basta con pulsar la tecla alt/ option

Slide 43

Slide 43 text

GUÍAS ‣ Para poder utilizar las guías, debemos habilitar las reglas en el canvas ‣ Una vez hecho esto, solo hay que hacer clic y arrastrar lineas horizontales y verticales. ‣ Se puede posicionar y alinear tanto a nivel de Canvas como a nivel de Frame

Slide 44

Slide 44 text

EDITOR DE IMÁGENES ‣ Si tenemos alguna imagen en nuestro diseño, podemos editarla modiﬁcando valores como: exposición, contraste, saturación…etc ‣ Para ello, con la imagen seleccionada, en el menú “FILL” pulsamos sobre la imagen

Slide 45

Slide 45 text

VECTORES

Slide 46

Slide 46 text

VECTORES ‣ Como aplicación de diseño vectorial, Figma tiene una potente herramienta para crear vectores, llamada “Vector Networks” ‣ Podemos crear vectores con la herramienta “Pen” ‣ Podemos editarlos haciendo clic en la tecla ENTER teniendo un vector seleccionado

Slide 47

Slide 47 text

VECTORES ‣ La principal peculiaridad de Vector Networks frente a otras herramientas para crear vectores es que en este caso, podemos manipular las líneas que lo forman, no sólo los vértices ‣ Por tanto, podemos añadir segmento a cualquier punto del vector ‣ Gracias a esto, en Figma no es necesario realizar muchas operaciones booleanas para crear formas complejas

Slide 48

Slide 48 text

GRUPOS Y FRAMES

Slide 49

Slide 49 text

GRUPOS ‣ Utilizar grupos nos permite tratar varias capas como si se tratara de una sola ‣ Al seleccionar un grupo, por defecto toma todo el conjunto ‣ Si queremos seleccionar un elemento de los que lo compone: doble clic

Slide 50

Slide 50 text

FRAMES ‣ Un frame es una capa que tiene exactamente el tamaño que nosotros le demos ‣ Sobre todo es muy útil para crear el viewport del dispositivo para el que estemos diseñando ‣ Tanto los grupos como los frames, se pueden deshacer

Slide 51

Slide 51 text

OPERACIONES BOOLEANAS

Slide 52

Slide 52 text

OPERACIONES BOOLEANAS ‣ Gracias a las operaciones booleanas podemos combinar diferentes objetos y formas a través de una de estas cuatro fórmulas: ‣ Union ‣ Sustracción ‣ Intersección ‣ Exclusión

Slide 53

Slide 53 text

COMPONENTES Reutilizando elementos

Slide 54

Slide 54 text

COMPONENTES ‣ Usuarios esperan interfaces elaboradas ‣ Composición: parte esencial del proceso de diseño ‣ Nos ayuda a pensar sobre una pequeña parte de un sistema más complejo ‣ Nos permite reutilizar partes existentes

Slide 55

Slide 55 text

COMPONENTES ‣ Fáciles de aprender para principiantes ‣ Potentes para usuarios avanzados ‣ Flexibles para utilizarlos sobre el proceso de diseño ‣ ¡¡¡ Duplicar un componente crea nuevas instancias del mismo, no copias !!!

Slide 56

Slide 56 text

COMPONENTES 1. Seleccionar elemento 2. Clic en “Create component” (Toolbar) 3. Crear nuevas instancias ‣ Copiar + pegar ‣ Duplicate ‣ Alt + arrastrar

Slide 57

Slide 57 text

COMPONENTES ‣ Cambio en componente = cambio en instancia ‣ Cambio en instancia ≠ Cambio en componente

Slide 58

Slide 58 text

COMPONENTES ‣ Podemos tener componentes anidados. ‣ Juntar varios componentes y convertir ese elemento, a su vez, en otro componente.

Slide 59

Slide 59 text

TEXTO

Slide 60

Slide 60 text

TEXTO ‣ Para añadir un texto, tenemos la herramienta “Text”, o podemos iniciarla directamente pulsando la tecla “T” ‣ Si hacemos clic en el canvas y empezamos a escribir: texto d tamaño auto ajustable ‣ Si hacemos clic y arrastramos, nuestro texto se limita a ese tamaño dado

Slide 61

Slide 61 text

TEXTO ‣ Figma utiliza Google Fonts por defecto, pero también podemos utilizar nuestras propias fuentes que tenemos en local ‣ Para ello es necesario utilizar la app de escritorio (también nos permite utilizar fuentes de TypeKit en macOS y Windows 10) ‣ Otra opción es instalar la herramienta “Font Helper”, la cual permite al navegador acceder a las fuentes almacenadas en nuestro equipo ‣ Reiniciar el browser, y si sigue sin funcionar, el ordenador

Slide 62

Slide 62 text

TEXTO ‣ Figma trae de serie la Icon Font más popular: FontAwesome ‣ Para utilizarla: ‣ Seleccionar FontAwesome como fuente ‣ Después ir a http://fontawesome.io/cheatsheet/ y copiar y pegar el símbolo que queramos

Slide 63

Slide 63 text

ATAJOS DE TECLADO ¡El teclado al poder!

Slide 64

Slide 64 text

ATAJOS DE TECLADO File and Properties: • Export: ⌘ + ⇧ + E • Save: ⌘ + S • Place: ⌘ + ⇧ + K • Color Picker: ^ + C or I • Enter Image Crop Mode: ⌥ + DOUBLE-CLICK

Slide 65

Slide 65 text

ATAJOS DE TECLADO View: • Pan: ⎵ + DRAG • Zoom In: + • Zoom Out: – • Zoom to Fit: 1 or 9 • Zoom to Selection: 2 • Zoom 100%: 0 • Rename Layer: ⌘ + R • Show Rulers: ⇧ + R • Pixel Preview: ⌃ + P • Show Layout Grids: ⌃ + G • Show Layers Panel: ⌘ + ⇧ + \ • Show Figma UI: ⌘ + \ • Show Pixel Grid: ⌘ + ' • Show Transparency Checkerboard: ⌃ + ⇧ + ' • Outline Mode: ⌘ + Y or ⌃ + ⇧ + 3

Slide 66

Slide 66 text

ATAJOS DE TECLADO Vector: • Move Tool: V • Pen Tool: P • Paint Bucket: B • Bend Tool: ⌘ + DRAG • Join Selection: ⌘ + J • Duplicate: ⌥ + DRAG • Exit Vector Edit Mode: ESC or RETURN

Slide 67

Slide 67 text

ATAJOS DE TECLADO Text: • Type Tool: T • Toggle Underline: ⌘ + U • Toggle Italic: ⌘ + I • Toggle Bold: ⌘ + B

Slide 68

Slide 68 text

ATAJOS DE TECLADO Object: • Move Tool: V • Pen Tool: P • Rectangle Tool: R • Ellipse Tool: O • Line Tool: L • Frame Tool: A or F • Slice Tool: S • Copy: ⌘ + C • Cut: ⌘ + X • Paste: ⌘ + V • Duplicate: ⌘ + D or ⌥ + DRAG • Group Selection: ⌘ + G • Ungroup Selection: ⌘ + ⇧ + G • Toggle Visibility: ⌘ + ⇧ + H • Toggle Lock: ⌘ + ⇧ + L • Flatten Selection: ⌘ + E • Outline Stroke: ⌘ + ⇧ + O • Toggle Mask: ⌥ + ⌘ + M

Slide 69

Slide 69 text

IMPORTACIÓN de trabajos previos

Slide 70

Slide 70 text

IMPORTACIÓN ‣ Figma permite importar los siguientes tipos de archivos: ‣ Sketch ‣ Imágenes ‣ Vectores

Slide 71

Slide 71 text

IMPORTACIÓN - SKETCH ‣ Podemos importar un proyecto de Sketch arrastrándolo directamente en el Canvas de Figma ‣ Si en Sketch tenemos diferentes páginas, éstas se importarán como ﬁcheros independientes en Figma ‣ Para que los textos se importen correctamente: ‣ Utilizar la app de escritorio de Figma

Slide 72

Slide 72 text

IMPORTACIÓN - IMÁGENES ‣ Podemos importar cualquier tipo de imagen en Figma ‣ Tener en cuenta las siguientes restricciones: ‣ Perderemos información de metadatos de la imagen ‣ Imágenes de tamaño grande son reducidas, hasta llegar a un máximo de 4096px en en lado más largo ‣ Formatos PNG, JPEG, GIF…sin problema ‣ Formatos de navegador como TIFF, WEBP…también son admitidos

Slide 73

Slide 73 text

IMPORTACIÓN - VECTORES ‣ Podemos importar vectores desde los siguientes formatos ‣ Figma (*.ﬁg) ‣ Sketch (*.sketch) ‣ SVG (*.svg)

Slide 74

Slide 74 text

IMPORTACIÓN - VECTORES ‣ La mejor forma es importarlos desde Sketch ‣ Los símbolos de Sketch se transforman en componentes de Figma ‣ SVG no es lo más recomendable en estos casos: mejor elementos creados con una herramienta de diseño vectorial

Slide 75

Slide 75 text

IMPORTACIÓN - HOW TO ‣ Tenemos dos formas de importar elementos en Figma: ‣ Arrastrar y soltar (FIG, SKETCH, PNG, JPG, GIF) ‣ Copiar y pegar ‣ ** En Sketch “Copy as SVG”

Slide 76

Slide 76 text

FLUJO DE TRABAJO Qué podemos hacer con nuestro diseño

Slide 77

Slide 77 text

COLABORACIÓN En tiempo real

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

COLABORACIÓN EN TIEMPO REAL ‣ Sin duda, una de las grandes posibilidades de Figma ‣ Al estilo de Google Docs ‣ Podemos editar un mismo documento, en tiempo real, con un compañero o un cliente

Slide 80

Slide 80 text

COLABORACIÓN EN TIEMPO REAL ‣ No siempre necesitaremos colaborar con alguien en el documento ‣ En los casos que necesitemos, nos ahorrará mucho tiempo y facilitará la comunicación

Slide 81

Slide 81 text

COLABORACIÓN EN TIEMPO REAL ‣ Al ser una herramienta online, la gente con la que compartimos, no tiene que instalar nada ‣ Podemos ir modiﬁcando los permisos de ver/editar, en función de las fases de diseño

Slide 82

Slide 82 text

EXPORTAR desde Figma

Slide 83

Slide 83 text

EXPORTAR ‣ Si queremos exportar partes de nuestro diseño para editarlas en otra aplicación de diseño vectorial: ‣ “Copiar como SVG” —> Pegar en Adobe XD o Afﬁnity Designer ‣ En Sketch o Illustrator, podemos arrastrar los SVG generados en

Slide 84

Slide 84 text

EXPORTAR ASSETS ‣ En Figma, podemos exportar cualquier capa ‣ Normalmente exportaremos Grupos y Slices ‣ Podemos seleccionar resolución y formato de la exportación

Slide 85

Slide 85 text

PROTOTIPADO nuestro diseño “cobra vida”

Slide 86

Slide 86 text

PROTOTIPADO ‣ Una vez que tenemos nuestro diseño terminado, podemos crear prototipos interactivos ‣ Estos prototipos darán a nuestro equipo o al cliente, una idea mucho más cercana del comportamiento de nuestra web o nuestra aplicación ‣ Es también muy útil para que el equipo de desarrolladores conozcan los ﬂujos de comportamiento de una app

Slide 87

Slide 87 text

PROTOTIPADO ‣ Para habilitarlo, debemos entrar en “Prototype Mode” ‣ Una vez dentro, podemos seleccionar cualquier Frame u objeto dentro del frame y, unirlo con el siguiente frame. ‣ Podemos tener conexiones frame-frame u objeto-frame ‣ De esta forma vamos recreando el ﬂujo de ejecución de la app

Slide 88

Slide 88 text

PROTOTIPADO ‣ Pulsando el botón de “Play”, entramos en el modo presentación, dentro del cual podemos ‣ Podemos cambiar el color de background del area del prototipo ‣ Similar a Marvelapp (tiene plugin para Sketch), aunque no tan potente

Slide 89

Slide 89 text

PROTOTIPADO ‣ Los cambios hechos en nuestro canvas, se actualizan automáticamente en la vista de prototipo ‣ Podemos compartir nuestro prototipo con quien queramos, sin necesidad de compartir el proyecto de diseño en sí mismo ‣ Las personas con quienes compartamos, pueden dejar comentarios

Slide 90

Slide 90 text

LIVE DEVICE PREVIEW pruebas en dispositivo real

Slide 91

Slide 91 text

LIVE DEVICE PREVIEW ‣ Es posible probar nuestros diseños directamente sobre un dispositivo real ‣ Para ello, hay que descargar la app “Figma Mirror App” en nuestro dispositivo ‣ iOS y Android: https://www.ﬁgma.com/downloads