Doodlebug

Figma plugin for shipping better websites faster

2 followers

Visit website
Doodlebug is a new way for designers and developers to build great websites faster. Overlay designs from Figma in Chrome, and give developers a pixel-perfect guide to build against. Make it easy for your team to spot visual "bugs" with Doodlebug.
Doodlebug gallery image
Doodlebug gallery image
Doodlebug gallery image
Launch tags:Design Tools•Developer Tools
Launch Team
NMI Payments
NMI Payments
Don’t Integrate Payments Until You Read This Guide
Promoted

What do you think? …

Alex Godin
This is sick! And the video is SO FUN.
Nick Stamas
Maker
@alex_godin1 Thanks Alex 😎
Kai Gradert
Product Hunt
@alex_godin1 The video is 👍
Cory Etzkorn
Empty
Love the marketing site and video. So fun! The product itself looks great too. Did you run into any limitations with the Figma API? What was the most challenging part to build?
Nick Stamas
Maker
@coryetzkorn Thanks Cory. There were a few of things with the Figma API that I ran into. But they're all related to the fact that it requires an account and talks to a server. One is that you can't use Google's OAuth within a plugin correctly. It would be nice to have people signup and onboard directly within the plugin, but that's not possible today (or at least I'm too dumb to figure it out). Doodlebug uses Firebase for the backend, but Figma plugins don't support cookies, which means I couldn't use all the Firebase sweetness that makes things quick and easy. I ended up having to store a token using Figma's API and create a bunch of cloud functions that the plugin calls. Lastly, there isn't a way to grab a Figma file's ID programmatically, which means I had to build a way for users to put it in manually when Doodlebug is run for the first time in a new file. It's a minor inconvenience for the user, but I hope Figma supports it in the future. I learned a lot building this thing out and there were quite a few challenges. For a relatively simple seeming product there's a lot going on under the hood. The Chrome extension is actually where most of the juicy stuff is. The extension is smart about remembering when it was activated for a certain URL, and working with the permissions API for Chrome was a particular pain. There's a lot more to share...maybe I'll do a post soon about the design and dev journey.
Cory Etzkorn
Empty
@nickstamas Cool. Really impressive work, especially given all those constraints 💯
Kai Gradert
Product Hunt
This is awesome and a big timesaver. I used to do this with screenshots. 👏👏👏
Thomas Günther
That's awesome! I especially appreciate your marketing and the fun video. Will definitely check it out. I noticed a small typo in the FAQ section: "What if the designs after updated?". I guess there's a "change" missing :)
Nick Stamas
Maker
@thomasguenther Thanks Thomas! Will update :)
Jennifer Hood
@nickstamas you got to use your magic in the video?! I'm sold. But also, this seems epic. I feel like I'm constantly telling devs to refer back to the art to get the final product closer, this makes that so much easier for them so I don't become a nag.
Nick Stamas
Maker
@inthegoodhood Thanks Jen ☺️ Exactly! I've even just been using it myself when I'm coding a site because it's so hard to get things right going back and forth. Of course I'd love your thoughts and any and all feedback. Here's a code for a couple of free months: 0ccmhTsr
William Huang
GetLost
Thanks for building this! Can't wait to try it out.
Nick Stamas
Maker
@williamhuang12 Thanks William! I made a discount code (eT4sKc6b) for you to get a couple months on the house! Would love your feedback.
William Huang
GetLost
@nickstamas hey Nick! I tried the coupon code but it informed me that it isn't valid. Perhaps it expired? Again can't wait to try this with my team
Nick Stamas
Maker
@williamhuang12 Someone took your code, lol. Here's another one: 1fLbR3QZ
Nick Stamas
Maker
I made Doodlebug because I was tired of shipping bad websites. It’s something that’s happened everywhere I’ve worked. Beautiful, pixel-perfect designs morph into disfigured mutants that ship because there’s no time to fix them. I’ve worked as both a designer and a developer for 15 years, and we’ve come along way from the days of handing off Photoshop files. But something is still missing: a tool that lives exactly where developers do their work, and makes things so obvious that there’s no room for guessing. I’m really excited to get Doodlebug out into the world! I’m hanging out here today to answer questions and throw out some coupon codes if y’all are interested.
12
Next
Last