Doodlebug

Figma plugin for shipping better websites faster

2 followers

Figma plugin for shipping better websites faster

2 followers

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.

Launch tags:Design Tools•Developer Tools

Launch Team

ReplayAutonomous app testing for teams who ship at AI-speed

Promoted

Eterneva Memorial Diamond

@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.

Report

6yr ago

Doodlebug

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

Report

6yr ago

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 :)

Report

6yr ago

Doodlebug

Maker

@thomasguenther Thanks Thomas! Will update :)

Report

6yr ago

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?

Report

6yr ago

Doodlebug

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.

Report

6yr ago

Empty

@nickstamas Cool. Really impressive work, especially given all those constraints 💯

Report

6yr ago

Doodlebug

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.

Report

6yr ago