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

Si aún no conoces Figma Design, te recomendamos que realices nuestro curso de Figma Design para principiantes. En este curso, cubrimos todo lo necesario, desde cómo navegar por los archivos de diseño, trabajar con capas, aplicar la disposición automática a marcos, crear componentes y añadir conexiones de prototipos a los diseños. Cuando termines, habrás creado un sitio web de portafolio personalizable completamente desde cero. Más información sobre el curso de Figma Design para principiantes.

¿Quieres obtener más información 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. Los archivos de diseño son populares entre diseñadores, gerentes de producto, escritores y desarrolladores. ¡Pero cualquiera que quiera crear o comunicarse visualmente puede usarlos!

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

Los archivos de Figma están en línea y siempre actualizados, por lo que todo el mundo puede trabajar simultáneamente en el mismo archivo. Al haber un único archivo en línea, todo el mundo ve lo mismo y no es necesario guardar, compartir ni estar pasándose documentos.

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

Archivos de diseño en el explorador de archivos

Puedes identificar los archivos de Figma Design en el explorador de archivos por el icono de la ficha del archivo.

Un ejemplo de un archivo de diseño con el icono del archivo de diseño marcado con un círculo.

Hazlo a tu manera

Si eres nuevo en Figma, es normal que te sientas un poco perdido cuando abres un archivo por primera vez. Te haremos un recorrido para que puedas orientarte y comenzar 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 en la parte inferior, una barra lateral izquierda, una barra lateral derecha y el lienzo.

Barra de herramientas de Figma Design con diversas herramientas sobre un fondo morado claro.

La barra de herramientas es tu centro para interactuar con el lienzo y añadirle objetos. Alberga todas las herramientas para seleccionar objetos, moverse por el lienzo y crear marcos, formas, texto y otras capas ↓. Ellas serán la piedra angular de tus 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 archivos de Figma Design, la navegación por las páginas y las herramientas de recursos sobre un fondo morado.

La barra lateral izquierda te ofrece acceso a capas, páginas, activos y es donde puedes realizar acciones con tus archivos.

Utiliza el panel Activos para ver componentes locales o buscar componentes en kits o bibliotecas (requiere acceso de edición).
Accede a 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 →

La barra lateral derecha es donde puedes acceder a más información sobre tus diseños. Cuando no tengas nada seleccionado, podrás ver los recursos locales, como el color o los estilos de texto.

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

La barra lateral derecha también es donde encontrarás herramientas para compartir tus diseños y trabajar juntos en tiempo real. Por ejemplo, puedes compartir el archivo, ver quién más está aquí, 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 del diseño a la derecha.

Acceso de solo visualización

Comentario: Ver y buscar comentarios
Propiedades: ver las propiedades de la 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: ver y editar 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 y navegar por archivos de diseño.

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 de Dev Mode →

Lienzo

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

Utiliza panorámica para moverte

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

Ratón: mantén pulsada la barra espaciadora y, a continuación, haz clic y arrastra para desplazarte por el lienzo.

Panel táctil: con dos dedos, deslízalo en cualquier dirección para desplazar el lienzo. Figma usará la configuración de dirección de desplazamiento predeterminada de tu ordenador.

Amplía o aleja la vista

Amplía para ver más de cerca o aléjate para ver la imagen más grande. Consulta el nivel de zoom actual en la esquina superior derecha de la pantalla.

Ratón: mantén pulsado ⌘ Comando/Ctrl y desplázate hacia abajo para acercar y hacia arriba para alejar.

Panel táctil: aleja la vista uniendo dos dedos, o acércala separándolos.

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 unes o exploras un archivo, interactuar con las acciones del lienzo puede resultar un poco abrumador. A la gente a menudo le preocupa mover, cambiar o eliminar algo por accidente.

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

Ponlo todo junto

¡Hagamos un resumen rápido! 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 puedes ver las propiedades de la capa.

Profundicemos un poco más en 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. La gente utiliza las páginas para:

Gestionar diseños por hito o estado
Organizar componentes
Mantener un bloc de notas de ideas
Archivar diseños antiguos

Explorador de archivos de 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 pulsar para crear una nueva página. Ver páginas en la barra lateral →

Las páginas son una gran forma de 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

Los diseños generalmente se crean a partir de una combinación de formas, texto y otros elementos.

Cuando añades objetos al lienzo, Figma trata cada objeto como una capa independiente. Tener capas separadas te permite cambiar o editar las propiedades de cada capa por separado.

Da me gusta este diseño para una publicación en 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 mostrando un perro con dónuts, incluyendo el nombre del perfil, la imagen y el pie de foto en un lienzo Figma en capas.

No es necesario ser un genio de la geometría para usar Figma. Pero ayuda saber que trabajamos con tres dimensiones en el lienzo.

Está el eje X (horizontal) y el Y (vertical) que nos dan las coordenadas de una capa en el lienzo. También hay una tercera dimensión, el índice Z, que nos da la profundidad de la capa o el orden en que aparece.

Ver capas en el panel de capas

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

Tipos de capas

Cada capa tiene un nombre y un icono para el tipo de capa. Es posible que hayas notado que alguno de estos iconos aparece en la barra de herramientas. Puedes seleccionar esa herramienta en la barra de herramientas o utilizar el atajo de teclado para crear más capas de ese tipo.

Icono de capa	Nombre de la capa	Shortcut
	Marco	`F`
	Grupo	`⌘ Command` `G`
	Componente	`⌥ Opción` `⌘ Comando` `K` o `Ctrl` + `Alt` + `K`
	Instancia	N/A
	Texto	`T`
	Forma	`R`
	Imagen	`⇧ Shift` `⌘ Command` `k` o `Shift` `Ctrl` `k`
	Disposición automática	`Shift` `A`
	Sección	`Shift` `S`
	GIF o vídeo	`⇧ Shift` `⌘ Command` `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. El orden de las capas determina cómo se superponen las capas 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 iconos.

Capas como contenedores

Hemos mencionado que las capas pueden estar dentro de otras capas. Puedes saber si una capa contiene otras capas si hay una flecha junto a ella en el panel de capas. Haz clic en la flecha para ver cualquier capa dentro de ese contenedor.

Relaciones entre capas

Utilizamos 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 instancias principales, secundarias y hermanas →

Trabajar con contenedores

Hay algunos tipos diferentes de capas que funcionan como contenedores: grupos, marcos y secciones. Aunque puedan parecer similares, cada una 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 quieres 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 andamiaje 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 actuar como contenedores de capas que componen 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 diseño automático, restricciones y cuadrículas de diseño, que te permiten controlar o influir en las capas dentro de ellas.

Ajustes preestablecidos de marco

Figma tiene marcos preestablecidos para recursos, dispositivos y tamaños de pantalla comunes. Ya estés diseñando una aplicación móvil o una publicación de Instagram. Explorar ajustes preestablecidos de marco →

Secciones

La herramienta Sección te permite designar y etiquetar una región específica del lienzo. Puedes utilizar 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 perfectas para actividades como reseñas o para compartir diseños para la entrega.

Consulta nuestra guía de prácticas recomendadas para obtener más información sobre cuándo usar 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, puede ver las propiedades de la capa.

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

Las propiedades que puedas ver dependerán del tipo de capa que hayas seleccionado. Si una capa usa un estilo, solo el nombre y el icono del estilo serán visibles en la barra lateral derecha.

Compatible con:

Marcos Grupos Componentes Instancias Diseño automático Secciones GIF