Guideline to structure and organize your Sketch file
Ensure getting the best possible generated code
Best practices to avoid miscommunication and improve collaboration
In order to generate the cleanest code possible, logically group your Sketch elements wherever you can. Meaning, think about what would make a component on your webpage. Make sure to create and use as my symbols as possible. Using symbols makes sure that the dimensions of your repeated elements are always consistent.
A bad example of grouping
A good example of grouping
All the items in the example above are ungrouped and placed on the same layer level. This makes your designs less readable and also difficult to generate code from.
All the items in the example above are properly organized into logical groups. This makes the `CardPortrait` group easily readable by the rest of your team and also easy to generate code from.
The most common mistakes we see are improperly aligned elements. This not only creates an imperfect code output but also makes your designs look "off" and unappealing. Sometimes unaligned elements confuse your developer teammates as well. Here's how to fix it:
Use the Pixel Perfecter Sketch plugin to eliminate all the decimal pixel values on your elements
Before applying Pixel Perfecter:
After applying Pixel Perfecter:
Make sure there are no elements that start or end outside of the bounds of the artboard. These "overflowing" elements are not captured by the code generator since they could be outside of the viewport of the web page
Bad example with overflowing elements (notice how the starting point of the group is outside of the artboard):
Good example without overflowing elements (notice how the starting point of the group is outside of the artboard):
If you cannot move overflowing elements inside the artboard, create a slice in Sketch and replace the element with the exported PNG from the sliced layer
An overflowing element that you cannot bring inside the artboard:
Sliced, exported, and re-imported element to bring it within the bounds of the artboard:
For any elements that have text on top of them, make sure to make a table-like view by changing their height and width. Stretch text elements horizontally and/or vertically, to occupy maximum width inside their group.
After (stretch the text element horizontally and vertically to fit the button):
Symmetrically align the elements inside a group by making sure that the left-hand side and right-hand side paddings are equal
Before (Notice that even though the width of the title and timestamp is the same, there is no padding on the right-hand side):
After (In this case, the padding on the left-hand and right-hand sides is equal. This makes up a much cleaner grid in CSS):
Make sure to use descriptive names for all your elements, groups, symbols, and even text elements. This ensures maximum readability for your development team after generating the code.
Rename the layers to a descriptive and readable name
After (notice the name change of the text element from "Why Re Invent The Bu" to "Title"):
Use Pascal Case convention when there are multiple words in the layer name (every word is capitalized and there are no spaces in the names)
After (notice the name change of the text element from "6 days ago" to "PostDate"):
Replace all vector shapes (icons and otherwise) with PNGs. This is because we don't fully support vector shapes just yet, we are covering that feature in the next update. We know its annoying, but its necessary. The bright side is that this practice avoids your work of sharing those assets separately with the developers on your team.
After (notice the vector shape named "HeartIcon" is replaced by a PNG with the same name)
Using these guidelines will not only allow our algorithms to generate the cleanest possible code but also allow your team to communicate much more effectively if you rely on sharing Sketch files among them.