Doodlebug

Figma plugin for shipping better websites faster

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.
Discussion
Would you recommend this product?
5 Reviews5.0/5
This is sick! And the video is SO FUN.
Upvote (7)Share
@alex_godin1 Thanks Alex 😎
Upvote (1)Share
@alex_godin1 The video is 👍
Upvote (2)Share
This is awesome and a big timesaver. I used to do this with screenshots. 👏👏👏
Upvote (4)Share
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 :)
Upvote (3)Share
@thomasguenther Thanks Thomas! Will update :)
@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.
Upvote (3)Share
@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
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?
Upvote (2)Share
@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.
Upvote (2)Share
@nickstamas Cool. Really impressive work, especially given all those constraints 💯