Sketch Template for Prototyping Semantic UI

The goal of this styleguide is to document all the Semantic UI components as a Sketch symbol library to make the prototyping of SUI projects easier. The mission is to strive to follow the same standards Semantic UI sets forth with it's semantic and atomic basis for it's design system.

Inside you'll find a components that are made up of several different symbols. The different symbols allow for the same flexibility you receive from the semantic orientated structure of the CSS framework. Need a different background color? Maybe your button needs to change state? Simply click your component and customize it in Sketch's righthand panel.

This file is also capable of generating a complete style guide for you, based on the way you customize your symbols. All your colors, text style, buttons, inputs, etc can be exported as PDFs, SVGs, or more from the Styleguide pages.

Instructions

Using the Sketch File

1. Make a new page
2. Click Insert on the top bar,
3. Then hover over Symbols
4. Find whichever component you need.

It's recommended you play with combining symbols to create components. Some symbols, like Cards or even Buttons, are comprised of many symbols that make up the final product. For example, the conditional button is simply a left only and right only button, with the conditional shape and text in the middle. Components like labeled buttons are achieved in this same way, with one labeled button and another regular one stacked underneath.

Customizing the Styleguide

1. Open file
2. Go to Symbols page
3. Follow instructions there to customize

Since Semantic does some interesting things Sketch doesn't like, we have a few containers/borders that are specialized for Semantic. You can find special instruction for those on bottom of the last step.

You'll also find that Sketch doesn't allow you to change things such as text color or justification from the side panel. This is why I've created (in some cases), extra buttons that have font color and weight variations.

Contributing

Feel free to fork this and add your own components. I'll try my best to merge them all into this master file.

You can check the CHANGELOG to get an idea of what's been worked on. Whatever hasn't been converted to a symbol yet on the "Old Semantic Converted" page is a priority.

Download

Download the Sketch file here on Github

Hope that helps!
Stay regular,
Oscar

Comments

[Carlo Teran]

As Developers, what prototyping tool/software do you recommend? I am a junior full stack developer and I want to start learning prototyping and best practices but I do not know where to start. Any advise?

[Ryosuke]

Can't go wrong with pen and paper. But seriously:

For super lo-fi stuff that's text-only, using apps like OmniGraffle or cloud planning web-interfaces work.

For lo-fi prototypes like flats, you can use Sketch prototyping kits.

For interactive prototypes you can use the new version of Sketch, combine Sketch + Principle, or use a full-service app like Framer.

Tools/software usually depends the company/team preference. Some people use Adobe XD, some teams don't use Sketch. It's good to be flexible enough to pick up a few types, but get really fast at one you prefer.

You'll also find some teams have crazy build processes for their design systems. You get stuff like Airbnb developing a Sketch plugin to produce React components, or a machine-learning app that scans drawings and converts them to existing components. Experiment with your process and don't be afraid to break the mold.