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
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
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)
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
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
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
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.
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)
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
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
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
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
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
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
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
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
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
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
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
usuarios avanzados ‣ Flexibles para utilizarlos sobre el proceso de diseño ‣ ¡¡¡ Duplicar un componente crea nuevas instancias del mismo, no copias !!!
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
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
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
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
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
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
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
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
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
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
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
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
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
imanolteran
cpineda57
commune
majimasachi
sms_tech
kubosho
masayofff
chiemitaki
moshimoshiyuki
mosmos_noki
oguemon
zozodevelopers
godlingkogami
thekraken
keavy
marcelosomers
jonyablonski
addyosmani
garrettdimon
trishagee
jeffersonlam
tenderlove
marktimemedia
csswizardry
deanohume
