- \n
- Hacer que los \u00edtems abarquen todo el espacio del frame<\/li>\n\n\n\n
- Usar propiedades como padding para dar aire o espacio de respeto a un dise\u00f1o.<\/li>\n\n\n\n
- Alinear objetos de manera autom\u00e1tica.<\/li>\n\n\n\n
- Distribuir el espacio vac\u00edo entre objetos de forma autom\u00e1tica.<\/li>\n<\/ul>\n\n\n\n
Para qu\u00e9 sirve el auto layout de Figma<\/strong><\/h2>\n\n\n\n
La pregunta m\u00e1s presente a la hora de hablar acerca del autolayout en figma es:<\/p>\n\n\n\n
\u201c\u00bfPor qu\u00e9 aplicar\u00eda todas estas configuraciones complicadas cuando puedo solo colocar los elementos y ya?\u201d<\/em><\/p>\n\n\n\n
Y la respuesta es, porque nos permite mostrar dise\u00f1os responsivos y el comportamiento de m\u00f3dulos a diferentes resoluciones o tama\u00f1os.<\/strong><\/p>\n\n\n\n
El auto layout de Figma es particularmente \u00fatil si tu objetivo es:<\/strong><\/p>\n\n\n\n
- \n
- Explicar al equipo de desarrollo c\u00f3mo tiene que funcionar<\/li>\n\n\n\n
- Facilitar la visualizaci\u00f3n de un MVP<\/li>\n\n\n\n
- Mejorar y prever problemas de dise\u00f1o responsivo antes de llegar a la etapa de desarrollo.<\/li>\n<\/ul>\n\n\n\n
Cu\u00e1les son las propiedades del auto layout de Figma<\/strong><\/h2>\n\n\n\n
El auto layout de Figma tiene varias propiedades que, a primera vista, pueden llegar a ser complicadas de entender, pero realmente no tienen por qu\u00e9 serlo. Puedes acceder a estas a trav\u00e9s del panel de propiedades.<\/p>\n\n\n\n
Vamos a ver cu\u00e1les son:<\/strong><\/p>\n\n\n\n
Direcci\u00f3n (Direction)<\/h5>\n\n\n\n
La m\u00e1s f\u00e1cil de entender de todas las propiedades. Te sirve para decidir si tu auto layout se aplica de arriba a abajo o hacia los lados.<\/p>\n\n\n\n
Vertical:<\/strong> Los elementos se apilan uno sobre otro.
Horizontal:<\/strong> Los elementos se alinean uno al lado del otro.
Wrap: <\/strong>Los elementos se desplazan hasta la siguiente fila una vez se completa el 100%<\/p>\n\n\n\n![\"\"](\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/07\/image-3-1024x472.png\")
En este ejemplo he usado las tres direcciones disponibles: Vertical, horizontal y warp<\/figcaption><\/figure>\n\n\n\n Alineaci\u00f3n (Alignment)<\/h5>\n\n\n\n
Al igual que otros programas de dise\u00f1o como Illustrator o Photoshop, en Figma tenemos que el programa nos facilita la tarea de alinear a varios lados. Nada fuera de lo normal, esto es m\u00e1s a nivel general. La \u00fanica diferencia es que en lugar de tener los cl\u00e1sicos “align to top” tenemos un peque\u00f1o panel m\u00e1s intuitivo que muestra si se coloca en la esquina superior derecha, izquierda, abajo o al centro.<\/p>\n\n\n\n
La alineaci\u00f3n controla (valga la redundancia) c\u00f3mo se alinean los elementos dentro del marco del auto layout. Puedes alinear los elementos a la izquierda, derecha, arriba, abajo, al centro, etc.<\/p>\n\n\n\n
![\"\"](\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/07\/image-1-1024x598.png\")
En este ejemplo, he alineado los elementos en el centro y hacia abajo<\/figcaption><\/figure>\n\n\n\n Espaciado entre elementos (Spacing between items)<\/h5>\n\n\n\n
Define el espacio entre los elementos dentro del Auto Layout. Puedes especificar un valor fijo o dejar que Figma lo calcule autom\u00e1ticamente. En mi opini\u00f3n. Esta es literalmente la propiedad m\u00e1s util de todo este tema del layout. Es f\u00e1cil de entender y puedes controlar la distancia de los elementos dentro del card en lo que parece ser (espero) pixeles.<\/p>\n\n\n\n
![\"\"](\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/07\/image-2-1024x506.png\")
En este ejemplo de aca aumente con el clic sostenido el “vertical gap between items” a un 37. Puedes dejarlo en auto y si, colocaste la direcci\u00f3n horizontal solo cambia el nombre a “horizontal gap between items”<\/figcaption><\/figure>\n\n\n\n Padding<\/h5>\n\n\n\n
Controla el espacio interior del contenedor alrededor de los elementos. Puedes definir el padding superior, inferior, izquierdo y derecho de manera individual o conjunta.<\/p>\n\n\n\n
![\"\"](\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/07\/image-4-1024x468.png\")
En este ejemplo a\u00f1ad\u00ed un padding de 27 tanto de altura como de ancho al segundo card. Como puedes ver el contenido se ha tenido que mover m\u00e1s adentro de su contenedor. Esto es util para casos en donde necesitamos crear “aire”.<\/figcaption><\/figure>\n\n\n\n Resizing<\/h5>\n\n\n\n
El resizing, es en mi opini\u00f3n la propiedad m\u00e1s incomprendida de Figma. As\u00ed que vamos a simplificarlo.<\/p>\n\n\n\n
Imagina que tienes una bolsa de pl\u00e1stico y quieres meter algo adentro. En ese caso, la bolsa de pl\u00e1stico se adapta a la forma de las cosas que tienen adentro. Si metes un l\u00e1piz la bolsa se apega a la altura del l\u00e1piz y lo abraza, si metes un radio la bolsa se apega a su ancho y lo abraza. En ambos casos, la bolsa de pl\u00e1stico termina cambiando su forma a lo que tiene adentro. Algo similar funciona con Hugh content.<\/strong><\/p>\n\n\n\n
Por otro lado, ahora imagina que tienes un globo con agua, si aplastas globo el agua se mueve a los lados y si estiras el globo el agua se mueve arriba y abajo y lo llena. Algo similar funciona con fill container.<\/strong><\/p>\n\n\n\n
Finalmente, ahora imagina que tienes una caja de cristal de 2x2m y decides meter adentro un tubo de metal galvanizado que mide 0.5mx3m ese metro adicional rompe el cristal y se sale de la caja que esta vez, no es flexible. Algo similar funciona Fixed<\/strong><\/p>\n\n\n\n
Hug contents:<\/strong> El contenedor ajusta su tama\u00f1o para adaptarse a su contenido. Si el contenido crece, el contenedor crece.
Fill container:<\/strong> Los elementos dentro del Auto Layout se expanden para llenar el contenedor (Puede ser llenar el ancho o el alto)
Fixed: <\/strong>Mantiene un tama\u00f1o fijo sin importar el contenido. <\/p>\n\n\n\n![\"\"](\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/07\/image-5-1024x497.png\")
<\/figure>\n\n\n\nDistribuci\u00f3n (Distribution)<\/h5>\n\n\n\n
Controla c\u00f3mo se distribuyen los elementos dentro del contenedor. Es similar a trabajar con la direcci\u00f3n y lo activas con uno o dos clics. Basicamente puedes optar por distribuirlos con “gap set to auto” o con solo la alineaci\u00f3n.<\/p>\n\n\n\n
![\"\"](\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/07\/image-6-1024x452.png\")
En este ejemplo coloque un elemento y con doble clic en la distribuci\u00f3n le metio una distancia a todos segun el ancho del contenedor, mientras que en el de arriba solo se centraron los elementos. Realmente los iconos que te coloca la interfaz de Figma son intuitivos.<\/figcaption><\/figure>\n\n\n\n Reordenamiento (Reordering)<\/h5>\n\n\n\n
Puedes cambiar el orden de los elementos arrastr\u00e1ndolos dentro del marco. Solo dale clic, mantenlo sostenido y mueve el elemento para cambiar el orden. Bastante genial en mi opinion esta propiedad.<\/p>\n\n\n\n
Constraints<\/h6>\n\n\n\n
Define c\u00f3mo los elementos se comportan cuando el tama\u00f1o del contenedor cambia. Las opciones incluyen fijar los elementos a los bordes del contenedor o permitir que se escalen proporcionalmente. Los constrains son como ponerle un chicle a algo. Si le pones el chicle al lado derecho cuando hagas crecer el frame del lado derecho lo que colocaste se va a mover.<\/p>\n\n\n\n
![\"\"](\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/08\/image-1024x511.png\")
En este ejemplo de los contrains cree dos casos. El primero con un constrain arriba y derecha y el otro abajo y derecha. Al extender el ancho o la altura del frame al cuadrado al que le aplique el frame se movio hacia la derecha y el otro hacia abajo. Esto refleja que si la pantalla se fuera a ampliar este elemento se mover\u00eda segun su lugar respectivo.<\/figcaption><\/figure>\n\n\n\n C\u00f3mo a\u00f1adir elementos adicionales dentro de un auto layout<\/strong><\/h2>\n\n\n\n
Para a\u00f1adir elementos adicionales dentro de un auto layout en Figma puede seguir estos pasos:<\/p>\n\n\n\n
- \n
- Selecciona el marco de auto layout<\/strong> al que deseas a\u00f1adir elementos.<\/li>\n\n\n\n
- Arrastra y suelta<\/strong> los nuevos elementos dentro del marco de auto layout. Figma ajustar\u00e1 autom\u00e1ticamente el espaciado y la disposici\u00f3n seg\u00fan las propiedades del auto layout.<\/li>\n\n\n\n
- Usa las opciones de anidaci\u00f3n<\/strong> si deseas que los nuevos elementos se comporten de manera diferente a los existentes.<\/li>\n<\/ol>\n\n\n\n
C\u00f3mo crear botones responsivos con auto layout en Figma<\/strong><\/h2>\n\n\n\n
Para crear botones responsivos con auto layout en Figma sigue estos pasos:<\/p>\n\n\n\n
- \n
- Crea un texto<\/strong> para tener contenido en el bot\u00f3n.<\/li>\n\n\n\n
- Aplica auto layout<\/strong> al texto seleccion\u00e1ndolo y presionando
Shift + A<\/code> o usando el men\u00fa de auto layout.<\/li>\n\n\n\n- Ajusta el padding<\/strong> alrededor del texto para definir el tama\u00f1o del bot\u00f3n.<\/li>\n\n\n\n
- Configura el redimensionamiento horizontal<\/strong> a “Hug Contents” para que el bot\u00f3n se ajuste autom\u00e1ticamente al texto.<\/li>\n\n\n\n
- A\u00f1ade estilos<\/strong> como bordes, rellenos y sombras para mejorar la apariencia del bot\u00f3n.<\/li>\n<\/ol>\n\n\n\n
C\u00f3mo aplicar auto layout a cards en Figma<\/strong><\/h2>\n\n\n\n
Para aplicar auto layout a cards en Figma:<\/p>\n\n\n\n
- \n
- Selecciona los elementos del card<\/strong> (t\u00edtulo, imagen, descripci\u00f3n, etc.).<\/li>\n\n\n\n
- Agrupa los elementos<\/strong> en un solo marco.<\/li>\n\n\n\n
- Aplica Auto Layout<\/strong> al marco seleccionado presionando
Shift + A<\/code>.<\/li>\n\n\n\n- Configura el espaciado y padding<\/strong> entre los elementos y el borde del card.<\/li>\n\n\n\n
- Ajusta las propiedades de redimensionamiento<\/strong> seg\u00fan sea necesario para asegurarte de que el card sea responsivo y flexible.<\/li>\n<\/ol>\n\n\n\n
\u00bfDeber\u00eda usar siempre el auto layout de Figma?<\/strong><\/h2>\n\n\n\n
Personalmente, pienso que as\u00ed como la sal le da sabor a la comida, mucha sal la puede arruinar, especialmente si es agregada en la etapa equivocada.<\/p>\n\n\n\n
Lo mismo es con el autolayout. <\/strong><\/p>\n\n\n\n
Para m\u00ed, usarlo siempre en todo momento del proyecto puede ser peligroso. Imagina que haces una landing entera con autolayout y que el cliente decida que quiere modificar la cantidad de columnas o afirme que est\u00e1 muy saturado y que quiere cambiar el orden de todo o a\u00f1adir elementos nuevos al header.<\/p>\n\n\n\n
Esto puede representar un problema si est\u00e1s en las etapas iniciales del dise\u00f1o y la diagramaci\u00f3n de la web est\u00e1 casi terminada. <\/p>\n\n\n\n
Por eso hay que trabajar esto con moderaci\u00f3n.<\/p>\n\n\n\n
Consejos para usar el auto layout de Figma<\/strong><\/h3>\n\n\n\n
El usar y modificar un auto layout puede llegar a ser tedioso si est\u00e1s en una etapa de dise\u00f1o de muchos ajustes y de conceptualizaci\u00f3n. <\/p>\n\n\n\n
Tiene m\u00e1s sentido usarlo en etapas m\u00e1s finales para presentar c\u00f3mo ser\u00e1 la web en responsivo o usarlo como un elemento de ayuda m\u00e1s a nivel \u201cat\u00f3mico\u201d. Para evitar tener que aplicar el mismo cambio a 20 p\u00e1ginas diferentes.<\/p>\n\n\n\n
El auto layout tiene m\u00e1s sentido cuando sabes que lo que se va a modificar no afecta la condici\u00f3n final del dise\u00f1o<\/strong><\/p>\n\n\n\n
Cu\u00e1ndo S\u00cd usar el auto layout de Figma<\/strong><\/h2>\n\n\n\n
- \n
- Dise\u00f1os responsivos: <\/strong>Para demostrarle al cliente o al equipo de desarrollo como las interfaces deben adaptarse a diferentes tama\u00f1os de pantalla.<\/li>\n\n\n\n
- Componentes reutilizables:<\/strong> Para crear componentes que puedan actualizarse f\u00e1cilmente sin romper la estructura entera del sitio (como los cards)<\/li>\n\n\n\n
- Automatizaci\u00f3n del dise\u00f1o y sistemas at\u00f3micos:<\/strong> Para trabajar de lo micro a lo macro y mantener consistencia a la hora de reducir el tiempo de ajuste manual.<\/li>\n<\/ul>\n\n\n\n
\u00bfC\u00f3mo se puede hacer que el auto layout de Figma se active?<\/strong><\/h2>\n\n\n\n
Solo dale clic al bot\u00f3n de autolayout y mira la magia figmaliana funcionar. Si no, simplemente sigue los siguientes pasos para lograrlo:<\/p>\n\n\n\n
Activar Auto Layout en Figma<\/strong><\/h3>\n\n\n\n
- \n
- Selecciona uno o m\u00e1s elementos<\/strong> a los que deseas aplicar Auto Layout.<\/li>\n\n\n\n
- Presiona
Shift + A<\/code><\/strong> o selecciona “Add Auto Layout” en el men\u00fa de propiedades.<\/li>\n\n\n\n- Configura las propiedades<\/strong> del Auto Layout, como la direcci\u00f3n (horizontal o vertical), el espaciado y el padding seg\u00fan tus necesidades.<\/li>\n<\/ol>\n\n\n\n
C\u00f3mo se copian los ajustes de auto layout de Figma<\/strong><\/h2>\n\n\n\n
Lo m\u00e1s f\u00e1cil es simplemente crear un estilo en Figma y aplicarle ese estilo a componente que desees que tenga la misma configuraci\u00f3n de auto layout. <\/p>\n\n\n\n
En mi opini\u00f3n, el Ctrl + c y Ctrl + v de Figma en cuanto a auto layout se refiere, en esta versi\u00f3n que estoy usando, no es muy \u201cintuitivo\u201d que digamos. Por lo que toma como 20 intentos que quede bien.\u00a0<\/p>\n\n\n\n
Puede que en versiones futuras lo corrijan, no lo s\u00e9. Es m\u00e1s f\u00e1cil solo crear el estilo y aplicarlo a posteriores frames o componentes.<\/p>\n\n\n\n
Para copiar los ajustes de Auto Layout en Figma:<\/strong><\/h4>\n\n\n\n
- \n
- Selecciona el marco de Auto Layout<\/strong> del que deseas copiar los ajustes.<\/li>\n\n\n\n
- Presiona
Command + C<\/code><\/strong> (Ctrl + C en Windows) para copiar el marco.<\/li>\n\n\n\n- Selecciona el marco de destino<\/strong> al que deseas aplicar los ajustes.<\/li>\n\n\n\n
- Presiona
Command + V<\/code><\/strong> (Ctrl + V en Windows) para pegar los ajustes.<\/li>\n\n\n\n- Alternativamente, puedes usar las opciones de estilos de Auto Layout<\/strong> en el panel de propiedades para copiar y aplicar ajustes espec\u00edficos.<\/li>\n<\/ol>\n\n\n\n
C\u00f3mo se a\u00f1ade padding con el auto layout de Figma<\/strong><\/h2>\n\n\n\n
Hay una opci\u00f3n en el men\u00fa de autolayout que te lo permite que se llama \u201cpadding\u201d puedes seleccionarla o modificarla para cada uno de los lados de tu componente. Honestamente, en mi opinion solo arrastrar los tama\u00f1os es m\u00e1s f\u00e1cil.<\/p>\n\n\n\n
C\u00f3mo dominar el auto layout de Figma<\/strong><\/h2>\n\n\n\n
Practicar, practicar y practicar.<\/p>\n\n\n\n
No hay mayor hack o truco que literalmente explorar los elementos y funciones por ti mismo. <\/p>\n\n\n\n
S\u00ed, al comienzo puede ser un poco confuso todo eso de hugh y fill, pero eventualmente te acostumbras. <\/p>\n\n\n\n
La cosa del autolayout es trabajar de lo micro a lo macro y tener una idea general de lo que quieres dise\u00f1ar y como quieres que se comporte, si no vas a estar perdiendo el tiempo metiendole autolayout hasta a tu perro sin mayor beneficio.<\/p>\n\n\n\n
Es de ayuda a los desarrolladores y dise\u00f1adores<\/strong><\/h2>\n\n\n\n
La realidad es que s\u00ed, es bastante de ayuda porque les permite entender c\u00f3mo se va a reducir y comportar los elementos cuando la pantalla tenga un ancho menor. De lo contrario los ves adivinando y generando estos errores que hacen una web lucir menos responsive.<\/p>\n\n\n\n
REFERENCES<\/h6>\n\n\n\n
- \n
- Using auto layout. (s. f.). Figma. https:\/\/help.figma.com\/hc\/en-us\/articles\/5731482952599-Using-auto-layout<\/a><\/li>\n\n\n\n
- Figma. (s. f.). Explore Auto Layout properties. help.figma.com. Recuperado 20 de junio de 2024, de https:\/\/help.figma.com\/hc\/en-us\/articles\/360040451373-Explore-auto-layout-properties<\/a><\/li>\n\n\n\n
- Busquets, C. (2023, 4 septiembre). Aprende auto layout de Figma. uiFromMars. Recuperado 20 de junio de 2024, de https:\/\/www.uifrommars.com\/auto-layout-figma\/<\/a><\/li>\n\n\n\n
- Figma auto layout playground | Figma. (s. f.). Figma. https:\/\/www.figma.com\/community\/file\/784448220678228461<\/a><\/li>\n\n\n\n
- Auto Layout in Figma – Figma Handbook – Design+Code. (s. f.). designcode.io. Recuperado 20 de junio de 2024, de https:\/\/designcode.io\/figma-handbook-auto-layout<\/a><\/li>\n\n\n\n
- Auto Layout Exercises | Figma. (s. f.). Figma. Recuperado 20 de junio de 2024, de https:\/\/www.figma.com\/community\/file\/1201678468703307065<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"
El auto layout en Figma lleg\u00f3 para quedarse, y si quieres ser un dise\u00f1ador UI\/UX profesional, es necesario aprender cu\u00e1ndo […]<\/p>","protected":false},"author":1,"featured_media":5522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[35,11],"tags":[18],"class_list":["post-5501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-grafico","category-ui-ux","tag-ui-ux"],"yoast_head":"\n
C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)<\/title>\n<meta name=\"description\" content=\"Auto layout de Figma (F\u00c1CIL) C\u00f3mo usar el auto layout de Figma con este tutorial paso a paso que te explica a detalle su funcionamiento.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/oliverpuente.com\/en\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)\" \/>\n<meta property=\"og:description\" content=\"UI\/UX\" \/>\n<meta property=\"og:url\" content=\"https:\/\/oliverpuente.com\/en\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/\" \/>\n<meta property=\"og:site_name\" content=\"oliverpuente\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/oliver.branding\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/oliver.branding\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-04T21:01:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-04T21:13:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/08\/auto-layout-figma-e1722805276100.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1237\" \/>\n\t<meta property=\"og:image:height\" content=\"641\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Oliver Puente\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oliver Puente\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/\"},\"author\":{\"name\":\"Oliver Puente\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"headline\":\"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)\",\"datePublished\":\"2024-08-04T21:01:29+00:00\",\"dateModified\":\"2024-08-04T21:13:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/\"},\"wordCount\":2426,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"image\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/auto-layout-figma-e1722805276100.png\",\"keywords\":[\"UI\\\/UX\"],\"articleSection\":[\"Dise\u00f1o Gr\u00e1fico\",\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/\",\"name\":\"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/auto-layout-figma-e1722805276100.png\",\"datePublished\":\"2024-08-04T21:01:29+00:00\",\"dateModified\":\"2024-08-04T21:13:52+00:00\",\"description\":\"Auto layout de Figma (F\u00c1CIL) C\u00f3mo usar el auto layout de Figma con este tutorial paso a paso que te explica a detalle su funcionamiento.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#primaryimage\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/auto-layout-figma-e1722805276100.png\",\"contentUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/auto-layout-figma-e1722805276100.png\",\"width\":1237,\"height\":641,\"caption\":\"auto layout figma tutorial\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/ui-ux\\\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/oliverpuente.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#website\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/\",\"name\":\"oliverpuente\",\"description\":\"Identidad de marca - Dise\u00f1ador de identidad de marca\",\"publisher\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"alternateName\":\"Oliver Puente\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/oliverpuente.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\",\"name\":\"Oliver Puente\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"contentUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"width\":609,\"height\":186,\"caption\":\"Oliver Puente\"},\"logo\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\"},\"description\":\"Dise\u00f1ador freelance de identidad de marca y UI\\\/UX con sede en Guatemala. Oliver Puente ayuda a las empresas a modernizar sus marcas.\",\"sameAs\":[\"http:\\\/\\\/www.oliverpuente.com\",\"https:\\\/\\\/www.facebook.com\\\/oliver.branding\",\"https:\\\/\\\/www.instagram.com\\\/oliver.branding\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/oliver-puente-branding\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/oliverpuente916\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/Dizalo\\\/featured\"],\"knowsAbout\":[\"Branding\",\"UI\",\"UX\",\"Dise\u00f1o Web\"],\"knowsLanguage\":[\"espa\u00f1ol\",\"ingl\u00e9s\"],\"jobTitle\":\"Dise\u00f1ador de marcas\",\"worksFor\":\"Dizalo\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/en\\\/author\\\/puentegutierrezzzoliversho\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)","description":"Auto layout de Figma (F\u00c1CIL) C\u00f3mo usar el auto layout de Figma con este tutorial paso a paso que te explica a detalle su funcionamiento.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/oliverpuente.com\/en\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/","og_locale":"en_US","og_type":"article","og_title":"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)","og_description":"UI\/UX","og_url":"https:\/\/oliverpuente.com\/en\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/","og_site_name":"oliverpuente","article_publisher":"https:\/\/www.facebook.com\/oliver.branding","article_author":"https:\/\/www.facebook.com\/oliver.branding","article_published_time":"2024-08-04T21:01:29+00:00","article_modified_time":"2024-08-04T21:13:52+00:00","og_image":[{"width":1237,"height":641,"url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/08\/auto-layout-figma-e1722805276100.png","type":"image\/png"}],"author":"Oliver Puente","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Oliver Puente","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#article","isPartOf":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/"},"author":{"name":"Oliver Puente","@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"headline":"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)","datePublished":"2024-08-04T21:01:29+00:00","dateModified":"2024-08-04T21:13:52+00:00","mainEntityOfPage":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/"},"wordCount":2426,"commentCount":0,"publisher":{"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"image":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#primaryimage"},"thumbnailUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/08\/auto-layout-figma-e1722805276100.png","keywords":["UI\/UX"],"articleSection":["Dise\u00f1o Gr\u00e1fico","UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/","url":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/","name":"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)","isPartOf":{"@id":"https:\/\/oliverpuente.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#primaryimage"},"image":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#primaryimage"},"thumbnailUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/08\/auto-layout-figma-e1722805276100.png","datePublished":"2024-08-04T21:01:29+00:00","dateModified":"2024-08-04T21:13:52+00:00","description":"Auto layout de Figma (F\u00c1CIL) C\u00f3mo usar el auto layout de Figma con este tutorial paso a paso que te explica a detalle su funcionamiento.","breadcrumb":{"@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#primaryimage","url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/08\/auto-layout-figma-e1722805276100.png","contentUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2024\/08\/auto-layout-figma-e1722805276100.png","width":1237,"height":641,"caption":"auto layout figma tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/oliverpuente.com\/ui-ux\/como-usar-el-auto-layout-de-figma-guia-completa-paso-a-paso\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/oliverpuente.com\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo usar el auto layout de Figma (Gu\u00eda completa paso a paso)"}]},{"@type":"WebSite","@id":"https:\/\/oliverpuente.com\/#website","url":"https:\/\/oliverpuente.com\/","name":"oliverpuente","description":"Identidad de marca - Dise\u00f1ador de identidad de marca","publisher":{"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"alternateName":"Oliver Puente","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/oliverpuente.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7","name":"Oliver Puente","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","contentUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","width":609,"height":186,"caption":"Oliver Puente"},"logo":{"@id":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg"},"description":"Dise\u00f1ador freelance de identidad de marca y UI\/UX con sede en Guatemala. Oliver Puente ayuda a las empresas a modernizar sus marcas.","sameAs":["http:\/\/www.oliverpuente.com","https:\/\/www.facebook.com\/oliver.branding","https:\/\/www.instagram.com\/oliver.branding\/","https:\/\/www.linkedin.com\/in\/oliver-puente-branding\/","https:\/\/www.pinterest.com\/oliverpuente916\/","https:\/\/www.youtube.com\/c\/Dizalo\/featured"],"knowsAbout":["Branding","UI","UX","Dise\u00f1o Web"],"knowsLanguage":["espa\u00f1ol","ingl\u00e9s"],"jobTitle":"Dise\u00f1ador de marcas","worksFor":"Dizalo","url":"https:\/\/oliverpuente.com\/en\/author\/puentegutierrezzzoliversho\/"}]}},"_links":{"self":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/comments?post=5501"}],"version-history":[{"count":5,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5501\/revisions"}],"predecessor-version":[{"id":5527,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5501\/revisions\/5527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/media\/5522"}],"wp:attachment":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/media?parent=5501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/categories?post=5501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/tags?post=5501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Figma. (s. f.). Explore Auto Layout properties. help.figma.com. Recuperado 20 de junio de 2024, de https:\/\/help.figma.com\/hc\/en-us\/articles\/360040451373-Explore-auto-layout-properties<\/a><\/li>\n\n\n\n
- Presiona
- Presiona
- Componentes reutilizables:<\/strong> Para crear componentes que puedan actualizarse f\u00e1cilmente sin romper la estructura entera del sitio (como los cards)<\/li>\n\n\n\n
- Agrupa los elementos<\/strong> en un solo marco.<\/li>\n\n\n\n
- Aplica auto layout<\/strong> al texto seleccion\u00e1ndolo y presionando
- Arrastra y suelta<\/strong> los nuevos elementos dentro del marco de auto layout. Figma ajustar\u00e1 autom\u00e1ticamente el espaciado y la disposici\u00f3n seg\u00fan las propiedades del auto layout.<\/li>\n\n\n\n
- Selecciona el marco de auto layout<\/strong> al que deseas a\u00f1adir elementos.<\/li>\n\n\n\n