Figma

Diseña páginas web y aplicaciones móviles de forma colaborativa y online

Transcript

1. Imanol Terán Maruri - @itermar FIGMA Diseño colaborativo y online
2. ¿QUIÉN SOY? IMANOL TERÁN MARURI ‣ Diseñador y desarrollador frontend ‣ Fundador de widdiapps.com ‣ Puedes encontrarme en: ‣ itermar.io ‣ @itermar ‣ imanol@itermar.io
3. 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
4. INTRODUCCIÓN Sobre el diseño de web y apps
5. 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
6. INTRODUCCIÓN ‣ Herramientas muy buenas, muy potentes y que sirven para todo ‣ Illustrator, Fireworks, Affinity Designer, incluso Photoshop* ‣ * No es la mejor idea utilizar para diseñar una herramienta de tratamiento de imágenes (lo ideal —> mejor vectorial)
7. INTRODUCCIÓN ‣ Con el auge de las aplicaciones móviles y el responsive web design, surgen nuevas herramientas de diseño vectorial orientadas específicamente a diseñar para estos casos ‣ Ejemplos: Sketch, Adobe XD, Figma ‣ Interfaces más limpias, menos opciones pero más especificas ‣ Algunas, como Sketch, se pueden ampliar todo lo que queramos mediante plugins
8. PHOTOSHOP vs SKETCH vs FIGMA El “gigante” vs los “recién llegados”
9. 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
10. 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
11. 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
12. Online vs Nativo ‣ Ventajas de las aplicaciones online: ‣ Acceder desde cualquier dispositivo o lugar ‣ No debemos preocuparnos de actualizaciones ‣ Facilidad para compartir documentos
13. Online vs Nativo ‣ Ventajas de las aplicaciones de escritorio: ‣ Rendimiento
14. Online vs Nativo ¿Y si te digo que Figma une lo mejor de los dos mundos?
16. FIGMA ¿Qué es y cómo puede ayudarnos?
17. “El Google Docs del diseño”
18. FIGMA ‣ Herramienta de diseño vectorial online ‣ Colaboración en tiempo real ‣ Permite importar desde Sketch ‣ Puedes descargar los ficheros ‣ Exportación a PNG, SVG, JPG
19. FIGMA ‣ Shortcuts similares a los de Sketch ‣ Soporta navegadores Chrome y Firefox ‣ Versiones Desktop para Windows y macOS (WebView)
20. FIGMA ‣ Por defecto, trabaja con Google Fonts ‣ También puedes importar tus propias fuentes ‣ Incluye Fontawesome
21. CARACTERÍSTICAS Que hacen único a Figma
22. EDITOR
23. EDITOR ‣ El editor está formado por los siguientes elementos: ‣ Canvas ‣ Barra de herramientas (toolbar) ‣ Panel de capas ‣ Panel de propiedades ‣ Opciones para desarrolladores
24. CANVAS ‣ Zona en la que se sitúan todos los elementos que vayamos diseñando ‣ Se trata de un canvas infinito ‣ Podemos habilitar reglas en el canvas
25. TOOLBAR ‣ Ocupa toda la zona superior de nuestro editor y engloba todas las herramientas que están disponibles en nuestro editor
26. 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
27. 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.
28. 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)
29. PROPIEDADES
30. PROPIEDADES ‣ Las opciones de este panel cambian de forma dinámica en función del elemento que esté seleccionado en ese momento.
31. 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
32. 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
33. 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 filas o columnas para cambiar la orientación del layout
34. 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
35. 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
36. VERSIONES
37. 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
38. 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
39. 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
40. HERRAMIENTAS DE DISEÑO Objetos, textos…
41. DIBUJO
42. 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
43. 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
44. EDITOR DE IMÁGENES ‣ Si tenemos alguna imagen en nuestro diseño, podemos editarla modificando valores como: exposición, contraste, saturación…etc ‣ Para ello, con la imagen seleccionada, en el menú “FILL” pulsamos sobre la imagen
45. VECTORES
46. 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
47. 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
48. GRUPOS Y FRAMES
49. 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
50. 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
51. OPERACIONES BOOLEANAS
52. 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
53. COMPONENTES Reutilizando elementos
54. 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
55. 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 !!!
56. COMPONENTES 1. Seleccionar elemento 2. Clic en “Create component” (Toolbar) 3. Crear nuevas instancias ‣ Copiar + pegar ‣ Duplicate ‣ Alt + arrastrar
57. COMPONENTES ‣ Cambio en componente = cambio en instancia ‣ Cambio en instancia ≠ Cambio en componente
58. COMPONENTES ‣ Podemos tener componentes anidados. ‣ Juntar varios componentes y convertir ese elemento, a su vez, en otro componente.
59. TEXTO
60. 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
61. 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
62. 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
63. ATAJOS DE TECLADO ¡El teclado al poder!
64. ATAJOS DE TECLADO File and Properties: • Export: ⌘ + ⇧ + E • Save: ⌘ + S • Place: ⌘ + ⇧ + K • Color Picker: ^ + C or I • Enter Image Crop Mode: ⌥ + DOUBLE-CLICK
65. 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
66. 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
67. ATAJOS DE TECLADO Text: • Type Tool: T • Toggle Underline: ⌘ + U • Toggle Italic: ⌘ + I • Toggle Bold: ⌘ + B
68. 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
69. IMPORTACIÓN de trabajos previos
70. IMPORTACIÓN ‣ Figma permite importar los siguientes tipos de archivos: ‣ Sketch ‣ Imágenes ‣ Vectores
71. 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 ficheros independientes en Figma ‣ Para que los textos se importen correctamente: ‣ Utilizar la app de escritorio de Figma
72. 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
73. IMPORTACIÓN - VECTORES ‣ Podemos importar vectores desde los siguientes formatos ‣ Figma (*.fig) ‣ Sketch (*.sketch) ‣ SVG (*.svg)
74. 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
75. 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”
76. FLUJO DE TRABAJO Qué podemos hacer con nuestro diseño
77. COLABORACIÓN En tiempo real
79. 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
80. 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
81. COLABORACIÓN EN TIEMPO REAL ‣ Al ser una herramienta online, la gente con la que compartimos, no tiene que instalar nada ‣ Podemos ir modificando los permisos de ver/editar, en función de las fases de diseño
82. EXPORTAR desde Figma
83. 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 Affinity Designer ‣ En Sketch o Illustrator, podemos arrastrar los SVG generados en
84. EXPORTAR ASSETS ‣ En Figma, podemos exportar cualquier capa ‣ Normalmente exportaremos Grupos y Slices ‣ Podemos seleccionar resolución y formato de la exportación
85. PROTOTIPADO nuestro diseño “cobra vida”
86. 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 flujos de comportamiento de una app
87. 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 flujo de ejecución de la app
88. 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
89. 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
90. LIVE DEVICE PREVIEW pruebas en dispositivo real
91. 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.figma.com/downloads
92. PROYECTO App / Web responsive
93. PROYECTO
94. Imanol Terán Maruri - @itermar GRACIAS itermar.io