Diseñar, crear prototipos y explorar propiedades de capa en la barra lateral derecha
Este artículo está disponible tanto para la UI anterior de Figma como para la nueva. Utiliza el conmutador de la parte inferior izquierda de la página para seleccionar tu UI 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 de puede editar a un archivo para ajustar las capas y el prototipo desde el panel de propiedades.
Requiere acceso de puede ver a un archivo para comentar, explorar 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 que se separan del lienzo:
- El panel de navegación en el lado izquierdo 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 según tu nivel de acceso a un archivo y tu tipo de usuario.
- Acceso de edición: edita las propiedades de diseño de las capas y agrega flujos e interacciones de prototipos.
- Acceso de solo lectura: ve y busca comentarios, inspecciona las propiedades de las capas 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 en archivo: Diseño y Prototipo.
Consejo: Puedes agregar etiquetas al panel de propiedades para que quede más claro qué hace cada propiedad. Para activar las etiquetas, haz clic en el menú desplegable situado junto al porcentaje de zoom de 100 % en el panel de propiedades y selecciona Etiquetas de propiedades.
Diseñar
La pestaña Diseño te permite ver, agregar, eliminar o cambiar las propiedades de los objetos 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 propiedad diferentes para editar la capa. Por ejemplo:
- Alineación, rotación y posición
- Tamaño y orientación del marco
- Radio de esquina
- Constraints
- Cuadrículas de disposición
- Propiedades de componentes
- Instancia
- Diseño automático
- Modos de fusión
- Texto
- Relleno
- Trazo
- Efectos
- Ajustes de exportación
Prototipado
Usa la pestaña Prototipo para comenzar a crear prototipos. Selecciona cualquier objeto para comenzar y luego:
- Agrega un punto de inicio de flujo: Un flujo es una ruta que toman los usuarios a través de la red de marcos conectados que conforman tu prototipo. Agrega un punto de partida para elegir el primer marco del recorrido.
- Agrega una interacción: Abre el modal Detalles de interacción, donde podrás definir el disparador, la acción y cualquier animación para 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.
Sugerencia: También puedes agregar interacciones directamente en el lienzo si seleccionas la pestaña Prototipo y luego haces clic y arrastras conexiones entre objetos.
Obtén más detalles sobre los prototipados en Figma →
Usar el panel de propiedades con acceso de solo lectura
Las personas con acceso de puede ver en un archivo, o que tienen un puesto View en un plan de pago, tienen dos pestañas en el panel de propiedades: Comentario y Propiedades.
El acceso de solo lectura es ideal para las personas que no necesitan editar diseños o para los desarrolladores que tienen que acceder a los diseños, pero que no requieren el paquete completo de funciones de 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 agregar nuevos comentarios o ver los existentes. Puedes usar comentarios para agregar o responder a comentarios, colaborar e iterar más rápido, todo desde el archivo de diseño original.
En la pestaña Comentario, puedes ver todos los comentarios existentes en un archivo. O bien, puedes buscar un comentario particular o un conjunto de comentarios dentro de un archivo:
- Escribe una palabra clave en el campo Búsqueda para encontrar un comentario específico.
- Usa el Filtro para ver los comentarios por orden de publicación 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 agregar comentarios a un archivo de Figma Design o ver y gestionar 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 al seleccionar el elemento en el lienzo en sí o al seleccionarlo en el panel de capas en 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 detalles sobre esta, como su diseño y colores.
Haz clic con el botón derecho en la capa del lienzo para realizar estas acciones:
- 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 que seleccionaste.
¿Quieres medir distancias entre objetos? Puedes usar los atajos de teclado para acceder rápido a la información de espaciado y margen interior. Aprende cómo agregar pautas de medición →
En la parte inferior de la pestaña Propiedades, puedes agregar una configuración de exportación para exportar diseños en una variedad de formatos y tamaños de archivo. La exportación te ayuda a compartir contenido con otras personas, moverlo entre herramientas y almacenar copias de tus diseños fuera de Figma. Aprende cómo exportar contenido desde Figma →
Antes de empezar
Quién puede utilizar esta función
Usuarios en cualquier equipo o plan.
Los usuarios con acceso de puede editar a un archivo pueden ajustar las capas y crear prototipos desde la barra lateral derecha.
Los usuarios con acceso de pueden ver en un archivo pueden comentar, explorar las propiedades de archivos y 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 UI de Figma.
La UI de Figma te permite acceder, crear y ajustar elementos de tu diseño.
- La barra lateral izquierda te brinda acceso a las capas, activos y páginas incluidas en tu archivo. A esto lo llamamos el panel de capas. Obtén más detalles sobre cómo navegar por el panel de 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, vamos a hacer un recorrido por la barra lateral derecha.
A lo que 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 capas y ver la salida del código
- Aplicar la configuración de exportación
Acceso de edición
- Agregar y editar las propiedades de diseño de las capas
- Agregar interacciones, flujos y configuraciones de prototipos
Usa la barra lateral derecha con acceso de edición
Diseñar
La pestaña Diseño te permite ver, agregar, 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 editarla. 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)
- Dimensiones y rotaciones (ancho y alto)
- Radio de esquina
- Restricciones
- Cuadrícula de disposición
- Propiedades de componentes
- Instancia
- Diseño automático
- Capa (modos de fusión)
- Texto
- Relleno
- Trazo
- Efectos
- Ajustes de exportación
Prototipado
Usa la pestaña Prototipo para comenzar a crear prototipos.
Selecciona cualquier objeto para comenzar. Luego, desde la pestaña Prototipo:
- Agregar un punto de partida del flujo
Un flujo es una ruta que toman los usuarios a través de la red de marcos conectados que conforman tu prototipo. Agrega un punto de partida para elegir el primer marco del recorrido. - Agregar una interacción
Abre el modal Detalles de interacción, donde podrás definir el disparador, la acción y cualquier animación para la interacción. - Definir el comportamiento de desplazamiento
Selecciona cómo responde el prototipo al desplazamiento. - Mostrar la configuración del prototipo
Te permite ajustar el dispositivo y el fondo de tu prototipo.
Consejo: También puedes agregar interacciones en el lienzo si seleccionas la pestaña Prototipo y, luego, haces clic y arrastras conexiones entre objetos.
Obtén más detalles sobre los prototipados en Figma →
Entrar en 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.
Usa el Dev Mode para realizar estas acciones:
- Ve y copia propiedades, valores y código de los componentes de diseño.
- Revisa lo que cambió desde la última vez que viste un archivo comparando las versiones de los marcos.
- Inspecciona los archivos de diseño y navega por estos 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
- Agiliza tu flujo de trabajo con integraciones orientadas a los desarrolladores, como Jira, Storybook y GitHub
- Agrega enlaces relevantes y recursos para desarrolladores a los componentes.
Se accede al Dev Mode mediante un botón de alternancia en la barra de herramientas. Luego de ingresar a este, la interfaz, incluida la barra lateral derecha, mostrará funciones centradas en el desarrollador.
Usar la barra lateral derecha con acceso de solo lectura
Los usuarios con permisos de espectador o de espectador restringido pueden colaborar en diseños, ver propiedades de 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 que no necesitan el paquete full de funciones de Dev Mode.
Comentario
Selecciona Comentario en la barra lateral derecha para agregar nuevos comentarios o ver los existentes. Puedes usar comentarios para agregar 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 bien, puedes buscar un comentario particular o un conjunto de comentarios dentro de un archivo:
- Escribe una palabra clave en el campo Búsqueda para encontrar un comentario específico.
- Usa el Filtro para ver los comentarios por orden de publicación o ver solo los que aún no has leído. Aquí, puedes filtrar para ver solo un determinado conjunto de comentarios.
Haz clic en Configuración para ocultar íconos o gestionar las notificaciones de comentarios en un archivo.
Aprende cómo agregar comentarios a un archivo de Figma Design → o cómo ver y gestionar comentarios →
Propiedades
La pestaña Propiedades de la barra lateral derecha te permite inspeccionar determinadas capas del lienzo.
Para empezar, selecciona una capa en el lienzo. Puedes hacerlo al seleccionar el elemento en el lienzo en sí o al seleccionarlo en el panel de capas en 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 realizar estas acciones:
- 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 que seleccionaste.
Exportar
Con el acceso de solo lectura, puedes exportar diseños de Figma en una variedad de escalas y formatos de archivos. La exportación te ayuda a compartir contenido con otras personas, moverlo entre herramientas y almacenar copias de tus diseños fuera de Figma.