{"id":2342,"date":"2023-05-24T10:48:00","date_gmt":"2023-05-24T10:48:00","guid":{"rendered":"https:\/\/www.gammaux.com\/blog\/por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-figma\/"},"modified":"2023-06-29T09:47:27","modified_gmt":"2023-06-29T09:47:27","slug":"why-and-how-to-use-the-new-look-properties-for-components-in-figma","status":"publish","type":"post","link":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/","title":{"rendered":"Why and how to use the new-look properties for components in Figma"},"content":{"rendered":"\n<p>At the end of 2022, Figma released an important update that changed the way its components are used.<\/p>\n\n\n\n<p>This new way of working with components has two main advantages:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>It considerably reduces the number of variants needed for your design system.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>It improves usability for you or for designers who are going to use your components.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Four new properties<\/h2>\n\n\n\n<p>There are four types of properties that you can apply to your Figma components:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em>Variant <\/em><\/strong>is used to create the variants we already know from previous versions of Figma. It saves style changes such as colours, borders, backgrounds or sizes between the different variants as well as to create active or inactive states.<\/li><li><strong><em>Boolean<\/em><\/strong> is used to make a layer of your component visible or not, so that an icon can be hidden or shown.&nbsp;<\/li><li><strong><em>Instance swap<\/em><\/strong> is used to show that the content of that element can be swapped. You can define the default value and exchange it for elements from your libraries.<\/li><li><strong><em>Text<\/em><\/strong> is used to indicate which text layers are to be edited, like the editable text of a button or input.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen1.png\" alt=\"\" class=\"wp-image-2288\" width=\"222\" height=\"151\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to apply properties step-by-step<\/h2>\n\n\n\n<p>There are two ways to use these properties in components. You can create them from the component and assign them to the elements it contains, or go directly to the element and create the available property based on whatever type it is.<\/p>\n\n\n\n<p>Component elements are any unit that can be assigned a property, such as a text or icon.<\/p>\n\n\n\n<p>In the following example we can see the second way mentioned above, which is the process with fewer steps. As we can see, with two variants and the properties defined in the menu on the right, you can have up to six applications. Here there are six because that is what the <em>design system<\/em> of the application requires, but it will depend on the limitations you want the component to have.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"457\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen2-1024x457.png\" alt=\"\" class=\"wp-image-2290\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen2-1024x457.png 1024w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen2-300x134.png 300w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen2-768x342.png 768w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen2-1536x685.png 1536w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen2.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Create the base component<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Start by creating the base component with the elements that you are going to use in its variations, even if some of them are hidden by default. To start working with properties, think about which elements you want to vary and which you don&#8217;t.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Apply the properties to the component elementsmentos del componente<\/strong>&nbsp;<\/h3>\n\n\n\n<p>When you select the element you want to apply a property to, the symbol marked below will appear in the <em>Design<\/em> menu in the different sections where you can apply properties. Note that multiple properties can be applied to an element. For example, a text can have a different message and be hidden or not.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen3-411x1024.png\" alt=\"\" class=\"wp-image-2292\" width=\"248\" height=\"618\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen3-411x1024.png 411w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen3-120x300.png 120w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen3.png 433w\" sizes=\"(max-width: 248px) 100vw, 248px\" \/><\/figure><\/div>\n\n\n\n<p>Here, when selecting an icon, the CTA will pop up allowing you to add a property related to that section. For example, in the section where you select which icon goes on that layer, you can add the <em>Instance swap<\/em> property, which, as mentioned, allows you to change the icon to one from the selected library. In the <em>Layer <\/em>section, where you set the transparency and visibility of the layer, you can create a <em>Boolean<\/em> property. This same thing will happen with each element of the component in question.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Check the created properties<\/strong><\/h3>\n\n\n\n<p>Finally, select the component and make a copy to see how it will look for the designers when they use it. Using the menu on the right (the component properties), check that all the variations generate the changes you expect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tips for creating properties<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>It\u2019s better to leave the variants until last<\/strong>. First, create all the properties and then create the variants with these properties.<\/li><li>It is <strong>very important<\/strong> that when you use icons, to make sure they have the same layer structure and the same name. If they are different, Figma will sometimes not carry over the style of the parent component. In the following example using the <em>Swipe instance<\/em> property, you can see that, when changing the arrow icon to the plus icon, Figma does not use the white of the main component, but takes the colour of the original icon.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen4-1024x335.png\" alt=\"\" class=\"wp-image-2294\" width=\"683\" height=\"223\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen4-1024x335.png 1024w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen4-300x98.png 300w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen4-768x251.png 768w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen4-1536x502.png 1536w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen4.png 1872w\" sizes=\"(max-width: 683px) 100vw, 683px\" \/><\/figure><\/div>\n\n\n\n<p>Following the same steps, but changing the name of the layers, the plus icon instantly appears with the characteristics of the main component.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen5-1024x374.png\" alt=\"\" class=\"wp-image-2296\" width=\"658\" height=\"239\" srcset=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen5-1024x374.png 1024w, https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Imagen5-300x110.png 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure><\/div>\n\n\n\n<p>Though it requires a new way of thinking about defining components and using the new properties, once understood, they are very easy to use. <strong>With properties, designers will more clearly know which component elements they can edit.<\/strong><\/p>\n\n\n\n<p>AIt also helps to structure elements and their variants. It completes your <em>design system<\/em> with good documentation to make it easier to use as it grows.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At the end of 2022, Figma released an important update that changed the way its components are used. This new way of working with components has two main advantages: It considerably reduces the number of variants needed for your design system. It improves usability for you or for designers who are going to use your [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":2298,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[32],"class_list":["post-2342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-usability"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Why and how to use the new-look properties for components in Figma - GammaUX<\/title>\n<meta name=\"description\" content=\"At the end of 2022, Figma released an important update that changed the way its components are used. This new way of working with components has two main\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why and how to use the new-look properties for components in Figma - GammaUX\" \/>\n<meta property=\"og:description\" content=\"At the end of 2022, Figma released an important update that changed the way its components are used. This new way of working with components has two main\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"GammaUX\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-24T10:48:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-29T09:47:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cristina Monllau Castell\u00e0\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@GammaUX\" \/>\n<meta name=\"twitter:site\" content=\"@GammaUX\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cristina Monllau Castell\u00e0\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/\"},\"author\":{\"name\":\"Cristina Monllau Castell\u00e0\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/b4b309b11faf190ef21d54ebfd76edcf\"},\"headline\":\"Why and how to use the new-look properties for components in Figma\",\"datePublished\":\"2023-05-24T10:48:00+00:00\",\"dateModified\":\"2023-06-29T09:47:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/\"},\"wordCount\":768,\"publisher\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg\",\"keywords\":[\"Usability\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/\",\"url\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/\",\"name\":\"Why and how to use the new-look properties for components in Figma - GammaUX\",\"isPartOf\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg\",\"datePublished\":\"2023-05-24T10:48:00+00:00\",\"dateModified\":\"2023-06-29T09:47:27+00:00\",\"description\":\"At the end of 2022, Figma released an important update that changed the way its components are used. This new way of working with components has two main\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage\",\"url\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg\",\"contentUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg\",\"width\":800,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gammaux.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why and how to use the new-look properties for components in Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#website\",\"url\":\"https:\/\/www.gammaux.com\/en\/\",\"name\":\"GammaUX\",\"description\":\"UX\/UI Consulting and Digital Innovation\",\"publisher\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gammaux.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#organization\",\"name\":\"GammaUX\",\"url\":\"https:\/\/www.gammaux.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg\",\"contentUrl\":\"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg\",\"width\":147,\"height\":18,\"caption\":\"GammaUX\"},\"image\":{\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/GammaUX\",\"https:\/\/www.linkedin.com\/company\/gammaux\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/b4b309b11faf190ef21d54ebfd76edcf\",\"name\":\"Cristina Monllau Castell\u00e0\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3e3cb9b21aa57cfaa5f5c0dcbb5b7a3777836cf08094cc9bef16e42000f113cc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3e3cb9b21aa57cfaa5f5c0dcbb5b7a3777836cf08094cc9bef16e42000f113cc?s=96&d=mm&r=g\",\"caption\":\"Cristina Monllau Castell\u00e0\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why and how to use the new-look properties for components in Figma - GammaUX","description":"At the end of 2022, Figma released an important update that changed the way its components are used. This new way of working with components has two main","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:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/","og_locale":"en_US","og_type":"article","og_title":"Why and how to use the new-look properties for components in Figma - GammaUX","og_description":"At the end of 2022, Figma released an important update that changed the way its components are used. This new way of working with components has two main","og_url":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/","og_site_name":"GammaUX","article_published_time":"2023-05-24T10:48:00+00:00","article_modified_time":"2023-06-29T09:47:27+00:00","og_image":[{"width":800,"height":400,"url":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg","type":"image\/jpeg"}],"author":"Cristina Monllau Castell\u00e0","twitter_card":"summary_large_image","twitter_creator":"@GammaUX","twitter_site":"@GammaUX","twitter_misc":{"Written by":"Cristina Monllau Castell\u00e0","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#article","isPartOf":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/"},"author":{"name":"Cristina Monllau Castell\u00e0","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/b4b309b11faf190ef21d54ebfd76edcf"},"headline":"Why and how to use the new-look properties for components in Figma","datePublished":"2023-05-24T10:48:00+00:00","dateModified":"2023-06-29T09:47:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/"},"wordCount":768,"publisher":{"@id":"https:\/\/www.gammaux.com\/en\/#organization"},"image":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg","keywords":["Usability"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/","url":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/","name":"Why and how to use the new-look properties for components in Figma - GammaUX","isPartOf":{"@id":"https:\/\/www.gammaux.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage"},"image":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg","datePublished":"2023-05-24T10:48:00+00:00","dateModified":"2023-06-29T09:47:27+00:00","description":"At the end of 2022, Figma released an important update that changed the way its components are used. This new way of working with components has two main","breadcrumb":{"@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#primaryimage","url":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg","contentUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2023\/05\/Por-que-y-como-usar-las-nuevas-propiedades-de-los-componentes-de-Figma-.jpg","width":800,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.gammaux.com\/en\/blog\/why-and-how-to-use-the-new-look-properties-for-components-in-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gammaux.com\/en\/"},{"@type":"ListItem","position":2,"name":"Why and how to use the new-look properties for components in Figma"}]},{"@type":"WebSite","@id":"https:\/\/www.gammaux.com\/en\/#website","url":"https:\/\/www.gammaux.com\/en\/","name":"GammaUX","description":"UX\/UI Consulting and Digital Innovation","publisher":{"@id":"https:\/\/www.gammaux.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gammaux.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.gammaux.com\/en\/#organization","name":"GammaUX","url":"https:\/\/www.gammaux.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg","contentUrl":"https:\/\/www.gammaux.com\/wp-content\/uploads\/2021\/06\/gammaux-black.svg","width":147,"height":18,"caption":"GammaUX"},"image":{"@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/GammaUX","https:\/\/www.linkedin.com\/company\/gammaux"]},{"@type":"Person","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/b4b309b11faf190ef21d54ebfd76edcf","name":"Cristina Monllau Castell\u00e0","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gammaux.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3e3cb9b21aa57cfaa5f5c0dcbb5b7a3777836cf08094cc9bef16e42000f113cc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3e3cb9b21aa57cfaa5f5c0dcbb5b7a3777836cf08094cc9bef16e42000f113cc?s=96&d=mm&r=g","caption":"Cristina Monllau Castell\u00e0"}}]}},"_links":{"self":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts\/2342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/comments?post=2342"}],"version-history":[{"count":5,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts\/2342\/revisions"}],"predecessor-version":[{"id":2385,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/posts\/2342\/revisions\/2385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/media\/2298"}],"wp:attachment":[{"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/media?parent=2342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/categories?post=2342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gammaux.com\/en\/wp-json\/wp\/v2\/tags?post=2342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}