Descubre UI3, la nueva IU de Figma
Quién puede usar esta función
- Disponible en versión beta limitada para todos los planes.
- Si no tienes acceso al nuevo diseño de Figma, no desesperes: estas actualizaciones se irán lanzando durante los próximos meses. Además, si acabas de llegar a Figma y has empezado directamente con la nueva versión, te recomendamos nuestra guía para conocer los archivos de diseño.
En Config 2024, presentamos una nueva versión de Figma, a la que llamamos UI3. Esta guía está pensaba para las personas que estén pasándose al nuevo diseño y quieran saber qué ha cambiado.
Por qué hemos cambiado el diseño de Figma
Figma se ha vuelto una herramienta cada vez más compleja, por lo que UI3 es un intento de simplificar el proceso de diseño. Nuestra intención es hacer que Figma Design sea una herramienta más sencilla para los diseñadores y accesible para un público más amplio. Además, de esta manera, creamos una base sólida para nuestros productos actuales y los que están por llegar.
El nuevo diseño:
- Ofrece un control más fluido de la interfaz con la posibilidad de cambiar el tamaño de los paneles y contraerlos
- Se centra más en el trabajo en el propio lienzo
- Proporciona unas funciones más intuitivas al mejorar su ubicación, agrupación y adaptación a diferentes contextos
- Es más consistente con el diseño de otros productos y ofrece una transición más fluida entre Figma Design, FigJam, Dev Mode y Figma Slides
Consejo: Si deseas obtener más información sobre el cambio de diseño, consulta la siguiente entrada en nuestro blog: Dentro del nuevo diseño de Figma, donde tu trabajo es lo más importante
Cambios
Panel de navegación
Hemos reorganizado el panel de navegación en el lado izquierdo del lienzo para recoger toda la información sobre el archivo y utilizarla con mayor facilidad.
Minimizar la IU
Si necesitas ampliar el lienzo, ahora puedes minimizar la IU desde el panel de navegación. Haz clic en Minimizar IU para contraer el panel de navegación y el de propiedades.
Si haces una selección sobre el lienzo con la IU minimizada, se volverá a abrir temporalmente el panel de propiedades para que puedas acceder a los controles de cada propiedad.
Nombre y ubicación del archivo
Haz clic en el icono del menú desplegable que encontrarás junto al nombre de los archivos para realizar distintas acciones, como moverlos, publicar una biblioteca, crear una rama o ver el historial de versiones.
Pestaña de recursos
Hemos hecho que resulte más sencillo buscar e insertar componentes desde la pestaña de Recursos.
Barra de herramientas
La nueva barra de herramientas se desplaza a la parte inferior del editor. De esta forma, se libera más espacio de trabajo en el lienzo y se introducen nuevas capacidades de IA a través del menú de acciones.
Nota: Las funciones de IA de Figma Design se irán lanzando a lo largo de los próximos meses. Más información→
Acciones
Acciones es un nuevo elemento en la barra de herramientas con el que podrás hacer realidad tus ideas de forma rápida y sencilla. Desde aquí, podrás acceder a todas las herramientas de IA de Figma, a acciones, complementos y widgets de productividad comunes, y a componentes, entre otros elementos.
Acerca del modo de desarrollo
Ahora puedes acceder al modo de desarrollo en la barra de herramientas para que te resulte más sencillo pasar de un modo a otro en Figma Design.
Panel de propiedades
La vista Diseño del panel de propiedades es ahora más fácil de usar. Además, el hecho de que estén todas agrupadas te ayuda a adaptarte a los flujos de trabajo modernos.
También puedes reajustar el tamaño del panel de propiedades, lo que te ayudará si trabajas con componentes con nombres largos.
Etiquetas de propiedades
En UI3 están disponibles las Etiquetas de propiedades, que indican la función de cada una.
Para activarlas, haz clic en el icono del menú desplegable , ubicado junto al porcentaje del 100 % del zoom en el panel de propiedades, y selecciona Etiquetas de propiedades.
Selección de acciones
Ahora el panel de propiedades muestra una fila de encabezados con acciones que puedes ejecutar en los objetos que selecciones.
Entre estas acciones, puedes encontrar los botones para aplicar una máscara, crear un componente, o ejecutar una operación booleana (o puede que se encuentren ocultas en el menú Más).
Disposición
La pestaña Disposición contiene todas las propiedades relacionadas con la disposición de los objetos, como la anchura o la altura.
Al hacer clic en Utilizar disposición automática en un marco, la etiqueta Disposición cambia a Disposición automática, y todas las propiedades de disposición automática pasan a estar disponibles.
Posición
Puedes acceder a todas las propiedades relacionadas con la posición de un objeto en un lienzo, incluidas las restringidas, a través de Posición.
Consejo: Puedes destacarte desde el panel de propiedades. Cuando el resto de personas accedan al punto destacado, los paneles de la izquierda y de la derecha se minimizarán para que dispongas de más espacio para mostrar tu trabajo.
¿A dónde se ha ido esta función?
Echa un vistazo a la siguiente lista para ver todo lo que ha cambiado de sitio y dónde puedes encontrarlo ahora.
Diseño antiguo | Nuevo diseño | |
Solicitar acceso de ediciónSi tienes acceso de tipo |
||
Posición absolutaPosición absoluta ha pasado a llamarse Ignorar disposición automática. Al ignorar la disposición automática, puedes ubicar un objeto directamente dentro de un marco con disposición automática sin seguir su estructura. Para ignorar la posición automática, selecciona un marco con disposición automática secundario y después haz clic en , en el panel de propiedades. |
||
Alinear objetosCon los controles de alineación, puedes alinear un objeto con su capa principal o alinear varios objetos entre sí. Selecciona más de un objeto y haz después clic en una de las herramientas de alineación que encontrarás en Posición, en el panel de propiedades. |
||
Disposición automáticaCuando utilizas la disposición automática en un marco, este se ajustará según los cambios de contenido y el tamaño de la pantalla de forma dinámica. Para usar la disposición automática en un marco, haz clic en , en la sección Disposición del panel de propiedades. |
||
Valores de anchura y altura de la disposición automáticaEn los marcos de disposición automática, los valores de anchura y altura varían según cambie el tamaño. Puedes encontrar estos valores de la siguiente forma:
|
||
Modos de fusiónCon los modos de fusión puedes definir cómo se fusionan dos capas. Para aplicar un modo de fusión. selecciona un objeto, haz clic en , junto a Apariencia, y selecciónalo. |
||
Recortar contenidoLa función Recortar contenido te permite esconder las partes de un capa que se extienden más allá de los límites del marco principal. Marca la casilla Recortar contenido de Disposición, según desees mostrar o recortar el contenido. |
||
Propiedades de los componentesLas Propiedades de los componentes son los aspectos de los componentes que se pueden modificar. Puedes decidir qué partes de los componentes pueden modificar otras personas aplicándoles propiedades específicas. Las propiedades activadas de un componente se muestran bajo el nombre del marco en el panel de propiedades. |
||
RestriccionesLas Restricciones son indicaciones para Figma de cómo deben adaptarse las capas cuando se cambia el tamaño de los marcos principales. Al seleccionar una capa, el icono de Restricciones aparecerá junto a los valores de posición X e Y en la sección Posición del panel de propiedades. |
||
Radio de esquinaEl Radio de esquina es una propiedad que permite redondear las esquinas de un objeto. Al seleccionar un objeto, haz clic en el campo del radio de redondeo en Apariencia y cambia el valor. También puedes hacer clic en para modificar cada esquina individualmente. |
||
Nombre del archivo y del proyecto, y acciones del archivoEl nombre de un archivo, su proyecto y el desplegable de las acciones del archivo se han movido al panel de navegación. |
||
MáscaraUtiliza una máscara para mostrar áreas específicas de un objeto mientras se ocultan el resto. Al seleccionar un objeto, haz clic en Utilizar como máscara para crear un grupo de máscaras con el objeto como máscara. Dependiendo del número de acciones disponibles, es posible que Utilizar como máscara se encuentre en el menú Más. |
||
Edición múltipleLa edición múltiple te permite seleccionar varias capas de distintos marcos, grupos y secciones, y aplicar las mismas ediciones en todos ellos de forma masiva. Haz clic en en el panel de propiedades para habilitar la edición múltiple |
||
Complementos y widgetsPara acceder a los complementos y a los widgets, abre Acciones en la barra de herramientas y haz clic en la pestaña Complementos y widgets. |
||
Cambiar la anchura o la altura de un objeto, o cambiar su tamaño para ajustarloCambia la anchura y la altura de un objeto en Disposición. También puedes cambiar el tamaño de un marco para que se ajuste a las capas secundarias haciendo clic en el icono . |
||
RotarPuedes modificar la orientación de un objeto rotándolo y girándolo. Para ello, selecciona un objeto, ve a Posición y haz clic en:
|
||
Mostrar u ocultar un objetoPara ocultar un objeto en el lienzo, haz clic en , junto a Apariencia. Para volver a mostrarlo, haz clic en . |
||
TextoLa opción Texto ahora se llama Tipografía.
|
||
Modos de variablesLos modos de variables representan los distintos contextos de un diseño. Cada modo contiene una lista de valores para una variable dentro de una colección. Si una colección de variables tiene varios modos, puedes intercambiarlos en las capas y en los elementos para cambiar el diseño según el contexto. Si un objeto está sujeto a una variable con varios modos, puedes hacer clic en , junto a Apariencia, para cambiarlos. |
||
Añadir varianteLas variantes te permiten agrupar y organizar componentes similares en un único contenedor. Al insertar una instancia de componente, puedes elegir las propiedades de las variantes que prefieras del conjunto de componentes. Para añadir una variante, selecciona un componente principal y haz clic en Añadir una variante, junto al nombre del componente en el panel de propiedades. |
||
Editar la ruta de un vectorPara editar la ruta de un vector, haz clic en Editar objeto, junto a Vector. Si seleccionas varias rutas de vector, aparecerá el menú de operaciones booleanas. Desde ahí, puedes ejecutar las siguientes operaciones:
|
||
Opciones de zoom/vistaEn el menú Opciones de zoom/vista, puedes cambiar los ajustes o configurar las opciones de vista, como las cuadrículas de la disposición o los cursores multiusuario. |
¿Puedo utilizar el diseño antiguo?
Si te pierdes con la nueva interfaz, puedes volver fácilmente al diseño antiguo. Desde un archivo de diseño, abre el menú de ayuda y haz clic en Volver a la IU antigua.
Si decides volver a cambiarlo más adelante, puedes acceder de nuevo a este menú y probar el nuevo diseño cuando desees.