Navegando por UI3: la nueva UI de Figma
Quién puede utilizar esta función
- Disponible en fase beta limitada en todos los planes
- Si no tienes acceso a la versión rediseñada de Figma, ten paciencia; estas actualizaciones se irán lanzando a lo largo de los próximos meses. Y, si eres nuevo en Figma y utilizas automáticamente la versión rediseñada, te recomendamos nuestra guía para explorar los archivos de diseño.
En Config 2024, presentamos un Figma rediseñado, llamado UI3. Esta guía es para las personas que usaban el diseño anterior de Figma y quieren ver cómo han cambiado las cosas.
Por qué hemos rediseñado Figma
Con el tiempo, Figma se volvió más complejo y UI3 es un esfuerzo para simplificar tu experiencia de diseño. Nuestra intención es hacer que Figma Design se centre en diseñadores y sea más accesible para una amplia variedad de personas. También estamos creando una base coherente para los productos existentes, y los que vendrán.
Este nuevo diseño:
- Ofrece más control sobre la interfaz, con paneles ajustables y desplegables
- Enfatiza tu trabajo en el lienzo
- Hace que las funciones sean más intuitivas, mejorando su ubicación, agrupación y cómo se adaptan a diferentes contextos
- Agrega coherencia entre el resto de los productos, haciendo más fácil el cambio entre Figma Design, FigJam, Dev Mode y Figma Slides
Consejo: ¿Quieres saber más sobre el rediseño? Visita nuestra publicación de blog: El nuevo diseño de Figma, donde tu trabajo es el centro de atención
Novedades
Panel de navegación
Hemos reorganizado el panel de navegación de la parte izquierda del lienzo para albergar toda la información sobre tu archivo y facilitar su uso.
Minimizar la UI
Si necesitas un poco más de espacio en el lienzo, ahora puedes minimizar la UI desde el panel de navegación. Haz clic en Minimize UI para contraer tanto el panel de navegación como el panel de propiedades.
Si seleccionas algo en el lienzo con la UI minimizada, el panel de propiedades se abre temporalmente para que puedas acceder a los controles de cada propiedad.
Nombre y ubicación del archivo
Haz clic en el ícono desplegable junto al nombre del archivo para realizar una acción en un archivo, como moverlo, publicar una biblioteca, crear una copia o mostrar el historial de versiones.
Pestaña de recursos
Hemos facilitado la búsqueda, exploración e inserción de componentes desde la pestaña Assets.
Barra de herramientas
La nueva barra de herramientas desplaza las herramientas de diseño a la parte inferior del editor. Esto libera más espacio de trabajo en el lienzo e introduce nuevas funciones de IA a través del nuevo menú de acciones.
Nota: Las funciones de IA de Figma Design se irán implementando en los próximos meses. Más información →
Actions
Actions es un nuevo elemento en la barra de herramientas, y te ayuda a plasmar tu imaginación a la realidad, más rápido. Desde aquí, puedes acceder a todas las herramientas de IA de Figma, acciones comunes de productividad, plugins y widgets, componentes y mucho más.
Entrar en Modo de Desarrollo
Ahora puedes acceder al Modo de Desarrollo en la barra de herramientas, lo que facilita el cambio entre modos en Figma Design.
Panel de propiedades
La vista Design del panel de propiedades es más fácil de usar y ahora las propiedades están agrupadas para adaptarse a flujos de trabajo más modernos.
También puedes cambiar el tamaño del panel de propiedades, lo que resulta práctico para trabajar con componentes con nombres largos.
Etiquetas de propiedades
Como novedad en UI3, ahora puedes activar etiquetas de propiedades para que quede más claro qué hace cada propiedad.
Para activar las etiquetas de propiedades, haz clic en el menú desplegable situado junto al porcentaje de zoom del 100 % en el panel de propiedades y selecciona Property labels.
Acciones de selección
Ahora, el panel de propiedades presenta una fila de encabezado con las acciones que puedes realizar en un objeto seleccionado.
Por ejemplo, puedes encontrar los botones para aplicar una máscara, crear un componente o realizar una operación booleana, o pueden estar escondidos en el menú More.
Layout
Layout contiene todas las propiedades relacionadas con el diseño de un objeto, como el ancho y la altura.
Al hacer clic en Use auto layout en un marco, la etiqueta Layout cambia a Auto layout, y todas las propiedades de diseño automático pasan a estar disponibles.
Posición
Ahora puedes acceder a todas las propiedades relacionadas con la posición de un objeto en el lienzo, incluidas las restricciones, en Position.
Consejo: Ahora puedes destacarte a ti mismo desde el panel de propiedades. Cuando la gente entre en Spotlight, minimizaremos los paneles izquierdo y derecho, y la barra de herramientas, para que tengas más espacio para mostrar tu trabajo.
¿Adónde se ha trasladado una función?
Echa un vistazo a la siguiente lista para ver todo lo que se ha trasladado y dónde puedes encontrarlo.
Diseño antiguo | Rediseño | |
Solicitar acceso de ediciónSi tienes acceso de |
||
Absolute positionAbsolute position ahora se llama Ignore auto layout. Si haces clic en Ignore auto layout, puedes colocar manualmente un objeto dentro de un marco de diseño automático sin seguir la estructura de diseño automático. Para ignorar el diseño automático, selecciona un elemento secundario de un marco de diseño automático y, a continuación, haz clic en en el panel de propiedades. |
||
Alinear objetosLos controles de alineación le ayudan a alinear un objeto con su capa principal, o a alinear varios objetos entre sí. Selecciona más de un objeto y, a continuación, haz clic en una de las herramientas de alineación de la sección Position en el panel de propiedades. |
||
Auto layoutAl utilizar el auto layout en un marco, este se ajustará dinámicamente a los cambios de contenido y a los diferentes tamaños de pantalla. Para utilizar esta función en un marco, haz clic en en la sección Layout del panel de propiedades. |
||
Valores automáticos de ancho y alto del diseñoEn los marcos de diseño automático, los valores de ancho y alto se combinan ahora con el comportamiento de redimensionamiento. Puedes encontrar estos valores:
|
||
Modos de fusiónLos modos de fusión definen cómo quieres que se fusionen dos capas. Para aplicar un modo de fusión, selecciona un objeto, haz clic en junto a Appearance y, a continuación, selecciona un modo. |
||
Clip contentPermite ocultar partes de una capa que se extienden más allá de los límites del marco principal. Usa la casilla de verificación Clip content en Layout para elegir si deseas recortar o mostrar el contenido. |
||
Propiedades de componentesLas propiedades de componentes son los aspectos cambiables de un componente. Puedes definir qué partes de un componente pueden cambiar los demás vinculándolos con propiedades específicas. Si un componente tiene propiedades de componentes disponibles, puedes encontrarlas debajo del nombre del marco en el panel de propiedades. |
||
ConstraintsLas Constraints le indican a Figma cómo se deben comportar las capas cuando reajustas el tamaño de sus marcos principales. Cuando se selecciona una capa secundaria, el ícono Constraints aparece al lado de los valores de posición X e Y en la sección Position del panel de propiedades. |
||
Radio de esquinaRadio de esquina es una propiedad que permite redondear las esquinas de un objeto. Con un objeto seleccionado, haz clic en el campo Corner Radius debajo de Appearance y cambia el valor. También puedes hacer clic en para modificar cada esquina individualmente. |
||
Nombre del archivo, nombre del proyecto y acciones del archivoEl nombre de un archivo, su proyecto y el desplegable de acciones del archivo se han trasladado al panel de navegación. |
||
MáscaraUsa una máscarapara mostrar áreas específicas de un objeto mientras ocultas el resto. Con un objeto seleccionado, haz clic en Use as mask para crear un grupo de máscaras con el objeto como máscara. Dependiendo del número de acciones disponibles, Use as mask podría estar en el menú More. |
||
Edición múltipleLa opción de edición múltiple te permite seleccionar varias capas a través de marcos, grupos y secciones y aplicarles las mismas ediciones de forma masiva. Haz clic en en el panel de propiedades para activar la edición múltiple. |
||
Plugins y widgetsPara acceder a los plugins y widgets, abre Actions en la barra de herramientas y, a continuación, haz clic en la pestaña Plugins & widgets. |
||
Redimensionar el ancho o alto de un objeto o ajustar su tamañoCambia el ancho o alto de un objeto en Layout. También puedes cambiar el tamaño de un marco para ajustarlo a sus capas secundarias haciendo clic en el ícono . |
||
GirarGirar o voltear te permite manipular objetos cambiando su orientación. Con un objeto seleccionado, busca la sección Position y realiza lo siguiente:
|
||
Mostrar u ocultar un objetoPara ocultar un objeto en el lienzo, haz clic en junto a Appearance. Para mostrarlo de nuevo, haz clic en . |
||
TextoEl campoText ahora se llama Typography.
|
||
Modos variablesLos modos de las variables representan los diferentes contextos de un diseño. Un modo contiene una lista de valores para una variable dentro de una colección. Si una colección variable tiene varios modos, puedes cambiar los modos en capas y elementos para cambiar rápidamente los diseños para diferentes contextos. Mientras un objeto esté vinculado a una variable con varios modos, puedes hacer clic en junto a Appearance para cambiar el modo de la variable. |
||
Añadir varianteLas variantes permiten agrupar y organizar componentes similares en un único contenedor. Al insertar una instancia de componente, puedes cambiar entre las propiedades de variante del conjunto de componentes. Para añadir una variante, selecciona un componente principal y haz clic en Add a variant al lado del nombre del componente en el panel de propiedades. |
||
Editar un trazado vectorialPara editar un trazado vectorial, haz clic en Edit object junto a Vector. Si seleccionas varios trazados vectoriales, aparecerá el menú Boolean Operations. Desde aquí, puedes realizar las siguientes operaciones:
|
||
Zoom/opciones de visualizaciónDesde el menú Zoom/view options, puedes ajustar el zoom o configurar las opciones de visualización, como las cuadrículas de diseño o los cursores multijugador. |
¿Puedo volver al diseño anterior?
Si te quedas atascado, hemos facilitado la opción de volver al diseño anterior. Desde dentro de un archivo de diseño, abre el
menú de ayuda y haz clic en Go back to previous UI.Si decides volver más tarde, puedes volver a este menú y probar de nuevo el rediseño cuando quieras.