Introducing Bootsketch: Design Sites Faster

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

Seth Coelen
Dec 19, 2017 · 3 min read

What is Bootsketch?

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

Image for post
Image for post
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

🔥 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

Image for post
Image for post

🔥 Artbords = Breakpoints

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

Image for post
Image for post

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.

<script src=”https://gumroad.com/js/gumroad-embed.js"></script>
<div class=”gumroad-product-embed” data-gumroad-product-id=”bootsketch”><a href=”https://gumroad.com/l/bootsketch">Loading...</a></div>

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store