{"id":95727,"date":"2024-02-01T07:22:48","date_gmt":"2024-02-01T07:22:48","guid":{"rendered":"https:\/\/blog.superbthemes.com\/?p=95727"},"modified":"2024-04-16T17:32:20","modified_gmt":"2024-04-16T17:32:20","slug":"reusable-component-in-framer","status":"publish","type":"post","link":"https:\/\/blog.superbthemes.com\/website\/reusable-component-in-framer\/","title":{"rendered":"How To Make A Reusable Component In Framer"},"content":{"rendered":"\n

INTRODUCTION<\/h2>\n\n\n\n

When talking about components, most people usually think about designing an element once and then reusing it throughout the website.<\/p>\n\n\n\n

Take a button, for example. You design it once and then place it multiple times on your website. But what if you want a different color? Or you want to link to a different page? Or maybe you want to change the copy?<\/p>\n\n\n\n

Do you have to create another very similar component, or is there a better way? You guessed it – Framer offers a smarter way to approach the problem!<\/p>\n\n\n\n

In this tutorial, I\u2019ll show you step-by-step how you can use variables to create a reusable component- in our example, a button.<\/p>\n\n\n\n

If you\u2019re brand new to Framer<\/a>, do not worry; this tutorial is completely beginner-friendly.<\/p>\n\n\n\n

Let\u2019s get started!<\/p>\n\n\n\n

1. DESIGN THE COMPONENT<\/h2>\n\n\n\n

The first step is to design the button and make it a component. For the sake of simplicity, I\u2019ve already created a simple button with a hover animation.<\/p>\n\n\n\n

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

Right now, the component works as expected. You can place it wherever you want, and as soon as you make an edit, every instance of that component will reflect that. <\/p>\n\n\n\n

But what if I want to have a version that says \u201cDownload for free\u201d and one that says \u201cGet in touch\u201d and redirect users to different links? This is where variables come into play.<\/p>\n\n\n\n

2. ADD VARIABLES<\/h2>\n\n\n\n

Variables are like settings that customize a specific instance of the component, not all instances. In our case, the design of the button will stay the same, but we want different instances to have different text and links.<\/p>\n\n\n\n

Every time you create a variable for a component, you\u2019ll have to follow these two simple steps:<\/p>\n\n\n\n

    \n
  1. Creating the variable.<\/li>\n\n\n\n
  2. Assigning the variable.<\/li>\n<\/ol>\n\n\n\n

    Let\u2019s quickly go over each of them.<\/p>\n\n\n\n

    2.1 CREATING THE VARIABLE<\/h3>\n\n\n\n

    The first step is to create the variable. To do that, click on the \u201cvariables\u201d button in the top bar and then on the small \u201c+\u201d button.<\/p>\n\n\n\n

    You\u2019ll see a bunch of different options. For our example, we need to create a variable for the copy of the button and a variable for the link where we want to redirect the users when they click.<\/p>\n\n\n\n

    So, let\u2019s create a \u201cplain text\u201d field and a \u201clink\u201d one.<\/p>\n\n\n\n

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

    2.2 ASSIGNING THE VARIABLE<\/h3>\n\n\n\n

    Now that we have our variables, we want to tell Framer why we\u2019ve created them.<\/p>\n\n\n\n

    If you look at the right sidebar, you\u2019ll notice that most fields have a small \u201c+\u201d button beside them. That button allows you to assign a variable to that field.<\/p>\n\n\n\n

    In our example, we\u2019ll first select the text, and then, in the right sidebar, we\u2019ll click on \u201ccontent\u201d > \u201cset variable\u201d > \u201ctext\u201d. Then, we\u2019ll repeat this process with the whole button to assign the link.<\/p>\n\n\n\n

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

    3. CREATE INSTANCES OF THE COMPONENT<\/h2>\n\n\n\n

    Now our reusable component is ready to be used. Let\u2019s create two instances of it. If you\u2019ve done everything right, the two buttons should look exactly the same.<\/p>\n\n\n\n

    If you now select one of the two buttons, you\u2019ll see that at the bottom of the right sidebar there\u2019s a \u201ccomponent\u201d section that allows you to assign a value to the two variables you\u2019ve previously created.<\/p>\n\n\n\n

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

    And voil\u00e0! You now have a reusable component that can be customized with whatever text\/link you want!<\/p>\n\n\n\n

    CONCLUSION<\/h2>\n\n\n\n

    Component variables are a powerful feature in Framer as they allow you to make small customizations on single instances of a component.<\/p>\n\n\n\n

    If you got lost at any point in the making of this project, here\u2019s a free remix link<\/a> to copy the finished project in your Framer workspace.<\/p>\n\n\n\n

    WRITTEN BY<\/h2>\n\n\n\n

    Luca Da Corte<\/a> is a freelance Framer Expert and SEO specialist. When he\u2019s not working on some exciting projects, he curates a blog where he shares insights, resources, and experiences on everything regarding websites.<\/p>\n","protected":false},"excerpt":{"rendered":"

    INTRODUCTION When talking about components, most people usually think about designing an element once and then reusing it throughout the website. Take a button, for example. You design it once and then…<\/p>\n","protected":false},"author":7,"featured_media":95728,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[256,8],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts\/95727"}],"collection":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/comments?post=95727"}],"version-history":[{"count":1,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts\/95727\/revisions"}],"predecessor-version":[{"id":95748,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts\/95727\/revisions\/95748"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/media\/95728"}],"wp:attachment":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/media?parent=95727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/categories?post=95727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/tags?post=95727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}