Bootsketch

Ship products instead of renaming layer groups

get it

Bootsketch saves you time when designing by giving you Bootstrap components in Sketch format.

In Bootsketch I've created each symbol to be resizable, intuitive, and extendable

All colors are linked to layer styles and symbols so updating branding is extremely quick and easy. Updating text styles is just as easy

👇 MORE DETAILS BELOW

Reviews

  • Cassandra Beaulieu
    Cassandra BeaulieuFounder & Digital MKG @ bornmkg.com
    Pros: 

    Very organized, easy to modify, symbol overrides are top notch

    Cons: 

    No tutorial or best practices guide

    Would love to see "new users start here" type of guide that gives an introduction into the best way to use bootsketch. Possibly include the plugins shown in the example video, and best ways to modify components. Overall, a fantastic product and well worth the $29

    Cassandra Beaulieu has used this product for one day.
  • Nate Hobi
    Nate HobiMaker of things.
    Pros: 

    Great value, easy to use, creator is available / responsive to support.

    Cons: 

    None so far. Hope it can stay up to date with future versions of Bootstrap.

    A fantastic value-add to my toolset as a designer / developer. I often reach for bootstrap when choosing a front-end framework and having this Sketch resource compels me to use bootstrap for more projects, since I have the ability to quickly create mockups for clients before building stuff out. 10/10 would recommend.

    Nate Hobi has used this product for one week.

Discussion

Hunter
Makers
You need to become a Contributor to join the discussion - Find out how.
Seth
SethMaker@whatsnewsaes · UI Designer / Developer
Hi Everyone! 👋 I'm really excited to bring you http://Bootsketch.com It's been a passion project that I've been working on for a while and I'm excited to git it in the hands of other designers and developers. ⁉️ What is Bootsketch? Bootsketch is a sketch file that gives you all of the Bootstrap components in the latest 4.0 documentation. 😭 The Problem I design a lot of sites that are developed in Bootstrap. All of the current Bootstrap sketch files seem to be missing the mark. no symbols or poor use of symbols, ineffective symbol overrides, unorganized, not resizable, colors / type aren't linked to components ⚗️ My Solution In Bootsketch I've created each symbol to be resizable, intuitive, and extendable All colors are linked to layer styles and symbols so updating branding is extremely quick and easy. Updating text styles is just as easy. 😱 😱 😱 I'M NOT WORTHY😱😱😱 Holy crap, this is awesome Seth! Well done.  — Mark Otto (Design Director at GitHub, co-creator of Bootstrap)
Leo Bassam
Leo Bassam@leobassam · Founder, CEO at Plutio.com
Looks great! 🙌🏻
Seth
SethMaker@whatsnewsaes · UI Designer / Developer
@loaibassam Thanks Leo! Keep up the great work on Plutio!
Vlad Korobov
Vlad Korobov@vladkorobov · Product Manager
Thank you!
Seth
SethMaker@whatsnewsaes · UI Designer / Developer
@vladkorobov Absolutely!
Brett Romero
Brett Romero@mrbrettromero · Founder of Visual Analytics
Looks great. As someone who has many battles trying to code up Bootstrap pages, this looks awesome. One (dumb) question that wasn't made obvious by the video or on the webpage - is Bootsketch purely a mockup tool, or does it generate the HTML/CSS to create the pages as well?
Seth
SethMaker@whatsnewsaes · UI Designer / Developer
@mrbrettromero Good question, Brett. Bootsketch is purely a mockup tool. No HTML/CSS is generated. Even though it doesn't generate html/css it helps It helps bridge the gap between designer & developer, and helps them both be on the same page. If I as a designer know all the default assets my developer has at his disposal I can pull those into my design with confidence knowing that those are pretty much plug and play when things get to development If I've made edits & branding updates to bootsketch, I can simply share my design with the developer and he can see what colors / components were updated. From there he'll know exactly what needs to be changed within the bootstrap ecosystem.
Brett Romero
Brett Romero@mrbrettromero · Founder of Visual Analytics
@whatsnewsaes Is the generation of HTML/CSS something you are considering adding as a feature at a future date? I realize it would be a lot of development effort, but it would elevate your app from a cool tool for designers to essentially a must have for every frontend developer and UI designer.
Seth
SethMaker@whatsnewsaes · UI Designer / Developer
@mrbrettromero haha probably not, but if there is a dev wants to partner with me on making that happen I'm totally down to pursue it. Good suggestion!
Seth
SethMaker@whatsnewsaes · UI Designer / Developer
@mrbrettromero @anurag_saxena1 this is super interesting. So much potential!
Thomas Berends
Thomas Berends@thomasberends · Webdeveloper
Looks great! I'm missing one piece of information though: On what platforms does it run?
Seth
SethMaker@whatsnewsaes · UI Designer / Developer
@thomasberends Exclusively for the application sketchapp.com which runs on the Mac.