{"id":4259,"date":"2024-04-14T02:56:30","date_gmt":"2024-04-13T18:56:30","guid":{"rendered":"https:\/\/webflow.tenten.co\/doc\/figma-to-webflow-app\/"},"modified":"2024-04-14T02:56:30","modified_gmt":"2024-04-13T18:56:30","slug":"figma-to-webflow-app","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/figma-to-webflow-app\/","title":{"rendered":"Figma to Webflow App"},"content":{"rendered":"
The Figma to Webflow App lets you seamlessly import components and variables from Figma into Webflow. To get started, you\u2019ll first need to install the Figma to Webflow plugin. <\/p>\n

In this lesson, you\u2019ll learn:<\/p>\n

    \n
  1. How to launch the Figma to Webflow App<\/li>\n
  2. How to sync and import variables and components<\/li>\n
  3. How to sync previously-imported components<\/li>\n
  4. How to review updates to components with conflicts<\/li>\n
  5. How to sync previously-imported variables<\/li>\n<\/ol>\n

    How to launch the Figma to Webflow App<\/h2>\n

    First, open your Webflow site, and launch the App from the Apps<\/strong>panel<\/strong>. Then:<\/p>\n

      \n
    1. Go to the Figma plugin<\/li>\n
    2. Go to the Design System Sync<\/strong> tab<\/li>\n
    3. Make sure the correct site is selected in the dropdown (i.e., the site with which you\u2019re syncing the Figma plugin)\u00a0<\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n
      \n
      <\/div>\n<\/figure>\n
      \n
      <\/div>\n<\/figure>\n

      Once the plugin shows that it\u2019s connected, you can sync variables and\/or components.<\/p>\n

      How to sync and import variables and components<\/h2>\n

      Set global units for number variables<\/h3>\n

      If you want to globally change the units used for number variables, you can do so in the Figma plugin modal. Then, all variables will use the specified unit when syncing to Webflow.<\/p>\n

        \n
      1. Go to the Figma to Webflow plugin modal window<\/li>\n
      2. Go to the Design System Sync<\/strong> tab<\/li>\n
      3. Click the icon in the upper right corner, next to Design system sync<\/strong>\u200d<\/li>\n
      4. Click Plugin settings<\/strong>\u200d<\/li>\n
      5. Use the Number variables unit<\/strong> dropdown to set the global units (i.e., px, em, or rem) for number variables<\/li>\n
      6. Go back to the Design System Sync<\/strong> tab<\/li>\n
      7. Click Sync to Webflow<\/strong><\/li>\n<\/ol>\n

        Then, you can go back to Webflow and sync your new number variables unit in the App modal window by clicking Import and update variables<\/strong>. Any variables currently in use on the canvas will be adjusted to the new number variables unit.<\/p>\n

        Note:<\/strong> Figma only displays variables in pixels, so your imported designs may look differently in Webflow than they do in Figma.<\/h6>\n

        Syncing and importing variables<\/h3>\n

        To choose which variables to sync and import:<\/p>\n

          \n
        1. Go to the Design System Sync <\/strong>tab<\/li>\n
        2. Click the \u201cvariables mode<\/strong>\u201d icon in the top right corner<\/li>\n
        3. Select the variables you want to sync<\/li>\n
        4. Click Sync to Webflow<\/strong><\/li>\n<\/ol>\n

          Then, you can go back to Webflow to import your variables in the App modal window. You can check or uncheck boxes to choose which variables to import. Then, click Import variables<\/strong>. Once you\u2019ve imported variables, they\u2019ll appear in the Variables<\/strong> tab.<\/p>\n

          Syncing and importing components<\/h3>\n

          To choose which components to sync:<\/p>\n

            \n
          1. Go to the Design System Sync <\/strong>tab<\/li>\n
          2. Click the \u201cselect mode<\/strong>\u201d icon in the top right corner<\/li>\n
          3. Select one or multiple components on the Figma canvas by using Shift<\/strong> + click<\/strong><\/li>\n
          4. Click Sync to Webflow<\/strong><\/li>\n<\/ol>\n

            Once the plugin syncs your components you can go to your Webflow site and review updates in the Figma to Webflow App.\u00a0<\/p>\n

              \n
            1. Click Import new components<\/strong> to review the newly synced components<\/li>\n
            2. Select which components you want to import to your Webflow site<\/li>\n
            3. Click Import component(s)<\/strong><\/li>\n<\/ol>\n

              Once you import a component from Figma, Webflow has a connection to that component. Later, you can re-import the same component from Figma and review its design updates directly in Webflow. Note that only element positions and styles are updated. If you have properties or bindings they’ll remain in Webflow.<\/p>\n

              Note: <\/strong>Component variants are imported to your Webflow site as duplicate components unless you deselect them when syncing.<\/h6>\n

              How to sync previously-imported components<\/h2>\n

              To sync component(s) you previously imported to your Webflow site, first go to Figma and open the plugin window. Then:<\/p>\n

                \n
              1. Make sure the correct site is selected in the dropdown (i.e., the site with which you want to sync your components)\u00a0<\/li>\n
              2. Click the \u201cselect mode<\/strong>\u201d icon in the top right corner<\/li>\n
              3. Select the component(s) on your Figma canvas<\/li>\n
              4. Click Continue <\/strong>in the plugin modal window<\/li>\n
              5. Click Sync to Webflow<\/strong><\/li>\n
              6. Open the Figma to Webflow App in your Webflow site<\/li>\n
              7. Click Component updates<\/strong> in the app modal window<\/li>\n<\/ol>\n

                Then, you can click each component to view:<\/p>\n

                  \n
                • Styles that have changed (e.g., color, font, etc.)<\/li>\n
                • Variables added to or updated with the component<\/li>\n
                • New elements added to the component<\/li>\n<\/ul>\n

                  You can click Update Component Styles and Variables<\/strong> to update a single component from its preview, or click Update all components<\/strong> from the Review component updates<\/strong> page. All instances of the component(s) will update across your Webflow site.<\/p>\n

                  How to review updates to components with conflicts<\/h2>\n

                  Conflicts in previously-imported components occur when you\u2019ve removed one or multiple elements from your components in Figma and those elements are still present in Webflow. To review updates to components with conflicts, click Component updates with conflicts<\/strong> in the app modal window. Then, you can click each component to view its missing element(s).\u00a0<\/p>\n

                  From there, you have three options:<\/p>\n

                    \n
                  • Delete missing elements<\/strong> \u2014 update all instances of the component in Webflow as usual (this will remove<\/strong> the element(s) in the component)<\/li>\n
                  • Import as un-synced component<\/strong> \u2014 import the component as is to Webflow. The component can\u2019t be synced from Figma to Webflow in the future.<\/li>\n
                  • Revert changes in Figma<\/strong> \u2014 you can go back to Figma and add the removed element(s) back to the component, which will remove the conflict<\/li>\n<\/ul>\n

                    How to sync previously-imported variables<\/h2>\n

                    To update variable(s) you previously imported to your Webflow site, first go to Figma and open the plugin window. Then:<\/p>\n

                      \n
                    1. Click the \u201cvariables mode<\/strong>\u201d icon in the top-right corner<\/li>\n
                    2. Click Continue<\/strong><\/li>\n
                    3. Select the variables you want to sync<\/li>\n
                    4. Click Sync variable(s) to Webflow<\/strong><\/li>\n<\/ol>\n

                      Any variables that have been updated in Figma and synced to Webflow will appear in the App modal window. The window will display the variable\u2019s initial value and the new value. You can choose which variables to import, then click Update variable(s)<\/strong>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the Figma to Webflow App to streamline your design system sync.","protected":false},"author":2,"featured_media":4260,"comment_status":"open","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":[284],"tags":[],"class_list":{"0":"post-4259","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4259","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=4259"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4259\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4260"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}