{"id":4754,"date":"2021-03-24T20:39:24","date_gmt":"2021-03-24T20:39:24","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=4754"},"modified":"2021-03-24T20:39:28","modified_gmt":"2021-03-24T20:39:28","slug":"how-to-create-a-figma-breadcrumb-component-stepper","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/how-to-create-a-figma-breadcrumb-component-stepper\/","title":{"rendered":"How to Create a Figma Breadcrumb Component (Stepper)"},"content":{"rendered":"\n<p class=\"has-pale-cyan-blue-color has-text-color\"><strong>Here&#8217;s how you can create a Figma Breadcrumb Component (Stepper)<\/strong> <strong>using nestled components, auto-layout, and constraints &amp; resizing.<\/strong><\/p>\n\n\n\n<p>It&#8217;s not always that easy to create responsive and dynamic components in Figma that adjust well to being re-sized. The breadcrumb or stepper elements can one of those difficult components to create. Especially if you want to create a breadcrumb with lines and arrows that grow with the size of the container.<\/p>\n\n\n\n<p>When creating components in Figma (for example to be used in a Design System), one must think like a front-end developer. And that means thinking strategically before building the component.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screen-Recording-2021-03-24-at-20.54.42.mov\"><\/video><figcaption>The finished responsive Figma component breadcrumb<\/figcaption><\/figure>\n\n\n\n<p class=\"has-pale-cyan-blue-color has-text-color\"><strong> I usually ask myself these following questions before creating a component:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>What parts does this component consist of? <\/li><li>Are there any sub-parts in the components that should be dynamic and changeable? Color palettes, changeable text, shapes, etc.<\/li><li>Does this component need to be responsive? Should it be stretchable and squeezable?<\/li><\/ul>\n\n\n\n<p>In the case of creating a Figma component of a UI breadcrumb or stepper, the answer is yes to all of the questions.<\/p>\n\n\n\n<p><strong>See also: <a href=\"https:\/\/www.wendyzhou.se\/blog\/7-best-figma-plugins-2021-design-systems-developers\/\">7 Best Figma Plugins (2021) Design Systems &amp; Developers<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tutorial &amp; Explanation<\/h2>\n\n\n\n<p>To give you a visual overview first, here&#8217;s the breadcrumb stepper component built-in Figma for a Design System. I made them for both dark and light mode themes, which is why they are double. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"854\" height=\"648\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-14.57.35.png\" alt=\"How to Create a Figma Component Breadcrumb (Stepper)\" class=\"wp-image-4755\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-14.57.35.png 854w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-14.57.35-300x228.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-14.57.35-768x583.png 768w\" sizes=\"auto, (max-width: 854px) 100vw, 854px\" \/><figcaption>Figma component stepper<\/figcaption><\/figure><\/div>\n\n\n\n<p>My vision was to create a component that is reusable, responsive, and dynamic. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step-by-Step<\/strong> Guide<\/h3>\n\n\n\n<h4 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\">1. Create a component<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Create a component<\/strong> (Named e.g. &#8220;Breadcrumb Stepper&#8221;)<\/li><\/ul>\n\n\n\n<h4 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\">2. Create two properties in the component<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Create two properties in the component <\/strong>(Name e.g. &#8220;Step&#8221; and &#8220;Component&#8221;)<ul><li>You can create properties by clicking on the &#8220;&#8230;&#8221; on the right sidebar, to the right of <em>Variants<\/em> (see Image below)<\/li><\/ul><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"651\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.05.05.png\" alt=\"\" class=\"wp-image-4758\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.05.05.png 368w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.05.05-170x300.png 170w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure><\/div>\n\n\n\n<h4 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\">3. Create the &#8220;Step&#8221; components<\/h4>\n\n\n\n<p><strong>Create the components that are going to be nestled into the breadcrumbs\/stepper<\/strong>.<\/p>\n\n\n\n<p>In the image below are four examples of such components. The components can of course be edited later (changing the number from 1, to a 2, 3, 4 etc, as well as changing the text).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"431\" height=\"484\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.15.00.png\" alt=\"How to Create a Figma Breadcrumb Component \" class=\"wp-image-4760\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.15.00.png 431w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.15.00-267x300.png 267w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><\/figure><\/div>\n\n\n\n<p>So this is essentially the step where you create the UI mockups for the breadcrumb.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The focused step is the step the user is currently on. The unfocused step the earlier or forthcoming steps.<\/li><li>I call them &#8220;Primary&#8221; and &#8220;Secondary&#8221;<\/li><\/ul>\n\n\n\n<p><strong>Settings for the entire component<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the &#8220;<em>Constraints&#8221;<\/em> settings, choose &#8220;<em>Scale&#8221;<\/em>on both vertical and horizontal<\/li><li>This will allow for resizing of the element<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"148\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.40.06-1024x148.png\" alt=\"\" class=\"wp-image-4768\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.40.06-1024x148.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.40.06-300x43.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.40.06-768x111.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.40.06.png 1357w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Settings for the group inside the component<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the &#8220;<em>Constraints and Resizing&#8221;<\/em> settings, choose &#8220;<em>Hug contents&#8221;<\/em> on both vertical and horizontal<\/li><li>This will help to keep all the elements in place<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"230\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.44.57-1024x230.png\" alt=\"How to Create a Figma Breadcrumb Component \" class=\"wp-image-4769\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.44.57-1024x230.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.44.57-300x68.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.44.57-768x173.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.44.57.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Settings for the group of the circle with number<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the &#8220;<em>Resizing&#8221;<\/em> settings, choose &#8220;<em>Fixed width&#8221;<\/em> and &#8220;<em>Fixed height&#8221;<\/em><\/li><li>This will make sure that the circle and its content won&#8217;t become distorted when you resize the entire component. The circle will stay a circle with the number centered.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"306\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.47.31-1024x306.png\" alt=\"How to Create a Figma Breadcrumb Component \" class=\"wp-image-4770\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.47.31-1024x306.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.47.31-300x90.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.47.31-768x230.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.47.31.png 1357w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"has-pale-cyan-blue-color has-text-color wp-block-heading\">4. Create the breadcrumb\/stepper component in the <em>other <\/em>property you created<\/h4>\n\n\n\n<p>Build the breadcrumb components using the components we made in the last step in the &#8220;Step&#8221; property. This will make sure that the nestled components are linked and can be changed across all documents simultaneously. <\/p>\n\n\n\n<p>Add as many &#8220;Step&#8221; components as you want, as well as a line to the right side of each &#8220;Step&#8221; component, except for the last one. If you want to add more steps later, you can easily copy and paste any of the steps (except the last one).<\/p>\n\n\n\n<p><strong>Settings for the entire breadcrumb component<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the &#8220;<em>Constraints and<\/em> <em>Resizing&#8221;<\/em> settings, choose &#8220;<em>Center&#8221; <\/em>for the horizontal and &#8220;<em>Hug contents&#8221; for the vertical<\/em><\/li><li>This will make sure that the component is center to the width of the container,  and that content will be aligned\/hugged towards the vertical center.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"147\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.55.09.png\" alt=\"\" class=\"wp-image-4771\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.55.09.png 630w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.55.09-300x70.png 300w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/figure>\n\n\n\n<p><strong>Settings for each &#8220;Step&#8221; component in the Breadcrumb<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the &#8220;<em>Resizing&#8221;<\/em> settings, choose &#8220;<em>Fixed width&#8221; <\/em>for the horizontal and &#8220;<em>Fixed height&#8221; for the vertical<\/em><\/li><li>This will make the breadcrumb responsive! You will now be able to drag and squeeze the width of the breadcrumb!<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"291\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-18.54.29-1024x291.png\" alt=\"\" class=\"wp-image-4776\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-18.54.29-1024x291.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-18.54.29-300x85.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-18.54.29-768x218.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-18.54.29.png 1370w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Settings for each line in the Breadcrumb<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the &#8220;<em>Constraints&#8221;<\/em> settings, choose &#8220;<em>Scale&#8221; <\/em>for the horizontal and &#8220;<em>Top and bottom&#8221; for the vertical<\/em><\/li><li>This will make sure that the length of each line between the steps will adjust to the width of the breadcrumb. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-16.07.05-1024x335.png\" alt=\"How to Create a Figma Breadcrumb Component \" class=\"wp-image-4774\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-16.07.05-1024x335.png 1024w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-16.07.05-300x98.png 300w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-16.07.05-768x251.png 768w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-16.07.05.png 1361w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-pale-cyan-blue-color has-text-color has-medium-font-size\"><strong>Yay! Now you have your finished responsive Figma breadcrumb component!<\/strong><\/p>\n\n\n\n<p>Thank you for reading, and I really hope this was helpful.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"529\" src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.25.34.png\" alt=\"\" class=\"wp-image-4763\" srcset=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.25.34.png 470w, https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screenshot-2021-03-24-at-15.25.34-267x300.png 267w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/Screen-Recording-2021-03-24-at-20.54.42.mov\"><\/video><figcaption>The finished responsive Figma component breadcrumb<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s how you can create a Figma component breadcrumb (as a stepper) using nestled components, auto-layout, and constraints &#038; resizing.<\/p>\n","protected":false},"author":1,"featured_media":4787,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[166,175],"tags":[],"class_list":["post-4754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-ui-design","entry","has-media"],"gutentor_comment":0,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou.png",2560,1440,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou-300x169.png",300,169,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou-768x432.png",768,432,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou-1536x864.png",1536,864,true],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou-2048x1152.png",2048,1152,true],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou.png",600,338,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou.png",800,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2021\/03\/How-to-create-a-figma-breadcrumb-component-Wendy-Zhou.png",1200,675,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":0,"uagb_excerpt":"Here's how you can create a Figma component breadcrumb (as a stepper) using nestled components, auto-layout, and constraints & resizing.","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=4754"}],"version-history":[{"count":13,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4754\/revisions"}],"predecessor-version":[{"id":4788,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4754\/revisions\/4788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/4787"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=4754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=4754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=4754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}