Diseña, crea prototipos y explora las propiedades de las capas en la barra lateral derecha
Este artículo es aplicable tanto a la anterior IU de Figma como a la nueva. Utiliza el botón en la parte izquierda de la página para seleccionar tu IU actual. Conoce UI3: el rediseño de Figma →
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes
Requiere acceso puede editar a un archivo para ajustar las capas y el prototipo del panel de propiedades
Requiere acceso puede visualizar a un archivo para comentar, explorar las propiedades del archivo y la capa y exportar capas desde el panel de propiedades
En Figma Design, un archivo tiene tres elementos principales de la interfaz separadas del lienzo:
- El panel de navegación en la parte izquierda de la pantalla
- La barra de herramientas en la parte inferior de la pantalla
- El panel de propiedades en el lado derecho de la pantalla
En este artículo, vamos a explorar el panel de propiedades.
Cómo cambia el panel de propiedades en función del acceso a un archivo
El panel de propiedades tiene diferentes capacidades dependiendo de tu nivel de acceso a un archivo, y de tu tipo de puesto.
- Acceso de edición: edita las propiedades de diseño de las capas y añade flujos e interacciones de prototipos
- Acceso de solo lectura: ve y busca comentarios, inspecciona las propiedades de la capa y la salida del código, y exporta
Usar el panel de propiedades con acceso de edición
Hay dos pestañas disponibles en el panel de propiedades cuando tienes acceso de edición a un archivo: Diseño y Prototipo.
Consejo: puedes añadir etiquetas al panel de propiedades para que se vea más claramente lo que hace cada propiedad. Para activar las etiquetas, haz clic en el menú desplegable ubicado junto al porcentaje del 100 % del zoom en el panel de propiedades y selecciona Etiquetas de propiedades.
Diseño
La pestaña Diseño te permite ver, añadir, eliminar o cambiar las propiedades de los objetos dentro de tu diseño.
Si no hay nada seleccionado en el lienzo, podrás hacer lo siguiente desde la pestaña Diseño:
- Acceder a estilos y variables locales del archivo
- Actualizar el color de fondo del lienzo
- Exportar toda la página
Cuando seleccionas una capa, puedes acceder a muchos controles de propiedades diferentes para editarla. Por ejemplo:
- Alineación, rotación y posición
- Tamaño y orientación del marco
- Radio de esquina
- Restricciones
- Cuadrículas de diseño
- Propiedades de los componentes
- Instancia
- Disposición automática
- Modos de fusión
- Texto
- Relleno
- Trazo
- Efectos
- Configuración de exportación
Prototipo
Usa la pestaña Prototipo para empezar a crear prototipos. Selecciona cualquier objeto para comenzar y luego:
- Añade un punto de partida de flujo: un flujo es una ruta que los usuarios toman a través de la red de marcos conectados que componen tu prototipo. Añade un punto de partida para elegir el primer marco del trayecto.
- Añade una interacción: abre el modal Detalles de la interacción, donde puedes definir el desencadenante, la acción y cualquier animación de la interacción.
- Define el comportamiento del desplazamiento: selecciona cómo responde el prototipo al desplazamiento.
- Muestra la configuración del prototipo: te permite ajustar el dispositivo y el fondo de tu prototipo.
Consejo: también puedes añadir interacciones directamente en el lienzo seleccionando la pestaña Prototipo y, a continuación, haciendo clic y arrastrando las conexiones entre objetos.
Más información sobre la creación de prototipos en Figma →
Usar el panel de propiedades con acceso de solo lectura
Las personas que tienen acceso de visualización a un archivo o puesto View en un plan de pago tienen dos pestañas en el panel de propiedades: Comentar y Propiedades.
El acceso de solo lectura es ideal para las personas que no necesitan editar diseños o para los desarrolladores que necesitan acceder a los diseños, pero no necesitan el conjunto completo de funciones del Dev Mode. Las personas con este acceso a un archivo pueden colaborar en diseños, ver las propiedades del diseño, copiar código básico y exportar recursos.
Comentario
Selecciona Comentario en la barra lateral derecha para añadir nuevos comentarios o ver los existentes. Puedes usar los comentarios para añadir comentarios o responder a ellos, colaborar e iterar más rápido, todo desde el archivo de diseño original.
Desde la pestaña Comentario, puedes ver todos los comentarios existentes en un archivo. O buscar un comentario o un conjunto de comentarios en particular dentro de un archivo:
- Escribe una palabra clave en el campo de búsqueda para encontrar un comentario en particular.
- Usa el filtro para ver los comentarios según la fecha en que se publicaron o ver solo los que aún no has leído. Aquí, puedes filtrar para ver solo un determinado conjunto de comentarios.
Obtén más información sobre cómo añadir comentarios a un archivo de diseño de Figma o ver y administrar comentarios.
Propiedades
La pestaña Propiedades de la barra lateral derecha te permite inspeccionar capas particulares en el lienzo, así como exportar diseños.
Para empezar, selecciona una capa en el lienzo. Puedes hacerlo seleccionando el elemento en el propio lienzo o seleccionándolo en el panel Capas de la barra lateral izquierda. Puedes seleccionar cualquier tipo de capa, como una forma, texto, grupo o marco.
En Propiedades, verás el nombre de la capa seleccionada y los detalles sobre ella, como su diseño y colores.
Haz clic con el botón derecho en la capa del lienzo para:
- Copiar la capa
- Copiar/pegar como código (CSS, iOS o Android), SVG, PNG, copiar el enlace o copiar sus propiedades
- Seleccionar una capa diferente dentro de la capa seleccionada
¿Quieres medir distancias entre objetos? Puedes utilizar atajos de teclado para acceder rápidamente a la información de espaciado y relleno. Más información sobre cómo añadir pautas de medición →
En la parte inferior de la pestaña Propiedades , puedes añadir una configuración de exportación para exportar diseños en diversos formatos y tamaños de archivo. La exportación te ayuda a compartir contenido con otras personas, moverlo entre herramientas y guardar copias de tus diseños fuera de Figma. Aprende a exportar contenido desde Figma →
Antes de empezar
Quién puede utilizar esta función
Usuarios en cualquier equipo o plan.
Los usuarios con acceso puede editar a un archivo pueden ajustar las capas y crear prototipos desde la barra lateral derecha
Los usuarios con acceso puede visualizar a un archivo pueden comentar, explorar las propiedades de los archivos y las capas y exportar capas desde la barra lateral derecha
Cuando estés en Figma Design, verás una barra lateral a cada lado del lienzo. Junto con la barra de herramientas, estas barras laterales conforman la IU de Figma.
La interfaz de usuario de Figma te permite acceder, crear y ajustar elementos de tu diseño.
- La barra lateral izquierda te ofrece acceso a las capas, activos y páginas incluidas en tu archivo. A esto lo llamamos el panel Capas. Más información sobre cómo navegar por el panel Capas.
- La barra lateral derecha te permite ver o ajustar las propiedades del diseño y la configuración del prototipo de tu diseño.
En este artículo, te guiaremos por un recorrido por la barra lateral derecha.
A qué tienes acceso en la barra lateral derecha depende de tus permisos en el archivo y de tu tipo de puesto:
Acceso de solo visualización
- Ver y buscar comentarios
- Inspeccionar las propiedades de las capas y ver el código de salida
- Aplicar la configuración de exportación
Acceso de edición
- Añadir y editar las propiedades de diseño de las capas
- Añadir interacciones, flujos y configuraciones de prototipos
Utiliza la barra lateral derecha con acceso de edición
Diseño
La pestaña Diseño te permite ver, añadir, eliminar o cambiar las propiedades de los objetos dentro de tu diseño.
Si no hay nada seleccionado en el lienzo, podrás hacer lo siguiente desde la pestaña Diseño:
- Acceder a estilos y variables locales del archivo
- Actualizar el color de fondo del lienzo
- Exportar toda la página
Si seleccionas una capa, podrás acceder a muchos ajustes diferentes para editar la capa. Los ajustes disponibles dependerán de la capa seleccionada.
- Alineación y distribución
- Tamaño y orientación del marco
- Posición (X e Y)
- Dimensión y rotaciones (ancho y altura)
- Radio de esquina
- Restricciones
- Cuadrícula de disposición
- Propiedades de los componentes
- Instancia
- Disposición automática
- Capa (modos de fusión)
- Texto
- Relleno
- Trazo
- Efectos
- Configuración de exportación
Prototipo
Usa la pestaña Prototipo para empezar a crear prototipos.
Selecciona cualquier objeto para comenzar. A continuación, desde la pestaña Prototipo:
- Añade un punto de partida de flujo
Un flujo es una ruta que los usuarios toman a través de la red de marcos conectados que componen tu prototipo. Añade un punto de partida para elegir el primer marco del trayecto. - Añade una interacción
Abre el modal Detalles de la interacción, donde puedes definir el desencadenante, la acción y cualquier animación de la interacción. - Define el comportamiento de desplazamiento
Selecciona cómo responde el prototipo al desplazamiento. - Muestra la configuración del prototipo
Te permite ajustar el dispositivo y el fondo de tu prototipo.
Consejo: también puedes añadir interacciones directamente en el lienzo seleccionando la pestaña Prototipo y, a continuación, haciendo clic y arrastrando las conexiones entre objetos.
Más información sobre la creación de prototipos en Figma →
Acerca del Dev Mode
Dev Mode es un espacio en Figma creado solo para desarrolladores. Dev Mode muestra las especificaciones de diseño y la información relevante necesaria para comprender un diseño y transformarlo en código.
Utiliza el Dev Mode para:
- Ver y copiar propiedades, valores y código de componentes de diseño
- Comprueba qué ha cambiado desde la última vez que viste un archivo comparando las versiones de los marcos
- Inspecciona y navega por los archivos de diseño con interacciones sencillas que muestran información importante de las capas
- Encuentra rápidamente diseños listos para el desarrollo con estados de sección
- Optimiza tu flujo de trabajo con integraciones centradas en el desarrollador, como Jira, Storybook y GitHub
- Añade enlaces relevantes y recursos para desarrolladores a los componentes
Se puede acceder al Dev Mode mediante un botón en la barra de herramientas. Al entrar en el Dev Mode, la interfaz, incluida la barra lateral derecha, mostrará funciones centradas en el desarrollador.
Usa la barra lateral derecha con acceso de solo lectura
Los usuarios Espectador y Espectador restringido pueden colaborar en diseños, ver las propiedades del diseño, copiar código básico y exportar activos.
El acceso de espectador es ideal para las personas que no necesitan editar diseños o para los desarrolladores que necesitan acceder a los diseños, pero no necesitan el conjunto completo de funciones del Dev Mode.
Comentario
Selecciona Comentario en la barra lateral derecha para añadir nuevos comentarios o ver los existentes. Puedes utilizar los comentarios para añadir o responder a comentarios, colaborar e iterar más rápido, todo desde el archivo de diseño original.
Desde la pestaña Comentario, puedes ver todos los comentarios existentes en un archivo. O buscar un comentario o un conjunto de comentarios en particular dentro de un archivo:
- Escribe una palabra clave en el campo de búsqueda para encontrar un comentario en particular.
- Usa el filtro para ver los comentarios en función de su fecha de publicación o ver solo los que aún no has leído. También puedes filtrar para ver solo un determinado conjunto de comentarios.
Haz clic en la Configuración para ocultar iconos o administra las notificaciones de comentarios en un archivo.
Descubre cómo añadir comentarios a un archivo de diseño de Figma → o cómo ver y administrar comentarios →
Propiedades
La pestaña Propiedades de la barra lateral derecha te permite inspeccionar capas particulares en el lienzo.
Para empezar, selecciona una capa en el lienzo. Puedes hacerlo seleccionando el elemento en el propio lienzo o seleccionándolo en el panel Capas de la barra lateral izquierda. Puedes seleccionar cualquier tipo de capa, como una forma, texto, grupo o marco.
En Propiedades, verás el nombre de la capa seleccionada y los detalles sobre ella, como su diseño y colores.
Haz clic con el botón derecho en la capa del lienzo para:
- Copiar la capa
- Copiar/pegar como código (CSS, iOS o Android), SVG, PNG, copiar el enlace o copiar sus propiedades
- Seleccionar una capa diferente dentro de la capa seleccionada
Exportar
Con el acceso de solo visualización, puedes exportar diseños de Figma en diversos formatos de archivo y escalas. La exportación te ayuda a compartir contenido con otras personas, moverlo entre herramientas y guardar copias de tus diseños fuera de Figma.