Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Figma

6c68edbaa40e50a0420ee1c125d17189?s=47 Imanol Terán
September 21, 2017

 Figma

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

6c68edbaa40e50a0420ee1c125d17189?s=128

Imanol Terán

September 21, 2017
Tweet

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?
  15. None
  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

  78. None
  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