{"id":44,"date":"2020-03-20T10:06:43","date_gmt":"2020-03-20T09:06:43","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/03\/20\/tutorial-how-to-get-started-with-figma-projects-and-design-tokens\/"},"modified":"2021-05-17T11:05:47","modified_gmt":"2021-05-17T09:05:47","slug":"tutorial-how-to-get-started-with-figma-projects-and-design-tokens","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/tutorial-how-to-get-started-with-figma-projects-and-design-tokens\/","title":{"rendered":"Tutorial: How to get started with Figma projects and design tokens"},"content":{"rendered":"
\n

 <\/p>\n<\/figure>\n

\n
\n
\n
\n

How to setup working with your design tokens & themes from Figma<\/h4>\n

Everything you need to know about how to get started working with your design tokens & themes<\/strong> straight from inside Figma.<\/p>\n

On with the show then<\/h3>\n

First of all, you should really read these articles<\/a> first, they are for Sketch, but the setup inside the design application is identical for all our supported apps (Sketch, Figma & even InVision Studio). It\u2019s just the actual setting up before, that differs a bit. Specially with Figma since everything Figma is in the cloud.<\/p>\n

Also, most of us are very confused around the whole concept of design tokens altogether. What the heck are they anyway? I did a presentation internally at my company a couple of weeks ago. Here\u2019s some slides from the prez that may or may not help you.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n

<\/p>

\n

Link to article containing above quote<\/a><\/p>\n<\/figcaption><\/figure>\n

\n

<\/p>

\n

Link to article containing above quote<\/a><\/p>\n<\/figcaption><\/figure>\n

\n
\n
\n
\n

So let\u2019s just assume that you have a good grasp about the total awesomeness of working with design tokens, and how you and your team can benefit from it. So cut the crap now Juan and show us the money man. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

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

Step 0\u200a\u2014\u200aTalk to your developers<\/h3>\n

Yikes, really? Do I really need to talk to them? Why oooh why?!!!! <\/p>\n

Here\u2019s why. Working with design tokens is 100% related to working smarter and closer to your developers. If you setup this correctly you\u2019ll be helping them with stuff they actually don\u2019t care about but you, as a designer, hold up there amongst the most important things in this Universe. Things like color, fonts, spacing between items, the correct color and opacity of that drop shadow that makes everything pop so nicely. Stuff like that. Stuff that makes your UI pop like ?<\/p>\n

What you\u2019re effectively getting is a single place to create and edit your styles <\/strong>that you connect to your real code components, that are done by your developers. So you get the best of two worlds\u2026<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n

<\/p>

This demo is exactly the same for Sketch, Figma and InVision Studio<\/figcaption><\/figure>\n
\n
\n
\n
\n

Step 1\u200a\u2014\u200aPrepare your tokens inside of Figma<\/h3>\n

Once again, this step is identical inside all of the apps we currently support (Sketch, Figma and InVision Studio)<\/em><\/p>\n

Since this is an article and not a 1000 page novella I already have my tokens in place, of course. I\u2019m like the TV Chef ta-da.<\/p>\n

You can download my very simple .fig file from here<\/a>, it\u2019s going to be included in our next Stratos WFH Edition Bundle<\/strong> coming out really soon.<\/p>\n

Why Material?<\/h4>\n

We have based our design tokens demo on Material-UI<\/a> since we found a great playground for testing them<\/a>. Everything that you can test, show to people in real-time usually is great tutorial material. Also, Material is super popular, heavily documented and has millions of components. All of which you can control the styling of, if you setup everything correctly, straight from Figma. Or Sketch. Or Studio.<\/p>\n

Yes, I think you have understood the power of this by now, I\u2019ll stop repeating myself. <\/p>\n

Step 2\u200a\u2014\u200aCreate your tokens project in Stratos Tokens<\/h3>\n

This is an essential piece of this pussel, it\u2019s now that all the things you have done inside of Figma actually are translated into design data.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n

<\/p>\n<\/figure>\n

\n
\n
\n
\n
    \n
  1. Open up Stratos Tokens<\/strong><\/a> app<\/li>\n
  2. Click on the Figma<\/strong> tab under Create New Project<\/li>\n
  3. Give you\u2019re project a great name<\/li>\n
  4. Create your project folder<\/li>\n
  5. Find your Figma Project ID<\/strong>, easiest is to open up the file in your browser as I did in my tutorial<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n

    <\/p>

    Here\u2019s your Figma Project ID<\/figcaption><\/figure>\n
    \n
    \n
    \n
    \n

    6. Now it\u2019s time to create your Figma Access Token<\/strong>. No worries, you only need to do this once, our app remembers the token after first use.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    \n

    <\/p>

    Here\u2019s where you create your Access Tokens in Figma<\/figcaption><\/figure>\n
    \n
    \n
    \n
    \n

    Notice:<\/strong> If you want to unregister<\/strong> the Personal Access Token you go to Help in our app and choose Unregister Figma Access token. <\/strong>But don\u2019t do that right now or this tutorial will be useless to you<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    \n

    <\/p>

    Here\u2019s where you unregister the Access Tokens when not in use anymore<\/figcaption><\/figure>\n
    \n
    \n
    \n
    \n

    7. You can now check the connection to the Figma servers by pressing Check connection<\/strong> in our app. A blueish checkmark should appear.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    \n

    <\/p>\n<\/figure>\n

    \n
    \n
    \n
    \n

    8. Now you\u2019re ready to hit that beautiful purple button that says \u201cCreate New Project<\/strong>\u201d Boom!<\/p>\n

    If you\u2019ve done your job it should look something like this<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    \n

    <\/p>

    Ahhh yeah look at all that sweet JSON design data<\/figcaption><\/figure>\n
    \n
    \n
    \n
    \n

    Awesome! You now have a live connection between your Figma file and Stratos Tokens<\/strong>, everything that you add and change inside Figma will be reflected here.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    \n

    <\/p>

    Hit that Reload button. Do it. Doooooooo it.<\/figcaption><\/figure>\n
    \n
    \n
    \n
    \n

    Important note <\/strong>Since Figma files lives on Figmas servers (and not your HD<\/em>) you will need to refresh manually inside of Stratos Tokens every time that you want to export your tokens, or test them in a theme playground<\/a>.<\/p>\n

    Important Note 2 <\/strong>We have hot-reload for Sketch and InVision Studio files.<\/p>\n

    Same same but in video format<\/h3>\n