{"id":437,"date":"2023-09-24T09:43:24","date_gmt":"2023-09-24T09:43:24","guid":{"rendered":"http:\/\/javigomez.org\/?p=437"},"modified":"2025-09-29T20:33:56","modified_gmt":"2025-09-29T20:33:56","slug":"tutorial-de-figma","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/09\/24\/tutorial-de-figma\/","title":{"rendered":"Tutorial de Figma"},"content":{"rendered":"\n<p>En este art\u00edculo vinculo 18 videos con una duraci\u00f3n de casi 2 horas (115 minutos) en donde se ven todos los conceptos b\u00e1sicos de Figma, desde como es su entorno hasta las interacciones. La intenci\u00f3n de este tutorial no es profundizar en t\u00e9cnicas de dise\u00f1o avanzadas, sino conocer todos los elementos b\u00e1sicos de Figma. <\/p>\n\n\n\n<p><strong>FIGMA 01 Interfaz de Figma<\/strong><\/p>\n\n\n\n<p>Revisi\u00f3n del interfaz de Figma<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 01 Interfaz de Figma\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/vkScltEeiIc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 02 Plugins<\/strong><\/p>\n\n\n\n<p>Concepto e instalaci\u00f3n de plugins (Content Reel y unsplash)<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 02 Plugins\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Q9TyS1NY43A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 03 Campos de Trabajo<\/strong><\/p>\n\n\n\n<p>Creaci\u00f3n de Frame o campos de trabajo de forma libre o predefinida a trav\u00e9s de un dispositivo<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 03 Campos de Trabajo\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/5YZY9QwGK-w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 04 Capas<\/strong><\/p>\n\n\n\n<p>Como metemos un frame dentro de otro. Agrupaci\u00f3n de varios elementos (Ctrl+G). Crear varias p\u00e1ginas<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 04 Capas\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/WTKgzGGURB4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 05 Alinear elementos<\/strong><\/p>\n\n\n\n<p>Alinear arriba\/abajo\/centrado, distribuir elementos horizontalmente\/verticalmente. Autolayout (cambiar orientaci\u00f3n, dar espacios, alinear elementos, espaciado, sacar un elemento y ver como se redimensiona)<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 05 Alinear elementos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/NggoyLf9rqA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 06 Editar y combinar elementos<\/strong><\/p>\n\n\n\n<p>Editar elementos haciendo doble sobre un elemento. Unir elementos, restar elementos, intersecci\u00f3n y exclusi\u00f3n)<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 06 Editar y combinar elementos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/ZJn291Gn31U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 07 Iconos<\/strong><\/p>\n\n\n\n<p>Creaci\u00f3n de un icono de lupa y una campana<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 07 Iconos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/wlmi1z-gS20?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 08 Crear Textos<\/strong><\/p>\n\n\n\n<p>Incluir texto manual, con Content Reel. Cambiar fuente, bold, tama\u00f1o, interlineado, espacio de p\u00e1rrafo, alineaci\u00f3n horizontal y vertical, ver las opciones avanzadas pulsando sobre los tres puntos.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 08 Crear Textos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/vtsFJvyxNOM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 09 Crear Estilos<\/strong><\/p>\n\n\n\n<p>Crear estilo de texto. Utilizar un estilo creado sobre un nuevo texto. Desvincular un texto de su estilo<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 09 Crear Estilos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/lVlEfMkgGNk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 10 Colores<\/strong><\/p>\n\n\n\n<p>Poner un color a un elemento, revisi\u00f3n de las diferentes codificaciones de color. Degradados lineales, radiales, angular o diamante. Cambios en el borde del elemento (s\u00f3lidos o con degradados)<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 10 Colores\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Qm9FhL77jeg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 11 Estilos de relleno<\/strong><\/p>\n\n\n\n<p>Almacenar colores como estilos para poder reutilizarse. Crearlos en una estructura con una \/ entre el tipo y el nombre (Degradados\/B\u00e1sico). Crear dos fondos a un mismo elemento.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 11 Estilos de relleno\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/6fJHdRWbDGM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 12 Efectos<\/strong><\/p>\n\n\n\n<p>Poner sombra externa, interna, blur, y combinaci\u00f3n de efectos. A\u00f1adir los efectos a un estilo para reutilizarlo. Poder ver todos los estilos guardados y poder reorganizarlos.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 12 Efectos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/uivlhWktypA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 13 Imagen<\/strong><\/p>\n\n\n\n<p>Colocar una imagen desde disco en nuestro dise\u00f1o, de una en una o varias a la vez. Poner Gif animados. Poner im\u00e1genes desde unsplash fuera y dentro de una figura<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 13 Imagen\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/DNnx7jgJQ_M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 14 Mascaras<\/strong><\/p>\n\n\n\n<p>Poner esquinas curvas a la imagen, cambiar brillo, contraste\u2026 a la imagen. Utilizar la herramienta de corte. Realizar cortes a trav\u00e9s del bot\u00f3n \u201cuse a mask\u201d<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 14 Mascaras\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/p6gKQDXOH0w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>Figma 15 Grid<\/strong><\/p>\n\n\n\n<p>Colocar una rejilla, poner un grid horizontal o vertical y cambio de par\u00e1metros (calle, margen, cantidad de columnas\u2026). Almacenar un grid en un estilo.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 15 Grid\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/SyUhdRa6TI4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 16 Plugins iconos<\/strong><\/p>\n\n\n\n<p>Utilizar Brandfetch para seleccionar elementos de marca de empresas conocidas. Feather Icons posee una amplia colecci\u00f3n de iconos<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 16 Plugins iconos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/5GsaUdTTRKA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 17 Componentes<\/strong><\/p>\n\n\n\n<p>Creaci\u00f3n de componentes para reutilizarlos en diferentes sitios. Modificar el componente patr\u00f3n y se modifican todas las copias. Modificar un hijo y solo le afecta a \u00e9l. Desvincular un hijo del componente origen<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 17 Componentes\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/4Ll8XFcSInI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><strong>FIGMA 18 Interacciones<\/strong><\/p>\n\n\n\n<p>Crear interacciones entre diferentes pantallas. Utilizar diferentes efectos para su visualizaci\u00f3n. Utilizar la interacci\u00f3n de volver a atr\u00e1s.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"FIGMA 18 Interacciones\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/MsOIUsricsw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vinculo 18 videos con una duraci\u00f3n de casi 2 horas (115 minutos) en donde se ven todos los conceptos b\u00e1sicos de Figma, &hellip; <\/p>\n","protected":false},"author":1,"featured_media":438,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[119,145,263],"class_list":["post-437","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-figma-y-axure","tag-diseno","tag-figma","tag-plugins-figma"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/437\/revisions"}],"predecessor-version":[{"id":930,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/437\/revisions\/930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/438"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}