Skip to content

Can Sketch App symbols be made into React components?

TLDR; Yes ✅. With some ?‍? and bit of ?we made it possible in Stratos alpha version 2.

Even though the React-code generated by Stratos was working fine we felt the need to “bundle” the components together, because everything can always be improved right? Current Stratos alpha 1 Sketch setup and results looks like this:

Structure in Sketch (no worries, it’s not as complex as it seems at first glance)

Code auto-generated from Stratos App

React-rendered view

The Sketch-elements above combined creates one card. Shouldn’t they be one React-component? We felt they somehow should… Symbols in Sketch are re-usable entities. What else are re-usable entities? React components! Would it be possible to create Symbols in Sketch that had a React-component counterpart? At first it seemed impossible ️️?️‍♂️, but hey that hasn’t stopped us before ?‍♂️ After what felt like a gazillion attempts, we finally managed to do it!

This the current end-result. I say “current” since everything can always be improved ?

Newly created symbol

You create a separate artboard in Sketch that represents the React component (never mind the {Container}-component, it’s not relevant to this)

This creates one additional React component — ExampleCard1. In the ExampleCard1 Sketch symbol we have added a {ComponentContent} element. This tells Stratos which elements are child-components to ExampleCard1 and where to insert them.

Stratos now generates the following:

The new component ExampleCard1

And now our Start-component is reduced into this:

The Start-component with the new ExampleCard1-component

These are results of initial test and we are currently testing things like nested symbols and overrides ?‍?

Oh, and while you’re reading: We’ll probably remove the green stuff (comments) from the generated code… and also most likely make functional components instead of classes.

Thanks for reading!

//Fredrik — Team Sketch2React

Leave a Reply

Your email address will not be published. Required fields are marked *