{"id":384,"date":"2021-03-26T17:28:46","date_gmt":"2021-03-26T16:28:46","guid":{"rendered":"https:\/\/www.guille-rmo.com\/blog\/?p=384"},"modified":"2021-03-27T20:04:44","modified_gmt":"2021-03-27T19:04:44","slug":"disenando-componente-auto-layout-figma","status":"publish","type":"post","link":"https:\/\/www.guille-rmo.com\/blog\/disenando-componente-auto-layout-figma\/","title":{"rendered":"Dise\u00f1ando con Auto layout en Figma"},"content":{"rendered":"\n

Auto layout<\/strong><\/em> nos permite configurar y personalizar componentes, pudiendo reutilizarlos infinidad de veces<\/strong> y con un coste de esfuerzo muy bajo<\/strong> a la hora de realizar modificaciones sobre ellos.<\/p>\n\n\n\n

En este peque\u00f1o tutorial voy a explicarte c\u00f3mo configurar una t\u00edpica tarjeta de publicaci\u00f3n, que puedes encontrar en plataformas como Facebook o Linkedin, de manera que ilustre c\u00f3mo aplicar la funcionalidad Auto layout<\/em> de Figma<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Paso 1. Dise\u00f1a y punto<\/h2>\n\n\n\n

Hasta aqu\u00ed, nada nuevo. Simplemente debemos dise\u00f1ar el que ser\u00e1 el componente en cuesti\u00f3n, sin preocuparnos demasiado de nada m\u00e1s.<\/p>\n\n\n\n

Consejo:<\/strong> dise\u00f1a \u00aba m\u00e1ximos\u00bb. Es decir, teniendo en cuenta todos los elementos que podr\u00e1 tener nuestro componente. Ya habr\u00e1 tiempo de ocultar alguno si no queremos mostrarlo.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Paso 2. Agrupa y separa por bloques<\/h2>\n\n\n\n

Mi sugerencia es que visualizes y dividas el componente o m\u00f3dulo en grupos, ya que los trabajaremos por separado aplicando, si es necesario, Auto layout<\/em><\/strong> en cada uno de ellos.<\/p>\n\n\n\n

\"\"
1. Cabecera \/ 2. Imagen \/ 3. Informaci\u00f3n \/ 4. Acciones<\/figcaption><\/figure>\n\n\n\n

Paso 3. Aplicando Auto layout<\/em><\/h2>\n\n\n\n

Como hemos adelantado en el paso anterior, iremos aplicando Auto layout<\/strong><\/em> en cada uno de los 4 grupos, antes de aplicar la funcionalidad a todo el conjunto.<\/p>\n\n\n\n

Nota importante:<\/strong> Las opciones de la funcionalidad Resizing<\/strong><\/em> var\u00edan dependiendo de si el elemento o la agrupaci\u00f3n de elementos que se quiere configurar est\u00e1 o no contenido en otra agrupaci\u00f3n \u00abpadre\u00bb con Auto layout<\/strong><\/em> aplicada. Por ejemplo, la opci\u00f3n Fill container<\/em> para el grupo formado por Nombre + Profesi\u00f3n, que veremos en el paso 3.1, no se mostrar\u00e1 hasta que no se aplique Auto layout<\/strong><\/em> a la agrupaci\u00f3n de la Cabecera, formada a su vez por Avatar + (Nombre + Profesi\u00f3n) + Bot\u00f3n.<\/p>\n\n\n\n

3.1 Cabecera<\/h3>\n\n\n\n

De lo m\u00e1s peque\u00f1o a lo m\u00e1s grande, empezaremos aplicando Auto layout<\/strong><\/em> a las relaciones de elementos m\u00e1s simples.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Teniendo en cuenta los espacios que hemos definido en nuestro dise\u00f1o (en nuestro caso hay un padding de 16 p\u00edxeles alrededor de los elementos con 16 p\u00edxeles entre ellos) configuraremos Auto layout<\/strong><\/em> de esta manera para la Cabecera. Alinearemos los elementos horizontalmente (centro-izquierda).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Como hemos dicho antes, la opci\u00f3n Fill Container<\/em> no podremos aplicarla hasta que no agrupemos con Auto layout<\/strong><\/em> las 4 partes principales de nuestro componente, como se explica en el Paso 4<\/strong>.<\/p>\n\n\n\n

3.2 Imagen<\/h3>\n\n\n\n

Para la imagen no necesitamos aplicar Auto layout<\/strong><\/em>, pero s\u00ed tener en cuenta su comportamiento cuando queramos modificar el ancho o el alto de todo el componente: Fill container<\/em>, tanto horizontal como verticalemente.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3.3 Informaci\u00f3n de la publicaci\u00f3n<\/h3>\n\n\n\n

Aplicamos Auto layout <\/strong><\/em>a la informaci\u00f3n de la publicaci\u00f3n, a\u00f1adiendo un color de fondo gris a la misma agrupaci\u00f3n que genera autom\u00e1ticamente la funcionalidad.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3.4 Acciones<\/h3>\n\n\n\n

En esta \u00faltima parte del componente tendremos un m\u00e1ximo de 3 acciones que podremos modificar para que disminuyan en n\u00famero o s\u00f3lo se muestren los iconos.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Paso 4. Define Auto layout<\/em> a todo el conjunto<\/h2>\n\n\n\n

Una vez hayamos trabajado las 4 partes de nuestro dise\u00f1o, es momento de relacionarlas entre s\u00ed con Auto layout<\/strong><\/em>. Recuerda revisar las propiedades de Resizing<\/strong><\/em> de cada una de esas partes para asegurar que se ajustan bien a su contenedor.<\/p>\n\n\n\n

A la misma agrupaci\u00f3n generada por Auto layout<\/em><\/strong>, le puedes asignar estilos: un fondo blanco, curvatura en las esquinas y una ligera sombra paralela. No es necesario que crees un rect\u00e1ngulo para el fondo con esas propiedades.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Paso 5. Convierte todo en un componente<\/h2>\n\n\n\n

Tan sencillo como seleccionarlo todo y hacer click<\/em> en Create component<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Resultado<\/h2>\n\n\n\n

Si me he explicado bien y logramos tener todas las relaciones correctamente configuradas con Auto layout<\/strong><\/em>, tendremos la posibilidad (adem\u00e1s de la capacidad de modificar textos, im\u00e1genes, iconos y estilos) de poder ajustar las dimensiones de nuestro componente como necesitemos:<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

En este peque\u00f1o tutorial voy a explicarte c\u00f3mo hacer una t\u00edpica tarjeta de publicaci\u00f3n de manera que ilustre c\u00f3mo aplicar la funcionalidad de Auto layout de Figma.<\/p>\n","protected":false},"author":1,"featured_media":540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,2],"tags":[],"class_list":["post-384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-componentes-ui","category-tutoriales"],"_links":{"self":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts\/384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/comments?post=384"}],"version-history":[{"count":59,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts\/384\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/posts\/384\/revisions\/553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/media\/540"}],"wp:attachment":[{"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/media?parent=384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/categories?post=384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.guille-rmo.com\/blog\/wp-json\/wp\/v2\/tags?post=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}