{"id":1518,"date":"2021-06-24T15:58:32","date_gmt":"2021-06-24T13:58:32","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1518"},"modified":"2021-07-07T15:13:33","modified_gmt":"2021-07-07T13:13:33","slug":"welcome-back-figma","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/","title":{"rendered":"Welcome back Figma"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

Figma fans rejoice! When we released the rebuilt from scratch Stratos Tokens 2021<\/strong><\/a>, we promised to bring \u201dback\u201d Figma support. Back because we had it in the pre-release version of our design token companion app.<\/p>\r\n

The cool thing about this update is that we now, for the first time also offer Windows users the whole workflow going from Figma out to code.<\/p>\r\n

\"\"<\/a>
Woo hooo! Welcome back Figma fans<\/figcaption><\/figure>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n

Meanwhile, we simplified<\/strong> the way you create Figma design token projects in Stratos Tokens.<\/p>\r\n

Get your Figma Access Token<\/h2>\r\n
    \r\n
  1. Go to your Figma Account Settings<\/strong><\/li>\r\n
  2. Scroll down to the bit where it says Personal access tokens<\/strong><\/li>\r\n
  3. Create a new personal access token<\/strong><\/li>\r\n
  4. Copy<\/strong> the access token to notes or something similar<\/li>\r\n<\/ol>\r\n

    In Stratos Tokens 2021<\/h2>\r\n
      \r\n
    1. Go to Create New Project<\/strong> and select Figma
      \"\"<\/a><\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
      \r\n
      \r\n
      \r\n
      \r\n
        \r\n
      1. Paste your newly created Figma access token, no worries you only need to do this once<\/strong>, and it can be revoked if needed, more on that later.
        \"\"<\/a><\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n
        \r\n
        \r\n
        \r\n
        \r\n
          \r\n
        1. Jump back to Figma and create a new file<\/strong><\/li>\r\n
        2. Copy the URL of that Figma file
          \"\"<\/a><\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n
          \r\n
          \r\n
          \r\n
          \r\n
            \r\n
          1. Paste the Figma file URL in our app \ud83d\udc49 Figma project url

            \"\"<\/a>
            <\/strong><\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n
            \r\n
            \r\n
            \r\n
            \r\n
              \r\n
            1. Now we are ready to get going! Press Create Figma project <\/strong><\/li>\r\n<\/ol>\r\n

              Important thing about Figma files<\/h2>\r\n

              Figma files work differently than Sketch files in the sense that Figma doesn\u2019t offer so called hot-reloading<\/em>. Every time you do changes inside Figma you will need to press the little reload icon<\/strong>.<\/p>\r\n

              Also, worth noticing, we currently don’t support creating shadow tokens in Figma <\/strong>with the built-in Effects panel.<\/p>\r\n

              \"\"<\/a><\/p>\r\nTo update the design token tree you will need to press this one<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

              \r\n
              \r\n
              \r\n
              \r\n

              In a future update, we\u2019ll introduce time-saving shortcuts for this and other semi annoying things. Who doesn\u2019t want extra seconds in life?<\/p>\r\n

              When using Auto Layout<\/span><\/h2>\r\n

              If you’re using the awesome Auto Layout function in Figma make sure not to break the naming chain or you will break the design token output in Stratos Tokens. <\/span><\/p>\r\n

              Do Auto Layout like this<\/span><\/h4>\r\n

              \"\"<\/a><\/p>\r\n

              So, now what?<\/h2>\r\n

              Now you need to learn how our app and design token framework works<\/strong>, what rules you need to follow, how you can set up things, if you\u2019re going to follow our built-in Style Dictionary support or not. We give you the choice.<\/p>\r\n

              A great starting point is reading this article<\/a>. If you\u2019re curious about learning how to setup for Style Dictionary we suggest you read this article<\/a>.<\/p>\r\n

              Well that’s it and it surely feels great to be back\u2026<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"

              Figma fans rejoice! When we released the rebuilt from scratch Stratos Tokens 2021, we promised to bring \u201dback\u201d Figma support. Back because we had it in the pre-release version of our design token companion app. The cool thing about this update is that we now, for the first time also offer Windows users the whole… Read More »Welcome back Figma<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1521,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[168],"tags":[125,174,119,194,165],"class_list":["post-1518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miscellaneous","tag-design-systems","tag-design-tokens","tag-figma","tag-stratos-tokens-2021","tag-style-dictionary"],"yoast_head":"\nWelcome back Figma | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"We just added Figma support for our design tokens companion app Stratos Tokens 2021 \u2013 Feels great to be back!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Welcome back Figma - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"We just added Figma support for our design tokens companion app Stratos Tokens 2021 \u2013 Feels great to be back!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-24T13:58:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-07T13:13:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Welcome back Figma\",\"datePublished\":\"2021-06-24T13:58:32+00:00\",\"dateModified\":\"2021-07-07T13:13:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/\"},\"wordCount\":421,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png\",\"keywords\":[\"Design Systems\",\"Design tokens\",\"Figma\",\"Stratos Tokens 2021\",\"Style Dictionary\"],\"articleSection\":[\"Miscellaneous\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/\",\"name\":\"Welcome back Figma - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png\",\"datePublished\":\"2021-06-24T13:58:32+00:00\",\"dateModified\":\"2021-07-07T13:13:33+00:00\",\"description\":\"We just added Figma support for our design tokens companion app Stratos Tokens 2021 \u2013 Feels great to be back!\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Welcome back Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips & tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Welcome back Figma | Sketch2React Blog","description":"We just added Figma support for our design tokens companion app Stratos Tokens 2021 \u2013 Feels great to be back!","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:\/\/sketch2react.io\/blog\/welcome-back-figma\/","og_locale":"en_US","og_type":"article","og_title":"Welcome back Figma - Sketch2React Blog","og_description":"We just added Figma support for our design tokens companion app Stratos Tokens 2021 \u2013 Feels great to be back!","og_url":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-06-24T13:58:32+00:00","article_modified_time":"2021-07-07T13:13:33+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Welcome back Figma","datePublished":"2021-06-24T13:58:32+00:00","dateModified":"2021-07-07T13:13:33+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/"},"wordCount":421,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png","keywords":["Design Systems","Design tokens","Figma","Stratos Tokens 2021","Style Dictionary"],"articleSection":["Miscellaneous"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/","url":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/","name":"Welcome back Figma - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png","datePublished":"2021-06-24T13:58:32+00:00","dateModified":"2021-07-07T13:13:33+00:00","description":"We just added Figma support for our design tokens companion app Stratos Tokens 2021 \u2013 Feels great to be back!","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/welcome-back-figma\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/06\/stratos-figma.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/welcome-back-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Welcome back Figma"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips & tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions"}],"predecessor-version":[{"id":1552,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions\/1552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1521"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}