Herramientas de Figma

La barra de herramientas de Figma la encontramos en la parte superior del Editor. En esta clase vamos a hacer un recorrido completo por sus cuatro bloques.

Lo digo bien, aunque hablamos de una barra ya veremos que sus contenidos se “dividen” en cuatro partes distintas.

Me consta que este post es mastodóntico pero lo considero necesario si queremos controlar y aprender Figma al completo. Además nos servirá de menú para llegar a otras clases del curso.

Aún tengo que añadir algunas capturas de pantalla en el post, por favor te pido paciencia, muchas gracias.

Dicho esto comenzamos…

¿Qué hay en la barra de herramientas de Figma?

Aunque siempre podemos utilizar atajos de teclado u otros “caminos” para acceder a todas las herramientas de Figma debemos saber que el Toolbar nos permitirá llegar a todas las funcionalidades que ofrece la aplicación.

También quiero destacar que los contenidos de la barra no serán siempre los mismos, te doy dos ejemplos:

1. Las herramientas disponibles en la barra dependerá de lo que estemos haciendo en el Editor.
2. Los usuarios que tengan permisos para editar un archivo verán todas las opciones disponibles, en cambio los que sólo puedan verlo encontrarán con menos opciones.

Para explicarlo en profundidad dedicaré clases especiales, en realidad lo haré con todas las opciones de la barra de herramientas de Figma.

Cómo es el menú principal de Figma

Comenzando de izquierda a derecha el primer bloque es el Menú principal, también llamado por algunos “el icono de hamburguesa”. Cuando lo pinchamos con nuestro ratón se despliega un menú con las opciones que veremos a continuación. Al pinchar en casi todas ellas se abrirá un nuevo menú y las opciones estarán activadas o desactivadas dependiendo de lo que estemos haciendo en el Canvas.

Todos los menús están organizados por bloques separados por una línea, casi siempre formados por herramientas relacionadas con un tipo de tarea.

Veamos qué encontramos en el menú principal…

Borradores de Figma

Cuando pinchamos en Back to files nos vamos al apartado Drafts (Borradores) de nuestra cuenta. Allí podremos seleccionar un archivo o seguir navegando por los demás apartados.

Te dejo un tip que uso siempre: si quiero mantener abierto el archivo en el que me encuentro trabajando abro Back to files en otra pestaña del navegador.

Aunque me parece que queda claro, te diré que el ítem Back to files aparecerá sólo cuando usemos Figma en el navegador web. Si usamos la app de escritorio, para volver a nuestros archivos tendremos que pinchar en el icono con el logo de Figma que está por encima de la barra de herramientas.

Quick actions… o Search

Como hemos visto en otras clases del curso podemos utilizar Quick actions… para encontrar y acceder rápidamente a la herramienta que necesitemos usar. En las primeras versiones esta se llamaba simplemente Search (Buscador).

Archivos de Figma

El ítem File es lo que encontramos en el menú principal, después del campo para buscar herramientas.

En el menú File podemos usar:

• New, para crear un nuevo archivo.
• New from Sketch file…, para importar un archivo nativo de la aplicación Sketch.
• Place image…, para buscar una imagen en nuestro ordenador y añadirla al diseño. Cuando hayamos seleccionado el archivo podremos: descartar la acción, introducir la imagen o arrastrarla por el Canvas hasta el lugar deseado.
• Save local copy…, para guardar una copia del archivo en nuestro ordenador.
• Save to version history…, para guardar un “hito” en la historia de versiones de nuestro archivo. Podremos introducir al hito un título y una descripción.
• Export…, para exportar elementos de nuestro diseño. Para que funcione debemos utilizar antes el módulo o panel Export ubicado en el sidebar derecho de Figma. A este panel le dedicaremos otra clase.
• Export frames to PDF…, con esta opción podemos generar y descargar un archivo PDF con todos los Frames de la página seleccionada en nuestro archivo.

Editar archivos

El ítem Edit del menú de Figma es uno de los más extensos…

Veamos qué encontramos cuando lo abrimos:

• Undo, para deshacer cualquier acción.
• Redo, para rehacer una acción.
• Copy as, nos permite copiar algo en un formato específico en el portapapeles de nuestro sistema, el ítem «Copiar como» despliega un nuevo menú:
  • Copy as text, para «Copiar como texto» una cadena seleccionada.
  • Copy as CSS, para «Copiar como CSS», esta opción genera las clases (Cascading Style Sheets) de la selección que hayamos hecho en el Canvas.
  • Copy as SVG, genera el código SVG de la o las formas que tengamos seleccionadas. Si nuestra selección es una cadena de texto, lo que obtenemos será el mismo texto pero formado por curvas, es decir… con nodos y vectores.
• Paste over selection, la opción «Pegar sobre la selección» la puedes usar para pegar el contenido del portapapeles sobre aquello que tengas seleccionado en el Canvas.
• Paste to replace, entono un mea culpa, entiendo que esta opción la usaremos para «Pegar y Reemplazar» pero sinceramente jamás la he utilizado. En cuanto descubra cómo funciona añadiré más información.
• Duplicate, para duplicar en el Canvas aquello que hemos seleccionado.
• Delete, para borrar lo que hemos seleccionado.
• Set default properties, nos permite establecer las propiedades predeterminadas de un objeto para luego crear nuevos objetos con las mismas propiedades. Esta función de te ayudará a optimizar tu flujo de trabajo.
• Copy properties, para copiar las propiedades de un objeto.
• Paste properties, para pegar las propiedades que copiaste de un objeto a otro.
• Pick color, para abrir el Selector de color sobre el Canvas.
• Select all, para hacer una selección de todos los objetos del Canvas salvo aquellos que estén bloqueados.
• Select none, para deshacer una selección.
• Select inverse, para seleccionar los objetos del Canvas que no están seleccionados.

Cómo ver los diseños de Figma

En el menú del ítem View encontramos herramientas para controlar cómo y qué vemos en el Editor.

Herramientas en el ítem Ver:

• Pixel grid, para mostrar u ocultar en el Canvas la cuadrícula de píxeles.
• Layout grid, para mostrar u ocultar la cuadrícula dentro de los Frames en los que hayamos activado dicha herramienta.
• Rulers, para mostrar u ocultar las reglas en los ejes X e Y del Canvas.
• Show slices, para mostrar u ocultar en el Canvas las “rebanadas” o zonas de corte que queramos exportar.
• Outlines, para activar o desactivar la vista de contornos, de todos aquello que se encuentre en el Canvas.
• Pixel preview, para ver nuestro diseño en modo píxeles.
• Mask outlines, para ver u ocultar el contorno de las máscaras que creado en nuestro diseño.
• Frame outlines, para mostrar u ocultar el contorno de los Frames “padre”, esta opción es muy útil cuando usamos Frames con fondo transparente.
• Resource use, con esta opción mostramos u ocultamos un pequeño widget en la esquina superior izquierda del Canvas donde se muestran el nº de Layers y la memoria utilizada en nuestro archivo.
• Show/Hide UI, muestra u oculta la Barra de herramientas y las columnas del editor, dejando sólo visible el Canvas.
• Multiplayer cursors, con esta opción podremos mostrar u ocultar los cursores de los compañeros de equipo o colaboradores que estén trabajando en nuestro archivo.
• Panels, el ítem Paneles despliega otro menú para “navegar” o mostrar ciertas zonas de las columnas izquierda y derecha del Editor.
  • Open layers panel, abre o cierra la pestaña de capas.
  • Open assets panel, abre o cierra la pestaña componentes.
  • Open design panel, abre o cierra la pestaña Diseño.
  • Open prototype panel, abre o cierra la pestaña Prototipo.
  • Open code panel, abre o cierra la pestaña Código.
  • Show left sidebar, muestra u oculta el sidebar izquierdo.
• Zoom in, nos acerca al contenido que tenemos en el Canvas.
• Zoom out, nos aleja del contenido.
• Zoom to 100%, nos muestra el contenido del Canvas en su tamaño original.
• Zoom to fit, nos muestra todo el contenido del Canvas.
• Zoom to selection, nos pone en foco el contenido que hayamos seleccionado.
• Previous page, nos lleva a la página anterior de nuestro archivo.
• Next page, nos aleja a la página siguiente.
• Zoom to previous frame, nos pone en foco el frame anterior.
• Zoom to next frame, nos pone en foco el frame siguiente.
• Find previous frame, busca y nos muestra el frame anterior.
• Find next frame, busca y nos muestra el frame siguiente.

Las últimas 6 opciones del ítem View nos permiten navegar rápidamente por el Canvas.

Objetos de Figma

Con las herramientas del ítem Object podremos trabajar con todos los objetos del Canvas.

El menú que despliega Object es el más grande de la aplicación.

• Group selection, crea un Grupo con los elementos que hayamos seleccionado.
• Frame selection, crea un Frame con los elementos que hayamos seleccionado.
• Ungroup selection, deshace una selección de objetos.
• Use as mask, a partir de una selección, crea una máscara para todos los objetos que están por encima del que se encuentra por debajo de todos.
• Restore default thumbnail, deshace la portada que hayamos creado para nuestro archivo y la devuelve a su estado original.
• Add Auto Layout, crea un Auto Layout a partir de una selección de objetos en el Canvas.
• Create component, crea un Componente con lo que hayamos seleccionado.
• Reset all overrides, deshace los cambios que hicimos en una instancia de un componente.
• Detach instance, deshace la instancia de un componente, todos los objetos quedan “liberados”.
• Main component, abre otro menú con tres opciones para trabajar con un componente principal.
  • Go to main component, nos lleva hasta el componente principal (padre) de la instancia con la que estamos trabajando.
  • Push overrides to main component, aplica al componente principal los cambios que hayamos hecho en una instancia.
  • Restore main component, con esta opción podemos recuperar el componente principal si por alguna razón lo hemos eliminado.
• Bring to front, pone un objeto o una selección de objetos por encima de todos los demás.
• Bring forward, muy parecida a la opción anterior, pone los objetos que hayamos seleccionado por encima del que se encontraba sobre ellos.
• Send backward, igual que la anterior, pero hacia abajo.
• Send to back, lleva un objeto o una selección de objetos al fondo del Canvas.
• Flip horizontal, voltea de forma horizontal el o los objetos que hayamos seleccionado.
• Flip vertical, hace lo mismo que la opción anterior pero en vertical.
• Rotate 180º, rota un objeto o una selección en 180º.
• Rotate 90º left, hace una rotación de 90º hacia la izquierda del objeto o la selección que hagamos.
• Rotate 90º right, igual que la opción anterior pero hacia la derecha.
• Flatten selection, aplana una selección de objetos.
• Boolean groups, se abre un menú con las operaciones booleanas que podemos aplicar a una selección.
  • Union selection, une los objetos que hayamos seleccionado.
  • Subtract selection, oculta en el objeto inferior la zona ocupada del mismo por el o los objetos que tenga encima.
  • Intersect, hace lo mismo que la opción anterior, pero al revés, la deja visible. Hay otra diferencias, sólo funciona con una selección de dos objetos.
  • Exclude, oculta las zonas donde se superponen los objetos que hayamos seleccionado.
• Rasterize selection, genera una imagen bitmap (mapa de bits) con los objetos de una selección.
• Show/Hide selection, muestra u oculta los objetos seleccionados.
• Lock/Unlock selection, bloque o desbloquea aquello que hayamos seleccionado.
• Hide other layers, oculta los objetos que no estén seleccionados.
• Collapse layers, cierra o contrae todas las capas del Canvas en el que estemos trabajando.
• Remove fill, quita el color de relleno del o los objetos que tengamos seleccionados.
• Remove stroke, quita el contorno de los objetos que tengamos en nuestra selección.
• Swap fill and stroke, invierte los colores de relleno y contorno del o los objetos que tengamos en nuestra selección.

Diseñar con vectores en Figma

Las opciones del menú Vector las usaremos para trabajar con los nodos y las curvas de nuestros diseños.

Es probable que la cantidad de herramientas del menú Vector te sorprendan, como puedes ver en la captura de pantalla son sólo tres.

El trabajo con vectores se hará con herramientas del 2º bloque, sigue leyendo con tranquilidad, más abajo hablaré sobre ellas.

• Join selection, une los nodos de los vectores que tengamos seleccionados.
• Smooth join selection, une los nodos de los vectores seleccionados.
• Delete and heal selection, borra los nodos seleccionados de un vector.

Textos en los diseños de Figma

El menú Text nos ayuda a configurar el aspecto de las cadenas de texto utilizadas en nuestros diseños.

Las herramientas del ítem Text:

• Bold, pone el texto seleccionado en negrita.
• Italic, pone un texto seleccionado en cursiva.
• Underline, subraya el texto.
• Strikethrough, tacha una cadena de texto con una línea continua.
• Original case, pone una cadena de texto en su formato original, esta opción está relacionada con las dos siguientes.
• Upper case, pone todas las letras de un texto en mayúsculas.
• Lower case, hace lo mismo que la opción anterior, pero en minúsculas.
• Increase font size, sube un punto el tamaño del texto.
• Decrease font size, hace lo mismo que la opción anterior pero al contrario, lo baja.
• Increase font weight, incrementa el peso de un texto, por ejemplo, de Regular a Medium.
• Decrease font weight, hace lo mismo que la opción anterior pero al contrario, lo reduce, de Medium a Regular.
• Increase font height, sube un punto el alto de fila de un texto.
• Decrease font height, hace lo mismo que la opción anterior pero al contrario, lo baja.
• Increase font spacing, sube un punto el espaciado de una cadena de texto.
• Decrease font spacing, hace lo mismo que la opción anterior pero al contrario, lo baja.
• Align, este ítem despliega un nuevo menú que nos permite cambiar la alineación del texto.
  • Text align left, ajusta el texto a la izquierda.
  • Text align center, ajusta el texto en el centro.
  • Text align right, ajusta el texto a la derecha.
  • Text align justified, justifica el texto.
  • Text align top, ajusta el texto al margen superior de la fila.
  • Text align middle, ajusta el texto en el medio de la fila, en el “centro vertical”.
  • Text align bottom, ajusta el texto al margen inferior de la fila.

Organizar capas y objetos

Con las opciones del menú Arrange podremos controlar la alineación y distribución de los objetos que haya en el Canvas.

Herramientas del ítem Arrange:

• Round pixel, ajusta los objetos seleccionados a coordenadas de píxeles redondos, por ejemplo -70px en el eje X.
• Align left, ajusta a la izquierda los objetos de una selección.
• Align horizontal centers, ajusta los objetos en el centro horizontal.
• Align right, los ajusta a la derecha.
• Align top, ajusta los objetos al borde superior de la selección
• Align vertical center, los ajusta en el centro vertical.
• Align bottom, los ajusta al borde inferior.
• Tidy up, ajusta los objetos de una selección a los márgenes superior e inferior o izquierdo y derecho, dependiendo de la ubicación que tengan. Si hay más de dos, se aplica automáticamente la misma separación entre todos ellos.
• Pack horizontal, ajusta todos los objetos de una selección en posición horizontal, sin separación entre ellos.
• Pack vertical, hace lo mismo que la opción anterior pero lo hace en posición vertical.
• Distribute horizontal spacing, aplica el mismo espacio horizontal entre todos los objetos seleccionados.
• Distribute vertical spacing, hace lo mismo que la opción anterior pero en vertical.
• Distribute left, distribuye de forma escalonada los objetos de una selección a partir de su margen izquierdo.
• Distribute horizontal centers, hace lo mismo que la opción anterior pero a partir de su centro horizontal.
• Distribute right, los distribuye como en las opciones anteriores pero tomando como referencia su margen derecho.
• Distribute top, los distribuye “en cascada” a partir de tu margen superior.
• Distribute vertical centers, igual que la opción anterior pero a partir de su centro vertical.
• Distribute bottom, hace lo mismo que las cinco anteriores, pero toma como referencia el margen inferior.

Plugins de Figma

El menú Plugins muestra en primer lugar la lista de plugins que hayamos instalado en nuestra cuenta. Algunos de los ítems de esta lista podrá tener su propio menú, todo depende del plugin, algunos la tienen y otros no.

Debajo de la lista de plugins instalados veremos las siguientes opciones:

• Run last plugin, para ejecutar el último plugin utilizado, esta opción es muy apropiada si queremos optimizar el tiempo.
• Manage plugins…, nos llevará al apartado Plugins de nuestro panel de usuario. Allí podremos eliminarlos.
• Browse plugins in Community, si queremos buscar nuevos plugins podemos pinchar en esta opción que nos llevará a Figma Community.

Integraciones con Figma

Despliega un menú con las integraciones que hayamos configurado en nuestra cuenta de Figma. Allí aparecerán herramientas como Jira, Trello, Asana, Zeplin, Confluence, Maze, Framer, Slack, Notion, etc.

Preferencias de Figma

¿Qué encontramos en ítem Preferencias del menú principal?

Herramientas para configurar Figma a tus necesidades:

• Snap to geometry, activamos esta opción cuando trabajamos con formas y queremos ajustar nuestros vectores a los nodos de la misma.
• Snap to objects, esta opción nos ayuda a ajustarnos a los objetos que tenemos en el Canvas.
• Snap to pixel grid, si tenemos esta opción activada nos ajustaremos a la cuadrícula de píxeles.
• Keep tool selected after use, la activaremos mantener una herramienta seleccionada después de usarla.
• Highlight layers on hover, para resaltar las capas cuando pasamos sobre ellas con el ratón.
• Rename duplicated layers, para cambiar el nombre de las capas duplicadas, lo hará Figma será mantener el nombre de la capa original añadiendo un nº al final.
• Show dimensions on objects, cuando seleccionemos uno o más objetos del Canvas, Figma mostrará sus dimensiones en el margen inferior de la selección.
• Hide canvas UI during changes, oculta las “ayudas visuales” de Figma cuando hacemos cambios en un objeto que tenemos seleccionado, por ejemplo cuando modificamos el color de un contorno.
• Keyboard zooms into selection, esta opción nos dará más control y precisión si seleccionamos uno o más objetos y utilizamos el Zoom desde el teclado.
• Substitute smart quotes, para sustituir las comillas tipográficas.
• Show Google Fonts, para mostrar las fuentes de Google.
• Flip objects while resizing, para voltear objetos mientras cambiamos el tamaño.
• Invert zoom direction, para invertir la dirección del zoom.
• Use number keys for opacity, para cambiar la opacidad de los objetos utilizando las teclas numéricas.
• Open links in desktop app, para abrir los enlaces en la aplicación de escritorio. Esta opción sólo se muestra cuando usamos Figma en el navegador.
• Nudge amount…, esta opción abrirá un pequeño modal desde el cual podemos cambiar el valor de empuje para mover o redimensionar los objetos del Canvas.

Librerías de estilos y componentes

El ítem Libraries abre un modal desde donde podremos controlar (activar o desactivar) las librerías que utilice nuestro archivo, también podremos conocer los detalles de las actualizaciones que hayamos hecho en ellas.

Descargar Figma para escritorio

Cuando pinchamos en esta opción automáticamente se inicia la descarga de la aplicación para usar Figma para nuestro escritorio. El sistema detectará si estás trabajando con macOS o con Windows. Get desktop app sólo aparecerá cuando usemos Figma en el navegador.

Ayuda y cuenta de usuario

El último ítem del menú principal de Figma…

¿Qué encontramos en Help and account?

• Help page, nos llevará a la página de ayuda de Figma.com
• Keyboard shortcuts, abre un panel sobre el Editor en el cual podemos ver los principales atajos de teclado de la aplicación.
• Community forum, nos lleva al apartado de de Figma en Spectrum.chat
• Video tutorials, abre una pestaña con el canal de Figma en YouTube.
• Release notes, nos muestra un apartado del sitio web de Figma donde se dejan notas con descripciones de todos los upgrades.
• Open font settings, descarga la aplicación para gestionar tus fuentes.
• Legal summary, muestra una página con información legal, privacidad, condiciones de uso, etc.
• Account settings, nos manda al perfil de nuestra cuenta de usuario.
• Log out, cierra la sesión de la cuenta.

Herramientas de Figma

Sigamos nuestro recorrido, ahora nos centraremos en el segundo bloque, el de las Herramientas de Figma. Está formado por 7 iconos, 4 de ellos despliegan un menú con otros tantos.

Aunque aquí compartiré una descripción como dije anteriormente dedicaré clases puntuales para hablar de cada una de las herramientas.

Mover y Escalar diseños

El primer icono del bloque son dos en realidad:

• Move, Mover es la herramienta que de forma predeterminada muestra Figma cuando abrimos un archivo, con ella podemos seleccionar y mover los objetos por el Canvas.
• Scale, si pinchamos en la flecha del icono Mover desplegamos el menú donde podremos seleccionar la herramienta Escalar, la usaremos para cambiar el tamaño de un objeto o de varios dentro de una selección, de manera proporcional.

Frames y Slices

Segundo icono del bloque, como el anterior nos ofreces dos herramientas:

• Frame, con ella podremos crear Frames en el Canvas. El uso de marcos es casi obligatorio, los usaremos para crear mesas de trabajo o artboards y zonas “inteligentes” que le darán vida a nuestros diseños.
• Slice, la usaremos para crear zonas dentro del Canvas que necesitemos exportar como archivos JPG, PNG, SVG o PDF.

Formas de Figma

Las herramientas de forma están dentro del tercer icono del bloque:

• Rectangle, sin duda alguna el Rectángulo es una de las herramientas más utilizadas en los diseños de interfaz.
• Line, de la Línea podemos decir lo mismo.
• Arrow, Flecha, también la usaremos bastante.
• Ellipse, con ella podremos crear Elipses o Círculos.
• Polygon, en principio la herramienta Polígono podría parecer de poca utilidad, pero si miramos nuestros proyectos veremos que siempre hay formas como esas en nuestras pantallas.
• Star, podemos decir lo mismo de la Estrella.
• Place image, Colocar imagen será otra de las herramientas más usadas.

Dibujar con vectores y a mano alzada en Figma

Cuarto bloque de iconos, son dos:

• Pen, con “Pluma” vamos a trabajar los nodos y vectores de las formas que usamos en nuestro diseño.
• Pencil, con el lápiz podremos dibujar a mano alzada, hacer anotaciones, dibujos, etc.

Herramienta de texto

Llegamos a los iconos del segundo bloque que no tienen menú, el primero de ellos es el icono de Texto.

• Con esta herramienta podremos crear en el Canvas cadenas de texto que crecerá de manera horizontal.
• También podremos pinchar sobre el Canvas y arrastrar el ratón para crear una capa de texto de ancho fijo.

Luego si fuera necesario, podremos hacer cambios en las dos opciones anteriores.

La herramienta Mano

La siguiente es la herramienta Mano, me consta que casi todos nosotros jamás vamos a pinchar en este icono porque evidentemente es mucho más rápido activarla utilizando la barra espaciadora de nuestro teclado.

Con ella podemos movernos por el Canvas de Figma para hacer foco en los detalles del diseño que estamos realizando.

Comentarios de Figma

El último icono es el de Comentarios, esta herramienta la usaremos para dos cosas:

• Dejar comentarios en el Canvas.
• Leer y/o responder nuestros comentarios o los de nuestros compañeros de equipo y demás personas que estén colaborando en nuestro diseño.

Herramientas contextuales

Tercer bloque del toolbar de Figma, las herramientas de contexto. Si seleccionamos uno o más objetos en el Canvas podremos encontrar algunas de las siguientes herramientas:

Editar objetos

Con ella podremos trabajar con los nodos y vectores del objeto que hayamos seleccionado.

Resetear la instancia de un componente

La usaremos para “deshacer” los cambios hechos en la instancia de un Componente.

Crear un componente de Figma

Se utiliza para crear un Componente a partir de una selección de objetos.

Crear máscaras en Figma

Con Use as Mark podremos crear máscaras.

Crear un link con Figma

Nos permite añadir un enlace a un texto. Crear enlace sólo aparecerá cuando seleccionemos en el Canvas una cadena de texto.

Operaciones booleanas

El icono de Operaciones booleanas aparecerá sólo cuando hayamos seleccionado más de un objeto en el Canvas.

Por defecto Figma nos muestra la opción para crear una unión, pero si pinchamos en el icono podremos ver las cuatro operaciones booleanas y una quinta “Flatten selection”. De las cinco opciones hablé hace un rato en el apartado anterior: Object > Boolean groups.

Otras herramientas

Cuando comenzamos la clase dije que algunas herramientas de la barra pueden cambiar… aquí vemos otro ejemplo. Cuando no tenemos nada seleccionado en el Canvas las opciones que aparecen en el tercer bloque son dos: Draft y Untitled.

• Draft, si pinchamos en ella se abrirá un modal desde el cual podremos mover el archivo a una carpeta de proyecto. Podremos seleccionar una de la lista o utilizar el campo de búsqueda para encontrarla.
• Untitled, cuando creamos un archivo Figma lo nombra por defecto como Untitled, si pinchamos sobre el mismo se activará un INPUT para introducir el nombre que queramos.

Si pinchamos en el icono drop down, justo a la derecha el nombre del archivo desplegable un menú con las siguientes opciones:

• Show Version History, abrirá en el sidebar derecho el historial de versiones.
• Publish Styles & Components, abrirá un modal para publicar estilos y componentes en las Librerías de equipo.
• Export, abre el modal de exportación.
• Duplicate, con esta opción podremos duplicar el archivo.
• Rename, nos servirá para cambiar el nombre del archivo.
• Delete, la usaremos para borrar el archivo.
• Restore default thumbnail, si restaurar el Cover (o portada) original del archivo.
• Move to Project, mover el archivo a una carpeta de proyecto.

Compartir y Configuración

En el cuarto y último bloque tenemos las herramientas de Figma para Compartir y Configurar nuestro archivo.

• Avatar, en principio lo primero que encontramos es nuestro avatar. En el mismo sitio se mostrarán también los avatares de los usuarios que estén viendo o editando el archivo.
• Share, el botón de Compartir lanza un modal con varias opciones:
  • Invitar a usuarios
  • Copiar el link del archivo en el portapapeles de nuestro sistema.
  • Eliminar o cambiar los permisos de los usuarios que colaboran en el archivo.
  • Decidir si los colaboradores pueden copiar, compartir o exportar el archivo.
  • Obtener un código para embeber el archivo en un sitio web.
  • Crear un enlace a un Frame determinado.
  • Publicar el archivo en Figma Community.
• Present, el botón Presentar genera una nueva pestaña con el prototipo que hayamos creado.
• Zoom/view Options, la última muestra el tamaño del Zoom y si lo pinchamos despliega un menú con distintas opciones:
  • Campo de zoom, cuando abrimos el menú la primera opción aparece en foco, es un INPUT en el cual podemos introducir el % de zoom que queremos aplicar.
  • Zoom in, Zoom out, Zoom to fit, Zoom to 50%, Zoom to 100%, Zoom to 200%, de todas estas opciones hablé hace un rato en el apartado View de la presente clase.
  • Pixel preview, abre un menú con opciones de vista previa de píxeles:
    • Disabled, por defecto aparece activada, la podremos usar si activamos una de las dos opciones siguientes.
    • 1x, para activar la vista previa en píxeles “normal”.
    • 2x, para activar la vista previa en modo Retina.
  • Pixel grid, muestra u oculta la cuadrícula de píxeles.
  • Snap to pixel grid, en el apartado Preferencias hablé sobre esta opción.
  • Layout grids, Rulers, Outlines y Multiplayer cursors, de todas estas opciones también hablé en el apartado View.

Aquí concluye este recorrido completo y algo exhaustivo de todas las herramientas de Figma. Me consta que es un artículo largo, pero estoy convencido que será una buena guía rápida para saber todo lo que podemos hacer con la aplicación.

Y como dije justo después de comenzar la clase, la utilizaremos como índice de contenidos para acceder a casi todas las clases del curso de Figma.

Por favor, si compartes esta información cita la fuente con la URL de este post, como siempre, muchas gracias.

Los iconos que utilicé en algunas de las capturas de pantalla de este post son de Freepik.

✅ Tutoriales de 2023

¿Qué es y cómo trabaja un Product Designer?

¿Cómo trabaja un profesional dedicado al diseño de producto?

Cómo diseñar un buscador en Figma

Tutorial paso a paso para crear una barra de búsqueda para una aplicación móvil.

Cómo crear una barra de navegación en Figma

Tutorial para diseñar componentes y prototipo.

Cómo crear un menú desplegable en Figma

Indicaciones paso a paso para montar un menú dropdown.