Please enable JavaScript.
Coggle requires JavaScript to display documents.
Figma, Figma intermedio, Figma avanzado - Coggle Diagram
Figma
-
-
-
Trabajar con frames
- Click en icono corchete (menú sup-izq)
- Click en el tamaño de frame que aparecen en la sección Desing de la parte derecha de la pantalla (En: Android small (360x640))
Básicos de figma: Retículas, formas y textos
Retículas
- Opciones: Grid, Columns o Rows
- Stretch: tipo de column o row en el que las columnas o los rows rellenan automáticamente todo el espacio
Formas
- Seleccionar las formas desde el menú Shape tools (parte sup-izq) que contiene formas básicas. Esas formas pueden unirse en grupos, seleccionandolas previamente con crtl + shift o biene desde el apartado Layers (sección izquierda) y acceder al menú contextual (click der) llamado Group selection o Ungroup si se quiere desagrupar
Texto
- Utilizar el menú Texto de la parte sup-izq
Importar elementos
Importar imágenes
- Imágenes gratuitas en unsplash.com
- Selecciona la opción "Place Image/video" del menú Shape Tools (Menú sup-izq)
- Utiliza la opción fill, fit, crop y tile
- fill: rellena el marco con la imagen. Para ello puede distorsionar la imagen.
- fit: ajusta la imagen al marco para que se visualice completamente.
- Crop: rellena el marcon con la imagen. No distorsiona la imagen por lo que puede que alguna parte de la imagen no se muestre.
- Tile: repite la imagen en mosaico.
Importar imágenes desde plugin
- Unplash y pixels (bancos de imágenes gratuitos) cuentan con plugins para descargar imágenes desde figma sin necesidad de descargar previamente al ordenador.
- Como obtener y acceder al plugin: click en menú Resources (sup-izq) y buscar unsplash y clickar en Run.
Legibilidad texto sobre imagen
- Se pude o bien modificar las propiedades del texto o bien añadir gradiente a la imagen o ambas cosas.
- Añadir gradiente a la imagen: Selecciona la imagen y dar al símbolo + en el menú de la derecha. Aparece una especie de capa de color que podemos modificar. Puede ser opaca o añadir un gradiente.
Exportar elementos
- Selecciona el elemento a exportar
- en el menú derecho, en la parte inferior, se puede ver la opción export.
- Se puede escoger la resolución de imagen (1x, 2x etc) y el formato
-
Trabajar con capas
- Similar a Photoshop
- Se pueden ver en la parte izquierda
Figma intermedio
Trabaja con estilos
- Crear guías de estilos y aplicarlos
Crea una card
- Añade los elementos que se quiera a un layout (rectángulos, textos, etc).
- Selecciona los elementos que se quiera y añadirles autolayout para editar paddins, margins, etc.
- Crea un componente de la card (click sobre el botón izq del menú sup-central)
Crea un botón
- Crear un texto
- Btn-der sobre el texto y seleccionar "Add auto layout"
- Dar color al fondo y al texto
- Duplicar botón: y dar distinta forma y color para que cambie cuando se ejecute un evento (Para duplicar: Alt+arrastrar)
- Crear un set de componentes (seleccionar ambos btns y click sobre icono izquierdo del menú sup-centro que depliega menú del que se ha deseleccionar "create component set")
- Añadir un evento: para ello click sobre un btn y seleccionar la pestaña prototype (derecha). Seguidamente sacar una flecha de un btn para que apunte a otro btn y añadir el evento.
- Sacar del Layout los btns.
- En la pestaña Asset (izquierda) seleccionar el nuevo componente creado y arrastrarlo al layout.
- Ejecutar y se verá el efecto creado
Crea un menú.
- Crear varios texto y duplicarlos con Alt+arrastrar
- Seleccionar todos y click derecho "crear auto layout".
- Seleccionar ambos botnes y sobre el btn click derecho sobre menú Components (sup-centro) y seleccionar y seleccionar "Create component set".
- Jugar con las propiedades de autolayout para establecer el menú que queremos
Crear menú interactivo
- Similar a btn interactivo
- Crear un btn con la forma que se quiera y duplicarlo cambiando alguna de sus características
- Seleccionar ambos btns y click sobre ellos seleccionando "Add autolayout".
- Crear un set de componentes (seleccionar ambos btns y click sobre "create component set" icono izquierdo del menú sup-centro que despliega menú con esa opción.
- Arrastrar los componentes fuera del layout. Seleccionar el nuevo componente desde la pestaña "Asset" del panel de la izquierda y arrastrarla al layout.
- Duplicar el nuevo componentes tantas veces como opciones de menú queramos y modificarles el texto.
- Unir los componentes con "add autolayout" (opción del menú contextual click-der)
-
Figma avanzado
Card interactiva
- Crea la card
- Duplica el componente
- Crear un component set
- Dar efecto de sobra al car duplicado
- Añadir el nuevo componente a donde queramos