If you’ve come in contact with Sketch2React or Stratos chances are big that you’ve also encountered the weird layer naming convention a.k.a. our markup. It might seem strange and hard to learn, but in this article I’ll explain why we use the markup and flatten the learning curve a bit by showing you that it really comes down to only three things.
The need for markup
Sketch App is really good for creating visual stuff such as web design (I know you can do a lot more, but let’s keep it simple in this article). There is however a limitation as to what Sketch App can provide when it comes to metadata. Metadata is “data about the data”.
Let me give you one example:
You create a Text-layer in Sketch and style it according to i.e. your company’s design guidelines. Sketch is aware of the Text-layer’s visual representation (formatting, position, etc.).
What it does not know however is: what kind of html element type should I be? Should I be a <p>, a <span>, an <h1> or something else?
Of course, we could have made the Sketch2React render-engine go like: hey, it’s a Sketch Text-layer, let’s create an html paragraph (<p>).
The problem is then that you would always have ended up with an html paragraph (<p>) that looks like your i.e. Heading 1 in Sketch, but It wouldn’t be a “real” Heading 1 from a code point of view.
If you style a Heading in Sketch, you should get a Heading html element that has the corresponding formatting as output.
This is the reason we need the markup: To fill the information gaps in the Sketch-file in order to generate proper, useful code.
So, if you name your Heading 1 Text-layer in Sketch: {h1}, you’ll get an <h1> html element that has the styling like the Text-layer you have in Sketch. (The markup differs slightly between Sketch2React v.1.x and Stratos)
The three-ish types of metadata
We have put a lot of effort into making the two markups (Sketch2React v1.x. and Stratos) a similar as possible, but in order to support more advanced features and functionalities in Stratos some things needed to be changed. You can find more detailed documentation about markups here. Sketch2React v.1.x’s markup is made up of two parts, while Stratos’ markup is made up of three parts.
Sketch2React v.1.x
In the above example we have a Sketch Text-layer that will:
- Generate an span html element
- Have the CSS-classes animate-up and myclass added to the generated html element
Stratos
The Stratos markup has one additional, third (optional), metadata part.
In the above example we have a Sketch Text-layer that will:
- Generate an h1 html element
- Generate a React Styled Component named “Heading1” (If you omit Custom name it will get the name “H1”)
- Have the CSS-classes animate-up and myclass added to the generated html element
Common for both markups is that the only thing that is mandatory is the Sketch2React Component type (defined within {})
Another example
How should one create structures in a Sketch document that represents the structure of the code output? By nesting of course! But nesting what? Sketch groups!
Let us represent a Bootstrap grid by using Sketch groups. You’ll end up with something like this:
In order to generate proper code, we are in need of additional information (metadata). The Sketch-document knows that i.e. {Container} in the example above is indeed a Sketch group, but it does not know that we want this particular group to represent a Bootstrap container element. By adding the name {Container} to the Sketch-group as metadata, the Sketch2React render engine knows that it should generate a Bootstrap container element.
Conclusion
The markup in combination with the information in the Sketch-file provides the Sketch2React render engine with a complete set of information which in turn enables the possibility to generate proper code output.
Thanks for reading!
// Fredrik — Team Sketch2React