{"id":45,"date":"2020-01-03T21:36:49","date_gmt":"2020-01-03T20:36:49","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2020\/01\/03\/styled-components-vs-design-tokens-in-stratos\/"},"modified":"2021-05-17T11:07:53","modified_gmt":"2021-05-17T09:07:53","slug":"styled-components-vs-design-tokens-in-stratos","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/styled-components-vs-design-tokens-in-stratos\/","title":{"rendered":"Styled Components vs Design Tokens in Stratos"},"content":{"rendered":"
\n


\n<\/figure>\n

Let\u2019s break down the two different ways of working with design systems and\u00a0Stratos.<\/h4>\n

Styled Components<\/h3>\n

E<\/span>very time that you use our markup correctly you will output Styled Components automatically<\/strong>.<\/p>\n

The easiest styled components you can create is anything that has to do with typography. Here\u2019s for example how you create an H2 in Stratos:<\/p>\n

    \n
  1. Use the Text tool<\/strong> in Sketch (T) to style a nice H2<\/li>\n
  2. Choose the font, the size, the colour<\/li>\n
  3. Make sure you add {H2} <\/strong>to the layer name, like this: {H2} Layer Name<\/em>\n<\/li>\n
  4. Done!<\/li>\n
  5. Now if you create a new Stratos project<\/strong> and include the\u00a0.sketchfile you will be able to see this code in the Component Inspector <\/strong>??<\/li>\n<\/ol>\n
    \n

    Styled Components like there is no tomorrow\u00a0?<\/figcaption><\/figure>\n

    Here\u2019s more about Styled Components from this great article from the publication Better Programming<\/a>:<\/p>\n

    \u201cStyled components allow us to keep the styles within the component, coupled with the JavaScript code.\u201d<\/p><\/blockquote>\n

    In other words, Styled Components can be referred to as the code equivalent of symbols in Sketch.<\/strong> You design & build them once, and reuse them everywhere you need them. Pretty amazing, and that\u2019s why we rebuilt our rendering engine Tropos to output them.<\/p>\n

    That is also simply put the biggest difference between Sketch2React (no styled components) and Stratos (styled components)<\/p><\/blockquote>\n

    \n

    You can also work in a totally different way in Stratos.<\/p>\n

    Enter the world of design tokens & themes.<\/em><\/p>\n

    Design Tokens &\u00a0Theming<\/h3>\n

    What are design tokens then?<\/strong> I found this great article on the topic, Design tokens for dummies<\/a>.<\/p>\n

    Here\u2019s another great article<\/a> that describes it really well:<\/p>\n

    Think of each token as a relatively static value representing a design decision.<\/p><\/blockquote>\n

    Fine thing is, you can now work with both design tokens, themes & styled components straight from inside Sketch by connecting Stratos to your workflow.<\/p>\n

    D<\/span>esign tokens require you to structure things a bit differently.<\/strong> Here\u2019s a screenshot of a work in progress Design Tokens Cheat Sheet<\/strong>.<\/p>\n

    \n


    \n<\/figure>\n

    You need to think even more in terms of system design<\/strong>. The whole philosophy of design tokens is that they are just tokens that point to a real code base. A code base that can be, as in our example, based on Material Design UI<\/a>.<\/p>\n

    Design tokens are not bound to a certain code library either, that\u2019s one of the strengths with it. So you can be using whatever you are using on the code base of things. Which is very powerful indeed.<\/p>\n

    Actually, the things you actually can do straight from your design app are kick-ass.<\/p>\n