Figma integration doe snot work fully or something is wrong

[t-e-lition]

Hi,

We currently evaluation with the demo version.

It seems like everything is exported except of the shadows, spacing and anything which is not colors or fonts. Shadows pick only the color of the elements on Figma rather the the effect setting..

Please help. Screenshots attached.

[juanofteamsketch2react]

Hi! Our NPM export is disabled in the demo version for obvious reasons. What you can do in our demo is:

• Copy the raw JSON design token data from the Explorer view
• Export via our Style Dictionary export (but you need to structure and name things accordingly)

I just tried our https://marketplace.sketch2react.io/product/stratos-tokens-quick-start-guide/ in Figma and all the values are exported correctly…

[juanofteamsketch2react]

Above demo is not setup for Style Dictionary, just for using NPM export and the raw JSON export. For setting things up to work with Style Dictionary you can read this article, it covers the basics:

https://sketch2react.io/blog/lets-get-practical-with-design-tokens-part-1/

Another great Style Dictionary tutorial :👉 https://sketch2react.io/blog/how-to-get-started-with-style-dictionary-stratos-tokens/

[juanofteamsketch2react]

You can also use this demo for testing Style Dictionary, but only the first artboard will be exported in our demo: https://marketplace.sketch2react.io/product/stratos-styling-react-demo/

[juanofteamsketch2react]

We'll of course look into this, if this is a bug you're experiencing we'll fix this in a future update.

[juanofteamsketch2react]

When using Auto Layout you need to make sure you don't break the {designtoken} {naming} {chain}, read more in our docs

[juanofteamsketch2react]

@t-e-lition Also a great tip is to never use Capital letters, use {spacing} {breakpoints} and not {Spacing} {Breakpoints} etc

[juanofteamsketch2react]

Here are more great tips:

1. Read our docs, the same rules apply for both Sketch and Figma
2. Join our very friendly Slack, very helpful friends of Sketch2React there

[juanofteamsketch2react]

Also for Figma, never forget that you need to manually refresh the design token tree inside Stratos Tokens. Read more here.

[juanofteamsketch2react]

@t-e-lition Please also include if you're working with PC or Mac, which OS and so on, will be much easier debugging this. Also, if possible, send us the project file, you can use our Slack for that. ✅

[juanofteamsketch2react]

The only thing I can see, from my own tests is that our app seems to have a Figma bug related to multiple shadows on same objects, everything else comes out fine in my code.

[juanofteamsketch2react]

Here's my sample code: { "supported-design-tokens":{ "css-properties":{ "border":{ "radius":{ "value":0.5 }, "weight":{ "value":0.75 }, "color":{ "value":"rgba(26,188,254,1)" } }, "font-weight":{ "light":{ "value":300 }, "regular":{ "value":400 }, "bold":{ "value":700 }, "extra-bold":{ "value":800 } }, "line-height":{ "value":2.125 }, "letter-spacing":{ "value":0.16249999403953552 }, "opacity":{ "value":0.699999988079071 } }, "text":{ "small":{ "value":0.75 }, "medium":{ "value":1 }, "base":{ "value":1 }, "large":{ "value":1.5 } }, "colors":{ "dark-orchid":"rgba(174,49,216,1)", "crayon-blue":"rgba(6,94,223,1)", "pastel-red":"rgba(255,114,98,1)", "princeton-orange":"rgba(253,143,4,1)", "deep-sky-blue":"rgba(26,188,254,1)", "vivid-violet":"rgba(144,19,254,1)", "black":"rgba(34,34,34,1)" }, "border-formatting":{ "border-1":{ "weight":0.0625, "color":"rgba(34,34,34,1)", "radius":0 }, "border-2":{ "weight":0.125, "color":"rgba(34,34,34,1)", "radius":0.125 }, "border-3":{ "weight":0.1875, "color":"rgba(34,34,34,1)", "radius":0.25 }, "border-4":{ "weight":0.25, "color":"rgba(34,34,34,1)", "radius":0.5 }, "border-5":{ "weight":0.3125, "color":"rgba(34,34,34,1)", "radius":1 }, "border-6":{ "weight":0.375, "color":"rgba(10,5,74,1)", "radius":1.5 }, "border-7":{ "weight":0.4375, "color":"rgba(34,34,34,1)", "radius":1.75 } }, "shadows":{ "shadow-1":"rgba(255,255,255,1)", "shadow-2":"rgba(255,255,255,1)", "shadow-3":"rgba(255,255,255,1)", "shadow-4":"rgba(255,255,255,1)" }, "typography":{ "h1":{ "border":"", "fill":"rgba(0,0,0,1)", "fontFamily":"Work Sans, WorkSans-Regular", "fontSize":6, "fontWeight":400, "letterSpacing":-0.09375, "lineHeight":7 }, "h2":{ "border":"", "fill":"rgba(34,34,34,1)", "fontFamily":"Work Sans, WorkSans-Bold", "fontSize":4, "fontWeight":700, "letterSpacing":0.001367833698168397, "lineHeight":4.6875 }, "h3":{ "border":"", "fill":"rgba(10,5,74,1)", "fontFamily":"WorkSans, WorkSans-MediumItalic", "fontSize":2.75, "fontWeight":500, "letterSpacing":0.0009403856238350272, "lineHeight":3.22265625 }, "h4":{ "border":"", "fill":"rgba(10,5,74,1)", "fontFamily":"Work Sans, WorkSans-Bold", "fontSize":2.25, "fontWeight":700, "letterSpacing":0.000769406498875469, "lineHeight":2.63671875 }, "h5":{ "border":"", "fill":"rgba(10,5,74,1)", "fontFamily":"WorkSans, WorkSans-Black", "fontSize":1.75, "fontWeight":900, "letterSpacing":0, "lineHeight":2.05078125 }, "button-titles-white":{ "border":"", "fill":"rgba(255,255,255,1)", "fontFamily":"WorkSans, WorkSans-Black", "fontSize":1.75, "fontWeight":900, "letterSpacing":0, "lineHeight":2.05078125 } }, "breakpoints":{ "lg":80, "md":60, "sm":37.5 }, "spacing":{ "spacing-80":5, "spacing-64":4, "spacing-48":3, "spacing-32":2, "spacing-16":1, "spacing-8":0.5 }, "padding":{ "padding-64":4, "padding-48":3, "padding-32":2, "padding-24":1.5, "padding-16":1, "padding-8":0.5, "padding-4":0.25 }, "fonts":{ "open-sans":"Open Sans", "assets-fonts-open-sans-regular":"assets/fonts/OpenSans-Regular.ttf", "roboto":"Roboto", "assets-fonts-roboto-regular":"assets/fonts/Roboto-Regular.ttf" }, "transition":{ "transition-quickly":"300ms ease", "transition-slowly":"600ms ease" } } }

[juanofteamsketch2react]

For Figma we don't currently support shadow tokens, it's built totally different than Sketch. So will come in a future update this fall.