Made for Figma & Chrome

Build better websites faster.

Doodlebug lets you overlay designs from Figma directly in a Chrome browser, saving you and your team time and frustration.

Sign up with Google

Eliminate soul-sucking guesswork.

Because you've had this conversation way too many times.

Your message

Kill visual bugs dead.

Doodlebug helps teams fix visual bugs like:

Color

Typography

Line height

Padding & margin

Alignment

Images

Made just for Figma.

With the Doodlebug Figma plugin, send mockups to Chrome instantly without ever leaving Figma.

FAQs

You've got questions, we've got answers.

How does it work?

When a designer is ready to hand off a screen to a developer, they simply open the Doodlebug plugin within Figma. They set a name for the screen and add up to 3 mocks (for mobile, tablet or desktop sizes).

Now the developer can overlay the mocks directly on the site as she’s coding it. She has the mockups as a perfect visual reference — directly over what she’s building.

What if the designs get updated?

No problem! Just tap the “refresh” icon in the Figma plugin. Doodlebug will send your changes instantly over to the developer in Chrome.

Does it only work for mockups of full web pages?

No, Doodlebug can easily be used if a designer has only mocked up one section of a page (or even a single component, like a text input or a button). Doodlebug lets developers move mockups around in Chrome and position them on the screen wherever they need to.

Does the Chrome extension need to be activated manually after every page reload?

No! The Doodlebug Chrome plugin remembers whether it’s active on a URL and quickly loads right back to where everything was after every page refresh.