En esta guía, cubriremos los conceptos básicos para trabajar con archivos de diseño en Figma Design.

Si acabas de empezar en Figma Design, te recomendamos que realices nuestro curso Figma Design para principiantes. En este curso, cubrimos todo, desde la navegación por archivos de diseño, el trabajo con capas, la aplicación de disposición automática a los marcos, la creación de componentes y la adición de conexiones de prototipos a los diseños. Al final, habrás creado un sitio web de portafolio personalizable completamente desde cero. Obtén más información sobre el curso de Figma Design para principiantes.

¿Quieres saber más sobre la diferencia entre los productos de Figma? Consulta nuestra guía Qué es Figma.

¿Qué son los archivos de diseño?

Los archivos de diseño te proporcionan las herramientas que necesitas para crear, compartir y probar tus diseños. Son populares entre diseñadores, gerentes de producto, escritores y desarrolladores. ¡Pero cualquiera que desee crear o comunicarse visualmente puede usarlos!

Crea archivos de diseño para abordar problemas específicos o gestiona todo el proceso de diseño. Puedes esbozar ideas por tu cuenta o compartirlas con otros para crear juntos y recibir comentarios.

Los archivos de Figma se actualizan en tiempo real, por lo que las personas pueden trabajar en el mismo archivo a la vez. Con un único archivo en vivo, todos pueden estar en la misma página sin necesidad de guardar, descargar y compartirse documentos.

Cada archivo tiene su propio historial de versiones, donde puedes seguir la evolución de tus diseños. Explora iteraciones anteriores o crea nuevas versiones para capturar hitos.

Archivos de diseño en el explorador de archivos

Puedes identificar los archivos de Figma Design en el explorador de archivos por el ícono que aparece en la ficha del archivo.

Ejemplo de un archivo de diseño con el ícono del archivo de diseño marcado con un círculo.

Encuentra tu forma

Si eres nuevo en Figma, es normal que te sientas un poco perdido cuando abras un archivo por primera vez. Te llevaremos a un recorrido para que puedas orientarte y empezar a colaborar con tu equipo.

Interfaz de usuario abstracta de Figma con barras laterales y una barra de herramientas inferior; el lienzo central está prácticamente en blanco.

Los archivos de diseño tienen cuatro regiones distintas: una barra de herramientas, una barra lateral izquierda y una barra lateral derecha, y el lienzo.

Barra de herramientas de Figma Design con diversas herramientas sobre un fondo púrpura claro.

La barra de herramientas es el centro para interactuar con el lienzo y agregarle objetos. Alberga todas tus herramientas para seleccionar objetos, moverte por el lienzo y crear marcos, formas, texto y otras capas ↓. Estos serán los componentes básicos de sus diseños.

Cuando estés listo para profundizar, puedes explorar cada una de las herramientas en la barra de herramientas →

Barra lateral izquierda que muestra las opciones de los archivos de diseño de Figma, la navegación por las páginas y las herramientas de recursos sobre un fondo púrpura.

La barra lateral izquierda te brinda acceso a capas, páginas, activos y es el lugar donde puedes realizar acciones en tus archivos.

Utiliza el panel de recursos para ver los componentes locales o buscar componentes de kits o bibliotecas (se necesita acceso de edición).
Realiza acciones a nivel de archivo, como moverlo, publicar una biblioteca, crear una rama o mostrar el historial de versiones.
Utiliza el menú para acceder a más funciones, acciones y configuraciones. O ajusta tus preferencias, como el modo oscuro o el comportamiento de desplazamiento.

Explora la barra lateral izquierda →

En la barra lateral derecha, puedes obtener más información sobre tus diseños. Cuando no tengas nada seleccionado, puedes ver los recursos locales, como el color o los estilos de texto.

Con una capa seleccionada, puedes explorar las propiedades de la selección actual. Tus permisos determinarán lo que puedes ver en la barra lateral y qué acciones puedes realizar.

En la barra lateral derecha también encontrarás herramientas para compartir tus diseños y trabajar en equipo en tiempo real. Por ejemplo, puedes compartir el archivo, ver quién más está conectado, hablar por audio y mucho más.

Si lo necesitas, también puedes ajustar tus opciones personales de zoom y visualización. Los cambios que realices aquí solo se aplicarán a tu vista.

Comparación en paralelo de las pestañas Comentarios y Propiedades, que muestra los comentarios a la izquierda y las propiedades de diseño a la derecha.

Acceso de solo visualización

Comentario: Ver y buscar comentarios
Propiedades: Ver las propiedades de tu selección

Una comparación en paralelo de la barra lateral derecha, que muestra un ejemplo cuando se selecciona la pestaña Diseño y otro cuando se selecciona la pestaña Prototipo. La configuración asociada se muestra debajo de la pestaña seleccionada.

Acceso de edición

Diseño: ve y edita las propiedades de diseño de las capas.
Prototipo: Ver y editar interacciones, flujos y configuraciones del prototipo

Explora la barra lateral derecha →

Inspeccionar diseños con Dev Mode

¿Estás viendo el archivo como parte del proceso de entrega? Dev Mode es una interfaz enfocada en el desarrollador para inspeccionar los archivos de diseño y navegar por ellos.

Dev Mode te permite identificar diseños que están Ready for dev y acceder a la información necesaria para transformar los diseños en código. Guía sobre Dev Mode →

Lienzo

El lienzo es tu área de trabajo donde organizarás capas para crear los diseños. Encontrarás mucho espacio para explorar e iterar tus ideas.

Desplaza para moverte

Desplaza para moverte por el archivo y ver qué más hay en el lienzo.

Mouse: mantén presionada la barra espaciadora, luego haz clic y arrastra para moverte por el lienzo.

Trackpad: con dos dedos, desliza en cualquier dirección para mover el lienzo. Figma utilizará la configuración predeterminada de dirección de desplazamiento de tu computadora.

Acerca o aleja el zoom

Acerca la imagen para ver los detalles, o aléjala para ver la totalidad. Observa el nivel de zoom actual en la esquina superior derecha de la pantalla.

Mouse: Mantén presionadas las teclas ⌘ Command/Ctrl y desplázate hacia abajo para acercar la imagen y hacia arriba para alejarla.

Panel táctil: Junta dos dedos para alejarte o sepáralos para acercarte.

Imagen animada que muestra un ejemplo de pinzamiento, desplazamiento y zoom en el lienzo.

Exploración sin estrés

Si es la primera vez que te unes o exploras un archivo, interactuar con los elementos en el lienzo puede parecer un poco intimidante. A menudo, a las personas les preocupa mover, cambiar o eliminar algún elemento por error.

Un gran poder no tiene por qué venir acompañado de una gran responsabilidad. Selecciona la herramienta de mano en la barra de herramientas o presiona H en el teclado. Ahora puedes hacer clic en un archivo, arrastrarlo y ampliarlo sin temor a realizar cambios no deseados.

Ponlo todo junto

¡Hagamos un resumen! La barra de herramientas te proporciona las herramientas y funciones que necesitas para crear y combinar capas. Luego, puedes organizar esas capas en el lienzo para crear tus diseños.

La barra lateral izquierda es donde puedes explorar y organizar tu archivo. La barra lateral derecha es donde puede ver las propiedades de la capa.

Analicemos con más detalle algunos conceptos clave: páginas y capas.

Páginas

Las páginas te ayudan a organizar tus archivos de diseño. Cada página es su propio lienzo, lo que te da aún más espacio para crear y explorar tus ideas. Las personas usan las páginas para lo siguiente:

Gestionar diseños por hito o estado
Organiza componentes
Mantén un bloc de notas con tus ideas
Archivar diseños antiguos.

Explorador de archivos Figma que muestra páginas organizadas por hitos, como descripción general, investigación de usuarios y componentes, en una barra lateral izquierda.

Para navegar por las páginas de un archivo, haz clic en el nombre de la página actual en la barra lateral izquierda. También puedes tocar para crear una nueva página. Ver páginas en la barra lateral →

Las páginas son excelentes para compartir una colección específica de diseños. Por ejemplo, puedes crear una página distinta para una revisión o cuando los diseños estén Ready for dev.

Para compartir una página, haz clic con el botón derecho en el nombre de la página y haz clic en Copiar enlace a la página. Cuando alguien abra ese enlace, llegará a la página correcta.

Capas

Por lo general, los diseños se crean a partir de una combinación de formas, texto y otros elementos.

Cuando agregas objetos al lienzo, Figma trata cada objeto como una capa separada. Tener capas separadas te permite cambiar o editar las propiedades de cada capa por sí sola.

Me gusta este diseño para una publicación de redes sociales, que incluye un nombre, una foto de perfil, una imagen y un pie de foto.

Diseño de publicación en redes sociales que muestra a un perro con donas, incluyendo el nombre del perfil, la imagen y el pie de foto en un lienzo Figma en capas.

No es necesario ser un experto en geometría para usar Figma. Pero es importante saber que estamos trabajando con tres dimensiones en el lienzo.

Tenemos el eje X (horizontal) e Y (vertical) que nos brindan las coordenadas de una capa en el lienzo. También tenemos una tercera dimensión, el índice Z, que nos indica la profundidad de la capa o el orden en que aparece.

Ver capas en el panel de capas

Las capas pueden colocarse arriba, detrás, al lado o dentro de otras capas. Para ver cómo se organizan, consulta el panel de capas en la barra lateral izquierda.

Tipos de capas

Cada capa tiene un nombre y un ícono para el tipo de capa. Es posible que hayas notado que algunos de estos íconos aparecen en la barra de herramientas. Puedes seleccionar esa herramienta en la barra de herramientas o usar el método abreviado de teclado para crear más capas de ese tipo.

Icono de capa	Nombre de capa	Shortcut
	Marco	`F`
	Grupo	`⌘ Command` `G`
	Componente	`⌥ Option` `⌘ Command` `K` o `Ctrl` + `Alt` + `K`
	Instancia	N/A
	Texto	`T`
	Forma	`R`
	Imagen	`⇧ Shift` `⌘ Comando` `k` o `Shift` `Ctrl` `k`
	Diseño automático	`Shift` `A`
	Sección	`Shift` `S`
	GIF o video	`⇧ Shift` `⌘ Comando` `k` o `Shift` `Ctrl` `k`

Orden y jerarquía de las capas

El orden en el que aparecen las capas en el panel de capas también es importante, ya que determina cómo se superponen en el lienzo.

Este menú tiene un rectángulo que actúa como fondo. Como está debajo de las otras capas en el panel de capas, también aparece encima de esas capas en el lienzo. Si estuviera por encima de las otras capas en el panel de capas, no podríamos ver ninguna de las capas de texto o íconos.

Capas como contenedores

Mencionamos que las capas pueden estar dentro de otras capas. Se puede saber si una capa contiene otras capas si hay un flecha junto a ella en el panel de capas. Haz clic en la flecha para ver las capas que hay dentro de ese contenedor.

Relaciones entre capas

Empleamos los términos "principal" y "secundario" para describir las relaciones entre los contenedores y las capas dentro de ellos.

Las capas principales contienen otras capas, como marcos, componentes y grupos.
Las capas secundarias son capas dentro de una capa principal. Pueden ser capas individuales, como una forma, un texto o contenedores con sus propias capas secundarias.

Relaciones entre objetos padres, hijos y hermanos →

Trabajar con contenedores

Hay algunos tipos diferentes de capas que funcionan como contenedores: grupos, marcos y secciones. Si bien pueden parecer similares, cada uno tiene sus propias ventajas.

Grupos

Los grupos son una excelente manera de combinar capas en un solo elemento. Simplifican el panel de capas y te dan un único objeto con el que puedes interactuar en el lienzo. Por ejemplo, tienes una colección de formas que deseas que permanezcan juntas.

Los grupos son colecciones de capas y no elementos distintos, por lo que no tienen dimensiones ni propiedades propias. Cuando se realizan cambios en un grupo, en realidad, se aplican esos cambios a cada capa del grupo.

Marcos

Los marcos son otra forma de combinar capas en Figma. Los marcos pueden actuar como ‌estructuras para un dispositivo o tamaño de pantalla específicos, como una sola página en el diseño de una aplicación. También pueden funcionar como contenedores de capas que forman elementos distintos, como las capas de una barra de navegación. Incluso puedes poner marcos dentro de otros marcos.

A diferencia de los grupos, los marcos pueden tener dimensiones y propiedades propias, como rellenos, esquinas redondeadas y sombras. También tienen características como disposición automática, restricciones y cuadrículas de disposición, que te permiten controlar o influir en las capas que contienen.

Ajustes predeterminados de los marcos

Figma tiene ajustes predeterminados de marcos para recursos comunes, dispositivos y tamaños de pantalla. Tanto si estás diseñando una app móvil como una publicación de Instagram. Explora los ajustes predeterminados de marcos →

Secciones

La herramienta Sección te permite designar y etiquetar una región específica del lienzo. Puedes utilizar las secciones para agrupar conceptos e ideas relacionados u organizar tus diseños.

Las secciones ayudan a establecer el enfoque, dar contexto y guiar a los colaboradores a través de los procesos. Son perfectos para actividades como revisiones o para compartir diseños para la entrega.

Consulta nuestra guía de mejores prácticas para obtener más información sobre cuándo utilizar grupos y marcos.

Explorar las propiedades de la capa

Al pasar el cursor sobre una capa u objeto en el lienzo, aparece un cuadro alrededor de todo el elemento. Haz clic en una capa para seleccionarla y ver más información sobre sus propiedades.

En la barra lateral izquierda, puedes ver el nombre de la capa y cómo está organizada. En la barra lateral derecha, puedes ver las propiedades de la capa.

Las propiedades de una capa incluirán información básica sobre la capa, como sus dimensiones y su ubicación en el lienzo. Así como cualquier detalle de estilo, como el color, las propiedades del texto o los efectos como las sombras.

Las propiedades que podrás ver dependerán del tipo de capa que seleccionaste. Si una capa usa un estilo, solo el nombre y el ícono del estilo estarán visibles en la barra lateral derecha.

Compatible con:

Marcos Grupos Componentes Instancias Disposición automática Secciones GIF