Introducing Bootsketch: Design Sites Faster

Because you’re focused on shipping products instead of renaming layer groups

3 min readDec 19, 2017

What is Bootsketch?

Bootsketch saves designers time by giving them Bootstrap components in Sketch format.

All components match Bootstrap 4.0 documentation

The Problem

I design a lot of sites that are developed in Bootstrap. There are a few Bootstrap Sketch files floating around, but they don’t really cut it for me.

No symbols
Or poor use of symbols
Ineffective symbol overrides
Unorganized
Not resizable
Colors aren’t linked to layer styles or components
Typography isn’t linked to text styles

How Bootsketch is Different (Better)

🔥 150+ Bootstrap components replicated from Bootstrap 4.0

You get a symbol, you get a symbol, EVERYONE GETS A SYMBOL!

🔥 All symbols are resizable — even complex symbols like modals and sliders.

Resize symbols horizontally or vertically. They’re optimized for every screen.

🔥 So many combinations — All of the forms below are from the same symbol

Toggle state, border, label, placeholders and drop-downs, just to name a few

🔥 User friendly self-explanatory symbols

This helps speed up the process for experienced designers and also helps teach newbies the ropes

🔥 Artbords = Breakpoints

Each artboard has the same Bootstrap spacing between gutters and the max-width for each responsive breakpoint corresponds to each artboard.

What are people saying?

Last week I launched Bootsketch and the response has been amazing! People from all over have reached out and said how this project will help them save hours of time designing. Here are a few:

Holy crap, this is awesome Seth! Well done. — Mark Otto (Design Director at GitHub, co-creator of Bootstrap)

This looks great. Grabbing a copy. Definitely worth $29 for a well-maintained set of Bootstrap symbols w/ overrides & good coverage of Bootstrap, especially if you’re working on a UI kit from scratch.
I’ve been through the process in the past, and honestly, if I do have to do it all over again (on bootstrap), this would save a ton of hours, and help kick off the process. — James Futhey

I really appreciate this tool. It’s something I’ve wanted to create, but no longer feel the need because you’ve done such a good job. Buying now. — Brad Siefert

What should I expect from Bootsketch moving forward?

Bootsketch will be supported, maintained and improved on a regular basis. I set up a public Trello board that will track progress, releases, and bugs.

If you own a license of Bootsketch you will receive free updates!

Conclusion

I hope will give you the power up you need to start building sites faster and shipping products sooner! If you have any questions feel free to comment below or hit me up on Twitter, or send me an email.