{"id":6065,"date":"2024-04-14T13:32:48","date_gmt":"2024-04-14T05:32:48","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6065"},"modified":"2024-04-14T13:32:48","modified_gmt":"2024-04-14T05:32:48","slug":"establish-a-user-interface-kit","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/establish-a-user-interface-kit\/","title":{"rendered":"Establish a User Interface kit"},"content":{"rendered":"\n
\n

If you are constantly replicating identical arrangements, components, and sections, streamline your workflow by developing a UI kit. A User Interface kit is a repository of content containing standard page elements, such as footers and calls to action (CTA), that you can utilize in fresh projects. This encompasses style guide templates and blog templates.\u00a0<\/p>\n

Below are the key points covered in this instructional session:<\/strong><\/p>\n

    \n
  1. Set up a User Interface kit<\/li>\n
  2. Replicate and paste a footer<\/li>\n
  3. Replicate and paste a CTA<\/li>\n
  4. Replicate and paste a button<\/li>\n
  5. Replicate our model User Interface kit<\/li>\n<\/ol>\n

    Explore further on replicating and pasting content across projects.<\/p>\n

    Establish a User Interface kit<\/h2>\n

    To craft your personalized User Interface kit:<\/p>\n

      \n
    1. Initiate a project (or a fresh page in your project)\u00a0<\/li>\n
    2. Design common elements or modules you plan to recycle<\/li>\n
    3. Replicate and paste the elements you want to reuse into another project.\u00a0<\/li>\n<\/ol>\n

      When you paste a User Interface kit into another project, it configures classes that are ready to be used in your new project.\u00a0<\/p>\n

      Replicate and paste a footer<\/h2>\n

      To append a footer to your User Interface kit:<\/p>\n

        \n
      1. Duplicate a previously crafted footer<\/li>\n
      2. Access a new project (or page) to act as your User Interface kit<\/li>\n
      3. Paste the footer in the new project<\/li>\n<\/ol>\n

        Once the footer blends into the target project, you can style it as required to match the project aesthetic.<\/p>\n

        Replicate and paste a CTA<\/h2>\n

        To integrate a CTA into your User Interface kit:<\/p>\n

          \n
        1. Identify a CTA you previously created (e.g., a form serving as a CTA)<\/li>\n
        2. Replicate the form<\/li>\n
        3. Access the target project<\/li>\n
        4. Paste the form<\/li>\n<\/ol>\n

          Note<\/strong>: Although all form configurations from the Designer are copied to your new project, you’ll need to adjust your project settings.<\/p><\/blockquote>\n

            \n
          1. Access your project Settings <\/strong>within your Dashboard<\/strong>\u00a0<\/li>\n
          2. Tap on the Forms<\/strong> tab<\/li>\n
          3. Complete the Form notification<\/strong> section to arrange your form submission particulars<\/li>\n<\/ol>\n
            \n
            <\/div>\n<\/figure>\n

            <\/p>\n

            Replicate and paste a button<\/h2>\n

            To introduce a button into your User Interface kit:<\/p>\n

              \n
            1. Duplicate a pre-existing button<\/li>\n
            2. Open your target project<\/li>\n
            3. Paste the button<\/li>\n<\/ol>\n

              There you have it! Remember, you can replicate and paste frequently used elements into your User Interface kit to save time in the future. Here’s to expediting your design process!<\/p>\n

              Reciprocate our exemplar User Interface kit<\/h2>\n

              On the subject of swift design \u2014 we’ve crafted a compact sample User Interface kit<\/a> for this tutorial that you can clone and repurpose to suit your needs. Duplicate the User Interface kit project to your account, then replicate and paste elements into every fresh project to kick off your subsequent website with a polished style guide.<\/p>\n

              \n
              <\/div>\n<\/figure>\n

              <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Create a user interface (UI) kit with common components that lets you copy\/paste elements \u2014like footers, calls to action, and buttons \u2014 across projects.","protected":false},"author":2,"featured_media":6066,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-6065","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6065"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6065\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6066"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}