{"id":7426,"date":"2026-11-07T09:54:36","date_gmt":"2026-11-07T09:54:36","guid":{"rendered":"https:\/\/www.originux.com\/resources\/?p=7426"},"modified":"2026-11-07T09:54:39","modified_gmt":"2026-11-07T09:54:39","slug":"figma-components-and-variants-a-practical-guide","status":"publish","type":"post","link":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/","title":{"rendered":"Figma Components and Variants: A Practical Guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#What_Are_Figma_Components\" >What Are Figma Components?<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Main_components_and_instances\" >Main components and instances<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Why_components_matter\" >Why components matter<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#What_Are_Figma_Variants\" >What Are Figma Variants?<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Common_variant_properties\" >Common variant properties<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Components_vs_Variants_vs_Component_Properties\" >Components vs Variants vs Component Properties<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Types_of_component_properties\" >Types of component properties<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#How_to_Build_a_Strong_Component_Step_by_Step\" >How to Build a Strong Component Step by Step<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Step_1_Design_with_Auto_Layout_first\" >Step 1: Design with Auto Layout first<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Step_2_Create_the_main_component\" >Step 2: Create the main component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Step_3_Add_variants\" >Step 3: Add variants<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Step_4_Add_component_properties\" >Step 4: Add component properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Step_5_Connect_to_variables_and_styles\" >Step 5: Connect to variables and styles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Step_6_Document_usage\" >Step 6: Document usage<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Naming_Conventions_That_Scale\" >Naming Conventions That Scale<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Naming_tips\" >Naming tips<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Nesting_Components_for_Flexibility\" >Nesting Components for Flexibility<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Best_practices_for_nesting\" >Best practices for nesting<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Building_a_Component_Library_and_Design_System\" >Building a Component Library and Design System<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Library_organization_tips\" >Library organization tips<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Common_Mistakes_with_Figma_Components_and_Variants\" >Common Mistakes with Figma Components and Variants<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Best_Practices_Summary\" >Best Practices Summary<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Components_and_Variants_in_Real_Projects\" >Components and Variants in Real Projects<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Example_a_button_component\" >Example: a button component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Example_a_card_component\" >Example: a card component<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#How_Components_Support_Better_UX\" >How Components Support Better UX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Getting_Started\" >Getting Started<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Component_and_Variant_Checklist\" >Component and Variant Checklist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#FAQs\" >FAQs<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#What_is_the_difference_between_a_component_and_a_variant_in_Figma\" >What is the difference between a component and a variant in Figma?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#When_should_I_use_variants_instead_of_separate_components\" >When should I use variants instead of separate components?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#What_are_component_properties_in_Figma\" >What are component properties in Figma?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#How_many_variants_are_too_many\" >How many variants are too many?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">A designer opens a file and finds forty buttons. Some are rounded, some are square, three shades of blue appear, and half have slightly different padding. A small brand update means editing each one by hand, and a few always get missed. Meanwhile, another team ships the same update in minutes because their buttons are a single component with variants.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Components and variants are the foundation of scalable design work in Figma. They keep interfaces consistent, speed up production and make design systems manageable. This guide explains how they work, how to structure them well, common mistakes to avoid and a checklist for your own files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Are_Figma_Components\"><\/span><strong>What Are Figma Components?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A component is a reusable design element, such as a button, card, input field or navigation bar. You create it once as a main component, then use copies called instances throughout your designs.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Main_components_and_instances\"><\/span><strong>Main components and instances<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Main component:<\/strong> the source of truth, where you make global changes.<\/li>\n\n\n\n<li><strong>Instances:<\/strong> linked copies that update automatically when the main component changes.<\/li>\n\n\n\n<li><strong>Overrides:<\/strong> local changes on an instance, such as different text or an icon, that do not alter the main component.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This relationship is what makes updates fast. Change the main component once, and every instance follows, while still allowing sensible local customization.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_components_matter\"><\/span><strong>Why components matter<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consistency:<\/strong> the same element looks and behaves the same everywhere.<\/li>\n\n\n\n<li><strong>Speed:<\/strong> designers reuse instead of redrawing.<\/li>\n\n\n\n<li><strong>Easier maintenance:<\/strong> one edit updates the whole project.<\/li>\n\n\n\n<li><strong>Better handoff:<\/strong> developers see clear, repeatable patterns.<\/li>\n\n\n\n<li><strong>Stronger collaboration:<\/strong> teams share a common library.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Are_Figma_Variants\"><\/span><strong>What Are Figma Variants?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Variants let you group related versions of a component into one component set. Instead of keeping separate buttons for primary, secondary, disabled and hover, you hold them in a single organized set and switch between them with simple controls.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_variant_properties\"><\/span><strong>Common variant properties<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Property<\/th><th>Example values<\/th><th>Used for<\/th><\/tr><\/thead><tbody><tr><td>Type<\/td><td>Primary, Secondary, Ghost<\/td><td>Visual style of a button<\/td><\/tr><tr><td>Size<\/td><td>Small, Medium, Large<\/td><td>Different scales<\/td><\/tr><tr><td>State<\/td><td>Default, Hover, Pressed, Disabled, Focus<\/td><td>Interaction states<\/td><\/tr><tr><td>Theme<\/td><td>Light, Dark<\/td><td>Color modes<\/td><\/tr><tr><td>Platform<\/td><td>Web, iOS, Android<\/td><td>Platform-specific versions<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Variants keep libraries tidy and let designers pick the right version from the properties panel rather than hunting through a long asset list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Components_vs_Variants_vs_Component_Properties\"><\/span><strong>Components vs Variants vs Component Properties<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These three features work together, but they solve different problems.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>What it does<\/th><th>Best for<\/th><th>Example<\/th><\/tr><\/thead><tbody><tr><td>Component<\/td><td>Creates a reusable element<\/td><td>Any repeated element<\/td><td>A card layout<\/td><\/tr><tr><td>Variant<\/td><td>Stores structural or visual versions in one set<\/td><td>States, sizes and styles<\/td><td>Button: primary, secondary, disabled<\/td><\/tr><tr><td>Component property<\/td><td>Exposes controls for specific parts<\/td><td>Text, toggles and swappable parts<\/td><td>A boolean to show or hide an icon<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Types_of_component_properties\"><\/span><strong>Types of component properties<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Variant properties:<\/strong> switch between predefined versions.<\/li>\n\n\n\n<li><strong>Boolean properties:<\/strong> show or hide a layer, such as an icon or helper text.<\/li>\n\n\n\n<li><strong>Text properties:<\/strong> edit text content from the properties panel.<\/li>\n\n\n\n<li><strong>Instance swap properties:<\/strong> replace a nested component, such as swapping one icon for another.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Using properties wisely means fewer variants. Instead of building separate \u201cwith icon\u201d and \u201cwithout icon\u201d versions of every button, add a boolean property and keep a single set.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Build_a_Strong_Component_Step_by_Step\"><\/span><strong>How to Build a Strong Component Step by Step<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Design_with_Auto_Layout_first\"><\/span><strong>Step 1: Design with Auto Layout first<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Auto Layout makes components flexible. Padding, spacing and alignment adjust automatically when text grows or elements are hidden. Build your component with Auto Layout before you convert it, so it resizes sensibly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Create_the_main_component\"><\/span><strong>Step 2: Create the main component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Select the design and create a component. Give it a clear name and place it in an organized area of your library file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Add_variants\"><\/span><strong>Step 3: Add variants<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add variants for each state or style, and name properties and values clearly. Keep the property set small and meaningful, so people can understand the options at a glance.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Add_component_properties\"><\/span><strong>Step 4: Add component properties<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Expose booleans, text and instance swaps for the parts that change often. This keeps overrides clean and reduces the number of variants required.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Connect_to_variables_and_styles\"><\/span><strong>Step 5: Connect to variables and styles<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Link colors, spacing, radius and typography to variables or styles rather than raw values. When tokens change, the whole component library updates, and light and dark modes become much easier to manage.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_6_Document_usage\"><\/span><strong>Step 6: Document usage<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add short descriptions, usage notes and do\u2019s and don\u2019ts. Good documentation saves questions and prevents misuse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Naming_Conventions_That_Scale\"><\/span><strong>Naming Conventions That Scale<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Clear naming makes libraries searchable and predictable. Figma uses slashes in component names to create grouped categories in the assets panel.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Weak naming<\/th><th>Stronger naming<\/th><\/tr><\/thead><tbody><tr><td>Button 2 final<\/td><td>Button \/ Primary<\/td><\/tr><tr><td>Card new<\/td><td>Card \/ Product \/ Default<\/td><\/tr><tr><td>Icon blue<\/td><td>Icon \/ Arrow \/ Right<\/td><\/tr><tr><td>Input v3<\/td><td>Input \/ Text \/ Default<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Naming_tips\"><\/span><strong>Naming tips<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use consistent hierarchy:<\/strong> category, component, then variation.<\/li>\n\n\n\n<li><strong>Keep property names short and clear:<\/strong> for example Size, State and Type.<\/li>\n\n\n\n<li><strong>Use plain values:<\/strong> Small, Medium and Large are easier than S1, S2 and S3.<\/li>\n\n\n\n<li><strong>Match code names where possible:<\/strong> this helps designers and developers speak the same language.<\/li>\n\n\n\n<li><strong>Avoid version words:<\/strong> names like \u201cfinal\u201d or \u201cnew\u201d create confusion.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nesting_Components_for_Flexibility\"><\/span><strong>Nesting Components for Flexibility<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nesting means placing components inside other components. A card might include a button, an avatar and an icon. Nested components stay linked to their sources, so a button update flows into every card that contains it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Best_practices_for_nesting\"><\/span><strong>Best practices for nesting<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Build small first:<\/strong> create atoms such as icons and buttons before molecules such as cards.<\/li>\n\n\n\n<li><strong>Use instance swap properties:<\/strong> let users replace nested elements without detaching.<\/li>\n\n\n\n<li><strong>Avoid deep nesting:<\/strong> too many layers make debugging harder.<\/li>\n\n\n\n<li><strong>Keep overrides intentional:<\/strong> if you override the same thing repeatedly, add a property instead.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Building_a_Component_Library_and_Design_System\"><\/span><strong>Building a Component Library and Design System<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Components become much more powerful when shared as a library. A good library includes foundations such as color, typography and spacing, core components such as buttons and inputs, and patterns such as forms and navigation.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Library_organization_tips\"><\/span><strong>Library organization tips<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Separate foundations, components and patterns<\/strong> into clear sections or files.<\/li>\n\n\n\n<li><strong>Publish updates deliberately,<\/strong> with change notes so teams know what changed.<\/li>\n\n\n\n<li><strong>Assign owners<\/strong> so the library stays maintained.<\/li>\n\n\n\n<li><strong>Collect feedback<\/strong> from designers and developers using it.<\/li>\n\n\n\n<li><strong>Align with code,<\/strong> so the design system and the front-end library stay in sync.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Design systems work best when they reflect real user needs and team workflows. A collaborative session such as a <strong><a href=\"https:\/\/www.originux.com\/design-thinking-workshops\">design thinking workshop<\/a><\/strong> can help align designers, developers and stakeholders on what the system should solve.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Mistakes_with_Figma_Components_and_Variants\"><\/span><strong>Common Mistakes with Figma Components and Variants<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Mistake<\/th><th>Why it hurts<\/th><th>Better approach<\/th><\/tr><\/thead><tbody><tr><td>Creating separate components for every state<\/td><td>Cluttered libraries and slow updates<\/td><td>Group states as variants<\/td><\/tr><tr><td>Too many variant properties<\/td><td>Confusing choices and heavy files<\/td><td>Use booleans and text properties where possible<\/td><\/tr><tr><td>Skipping Auto Layout<\/td><td>Components break when content changes<\/td><td>Build with Auto Layout from the start<\/td><\/tr><tr><td>Detaching instances routinely<\/td><td>Breaks the link to the source<\/td><td>Add properties or request updates to the component<\/td><\/tr><tr><td>Using hard-coded colors and sizes<\/td><td>Updates require manual edits<\/td><td>Use variables and styles<\/td><\/tr><tr><td>Inconsistent naming<\/td><td>Hard to search and maintain<\/td><td>Adopt a clear naming convention<\/td><\/tr><tr><td>No documentation<\/td><td>Misuse and repeated questions<\/td><td>Add descriptions and usage guidance<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Best_Practices_Summary\"><\/span><strong>Best Practices Summary<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Start small:<\/strong> build foundational components first.<\/li>\n\n\n\n<li><strong>Use Auto Layout:<\/strong> make components responsive to content.<\/li>\n\n\n\n<li><strong>Prefer properties to extra variants:<\/strong> keep the set manageable.<\/li>\n\n\n\n<li><strong>Link to variables:<\/strong> make theming and rebranding easier.<\/li>\n\n\n\n<li><strong>Name clearly:<\/strong> use consistent hierarchy and simple values.<\/li>\n\n\n\n<li><strong>Test components in real screens:<\/strong> check how they behave with long text, missing content and different sizes.<\/li>\n\n\n\n<li><strong>Check accessibility:<\/strong> review contrast, focus states and touch target sizes within the component itself.<\/li>\n\n\n\n<li><strong>Maintain actively:<\/strong> audit unused or duplicate components regularly.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Regular reviews help keep a library healthy, and a structured <strong><a href=\"https:\/\/www.originux.com\/services\/ux-audit\">UX audit<\/a><\/strong> can reveal inconsistencies and usability gaps across your interface before they multiply.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Components_and_Variants_in_Real_Projects\"><\/span><strong>Components and Variants in Real Projects<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_a_button_component\"><\/span><strong>Example: a button component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A well-built button might include variants for type (primary, secondary, ghost), size (small, medium, large) and state (default, hover, pressed, disabled, focus). It could also include a boolean property for a leading icon, a boolean for a trailing icon, a text property for the label and an instance swap for the icon itself. This single component covers dozens of combinations without dozens of separate assets.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_a_card_component\"><\/span><strong>Example: a card component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A product card might nest an image, a title, price text, a rating and a button. Boolean properties show or hide the rating and badge, while the nested button inherits updates from the button component. Layout variants can switch between vertical and horizontal orientations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Components_Support_Better_UX\"><\/span><strong>How Components Support Better UX<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Consistency is a usability feature. When buttons, forms and navigation behave the same across a product, users learn faster and make fewer mistakes. Components help teams deliver that consistency at scale, but they must be grounded in real user needs. Insights from <strong><a href=\"https:\/\/www.originux.com\/services\/ux-research\">UX research<\/a><\/strong> help decide which patterns belong in your system and how they should behave.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Getting_Started\"><\/span><strong>Getting Started<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You do not need to convert an entire file at once. Start with the elements used most often, such as buttons, inputs and cards, then expand to patterns and layouts. Measure the time saved and the drop in inconsistencies, and keep improving. If you want expert help building scalable, research-led design systems, a specialist team offering <strong><a href=\"https:\/\/www.originux.com\/services\/ui-ux-design-services\">UI\/UX design services<\/a><\/strong> can help you move faster with less risk.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Component_and_Variant_Checklist\"><\/span><strong>Component and Variant Checklist<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Is each repeated element a component?<\/li>\n\n\n\n<li>Are states, sizes and styles grouped as variants?<\/li>\n\n\n\n<li>Are booleans, text and instance swaps used to reduce variant sprawl?<\/li>\n\n\n\n<li>Is Auto Layout applied so components adapt to content?<\/li>\n\n\n\n<li>Are colors, spacing and typography linked to variables or styles?<\/li>\n\n\n\n<li>Do names follow a clear, consistent hierarchy?<\/li>\n\n\n\n<li>Are usage notes documented?<\/li>\n\n\n\n<li>Have components been tested with realistic content and accessibility checks?<\/li>\n\n\n\n<li>Is there an owner and a review routine for the library?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span><strong>Final Thoughts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Figma components and variants turn scattered design assets into a system that scales. Build small, use properties and Auto Layout wisely, name things clearly and connect everything to variables. Keep the library maintained and grounded in real user needs. Do this well, and your team will spend less time redrawing and more time solving problems that matter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQs\"><\/span><strong>FAQs<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_the_difference_between_a_component_and_a_variant_in_Figma\"><\/span><strong>What is the difference between a component and a variant in Figma?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A component is a reusable design element. Variants are different versions of that component, such as states or sizes, grouped into one component set.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_should_I_use_variants_instead_of_separate_components\"><\/span><strong>When should I use variants instead of separate components?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Use variants when the versions share the same structure and purpose, such as button states or sizes. Create separate components when the elements serve different purposes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_are_component_properties_in_Figma\"><\/span><strong>What are component properties in Figma?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">They are controls that let you change parts of a component from the properties panel. The main types are variant, boolean, text and instance swap properties.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_many_variants_are_too_many\"><\/span><strong>How many variants are too many?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If the number of combinations becomes hard to manage, simplify by using boolean, text and instance swap properties instead of creating a variant for every possible option.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A designer opens a file and finds forty buttons. Some are rounded, some are square, three shades of blue appear, and half have slightly different padding. A small brand update means editing each one by hand, and a few always get missed. Meanwhile, another team ships the same update in minutes because their buttons are&hellip; <a class=\"more-link\" href=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\">Continue reading <span class=\"screen-reader-text\">Figma Components and Variants: A Practical Guide<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7426","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Figma Components and Variants: A Practical Guide<\/title>\n<meta name=\"description\" content=\"Learn how Figma components and variants work, from main components and properties to naming, nesting and design system best practices, with examples and a checklist.\" \/>\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.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Figma Components and Variants: A Practical Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how Figma components and variants work, from main components and properties to naming, nesting and design system best practices, with examples and a checklist.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"OriginUX Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-07T09:54:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-07T09:54:39+00:00\" \/>\n<meta name=\"author\" content=\"master.origin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master.origin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\"},\"author\":{\"name\":\"master.origin\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\"},\"headline\":\"Figma Components and Variants: A Practical Guide\",\"datePublished\":\"2026-11-07T09:54:36+00:00\",\"dateModified\":\"2026-11-07T09:54:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\"},\"wordCount\":1784,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\",\"url\":\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\",\"name\":\"Figma Components and Variants: A Practical Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#website\"},\"datePublished\":\"2026-11-07T09:54:36+00:00\",\"dateModified\":\"2026-11-07T09:54:39+00:00\",\"description\":\"Learn how Figma components and variants work, from main components and properties to naming, nesting and design system best practices, with examples and a checklist.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.originux.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Figma Components and Variants: A Practical Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.originux.com\/resources\/#website\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"name\":\"OriginUX Studio\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.originux.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\",\"name\":\"OriginUX Studio\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"contentUrl\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"width\":120,\"height\":120,\"caption\":\"OriginUX Studio\"},\"image\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\",\"name\":\"master.origin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"caption\":\"master.origin\"},\"sameAs\":[\"https:\/\/www.originux.com\"],\"url\":\"https:\/\/www.originux.com\/resources\/author\/master-origin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Figma Components and Variants: A Practical Guide","description":"Learn how Figma components and variants work, from main components and properties to naming, nesting and design system best practices, with examples and a checklist.","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.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/","og_locale":"en_US","og_type":"article","og_title":"Figma Components and Variants: A Practical Guide","og_description":"Learn how Figma components and variants work, from main components and properties to naming, nesting and design system best practices, with examples and a checklist.","og_url":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/","og_site_name":"OriginUX Studio","article_published_time":"2026-11-07T09:54:36+00:00","article_modified_time":"2026-11-07T09:54:39+00:00","author":"master.origin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master.origin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#article","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/"},"author":{"name":"master.origin","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c"},"headline":"Figma Components and Variants: A Practical Guide","datePublished":"2026-11-07T09:54:36+00:00","dateModified":"2026-11-07T09:54:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/"},"wordCount":1784,"commentCount":0,"publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/","url":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/","name":"Figma Components and Variants: A Practical Guide","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/#website"},"datePublished":"2026-11-07T09:54:36+00:00","dateModified":"2026-11-07T09:54:39+00:00","description":"Learn how Figma components and variants work, from main components and properties to naming, nesting and design system best practices, with examples and a checklist.","breadcrumb":{"@id":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.originux.com\/resources\/blog\/figma-components-and-variants-a-practical-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.originux.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Figma Components and Variants: A Practical Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.originux.com\/resources\/#website","url":"https:\/\/www.originux.com\/resources\/","name":"OriginUX Studio","description":"","publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.originux.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.originux.com\/resources\/#organization","name":"OriginUX Studio","url":"https:\/\/www.originux.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","contentUrl":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","width":120,"height":120,"caption":"OriginUX Studio"},"image":{"@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c","name":"master.origin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","caption":"master.origin"},"sameAs":["https:\/\/www.originux.com"],"url":"https:\/\/www.originux.com\/resources\/author\/master-origin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/comments?post=7426"}],"version-history":[{"count":1,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7426\/revisions"}],"predecessor-version":[{"id":7427,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/7426\/revisions\/7427"}],"wp:attachment":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/media?parent=7426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/categories?post=7426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/tags?post=7426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}