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:
- Las herramientas disponibles en la barra dependerá de lo que estemos haciendo en el Editor.
- 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.
Artículos relacionados
Aprende a usar Figma, Sketch y Webflow
Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.
Información de privacidad
En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Hola,
Mi nombre es Andrea y quisiera preguntarte si de casualidad sabrás como solucionar esto que me aparece en Figma y no me deja editar la tipografía, ya instale un plug-in, pero no funciona ya busque en Google y YouTube, pero no he tenido éxito tampoco y la única forma es cambiar la tipografía para que me deje editar, pero no es lo más viable, ya que esa tipografía es la que maneja el lugar donde trabajo y es parte de su branding.
Si me pudieras ayudar te lo agradeceré infinitamente.
Hola Andrea, una pregunta… cuando dices «editar la tipografía» hablas de cambiar su forma? pasarla a vectores y cambiarla? o con editar quieres decir cambiar parámetros de a misma? si puedes darme más información con mucho gusto te ayudo. Si quieres búscame en Discord o Instagram y me explicas. Gracias.
Si entiendo bien, creo que ella se refiere a que tiene un diseño en figma con una tipografía (fuente) que no está instalada (no está dentro de las disponibles en Figma), por lo tanto, el programa bloquea la edición de cualquier texto escrito con esa tipografía.
A mí me pasó lo mismo y tuve que descargar la que necesitaba e instalarla en figma. Juanpol tiene un artículo para ello, espero te sirva ;)
https://www.juanpol.com/como-instalar-fuentes-en-figma/
A propósito Juanpol, mil gracias por tu blog, tu tiempo y los conocimientos que nos compartes.
Muchas gracias por tu aporte Maria Paula!
Hola, felicitaciones.
Eres la única persona que ha explicado cada herramienta de forma detallada y ordenada.
Debo hacer un logo y otras piezas gráficas.
Tienes algo sobre estos temas específicos?
Gracias por tu tiempo.
Hola Beatriz, me alegra saber que este contenido te ha gustado. Sobre los temas que me comentas, podrías darme un poco más información al respecto? Quieres tutoriales detallando cada una de las herramientas? Cuéntame por favor y tomo nota. Gracias!
Tengo un diseño y al momento de sacar algunos de los graficos, algunos constan de 2 o mas diseños pero que se debe sacar como un todo para mantener el fondo transparente tambien, pero al estar sueltos cuando uno quiere exportar, los exporta de forma individual, he notado que cuando estan 2 o mas graficos en una misma capa si se puede exportar como un todo con fondo transparente, pero no encuentro forma ni de crear una capa nueva para poner adentro ni de poder exportar de alguna forma 2 o mas graficos como un todo. Hay forma de hacerlo???
Gracias, excelente explicación, me queda un duda, como ocultar las barras laterales en el figma, para visualizar toda la pantalla
Hola, no entiendo muy bien cómo funciona en Preferencias: Hide canvas UI during changes. ¿Cómo puedo comprobarlo?
Hola Esme, tu pregunta no es nueva, la recibo de vez en cuando. Para salir de dudas publicaré en los próximos días un artículo para explicar y mostrar su funcionamiento. Gracias por tu interés.
Muy buena guía de Figma!!!!!!!! Muy detallada!!! Te felicitooo!!! Gracias!!!!!
Muy buen trabajo sobre la aplicación Figma. ¿Sabes si este programa tiene algo parecido al «creador de formas» de Illustrator? Lo utilizo mucho, y creo que sería muy útil en Figma.
Hola Sergio, Figma te permite crear formas y trazos, pero las herramientas son muy limitadas si las comparamos con las de una aplicación como Adobe Illustrator. En principio te recomiendo hacer un mix, usar Figma para lo básico e AI para los diseños más complejos.
Muchas gracias! Tu guía me sacó muchas dudas, recién estoy empezando UX/UI y Figma es un mundo nuevo para mí. Saludos!
Bienvenida Mercedes, gracias por dejar tus comentarios. Cualquier duda o pregunta ya sabes, la puedes dejar y la responderé con gusto. Saludos.
Que buen material!!Estoy estudiando UX/UX y no sabes que falta me hacía!! Muchísimas gracias!!
Muchas gracias a ti Virginia! Me alega saber que encontraste en el blog material de tu interés.
Hola! cómo estás?
Muchas gracias por toda la info que publicás, es super útil. Te quería consultar si por casualidad conocés la manera de modificar el tamaño de fuente de la barra de herramientas, se me redujo el tamaño de todo lo que no es el lienzo principal y no logro volver a ampliarlo.
Muchas gracias
Hola Carla, leyendo tu comentario intuyo que estás usando Figma en el browser (tu navegador web). Si las barras de herramientas se ven más pequeñas creo que lo puedes solucionar si llevas al 100% de tamaño el zoom de tu navegador. De ese modo se solucionará. Si el problema persiste déjamelo saber y buscamos otra solución. Saludos.