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.
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?
@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.
Doodlebug
Product Hunt
Product Hunt
Notion
Doodlebug
Notion