How can we help?

Get started

Divvy has two parts. The Chrome extension copies pages. The Figma plugin builds them in Figma. Both are free.

1. Add the Divvy extension from the Chrome Web Store, then pin it: click the puzzle icon in Chrome's toolbar and the pin next to Divvy.
2. In Figma, open the Divvy plugin from its Community page and click Open in your file. It works in the Figma desktop app and in the browser.
3. That's it. Copy in Chrome, paste in the plugin.

Copying local files

To copy an .html file you opened from your computer, Chrome needs one setting: go to chrome://extensions, click Details on Divvy and turn on Allow access to file URLs. Then reload the page.

Copy a whole page

1. Open the page in Chrome and click the Divvy icon (or press ⌥⇧E).
2. Keep Whole page selected.
3. Choose your widths. 1440, 768 and 390 are on by default. Tap a width to turn it off, or + to add any width from 320 to 2560.
4. Click Copy as layers for editable frames, or Copy 3 screenshots for full-page images. The number follows the widths you picked.

Why your window moves

To copy several widths, Divvy briefly resizes your window (and zooms the tab when a width is narrower or wider than your screen allows), loads the page at each width, then puts everything back. Only that tab is zoomed, and only while copying.

Images from other sites

The first time a page loads images from another website, Divvy asks for permission to read them. If you say no, those images come in as gray boxes.

Copy one part of a page

1. In the popup, choose An area and click Pick an area, or press ⌥⇧D.
2. Move your mouse over the page. Divvy outlines each section and shows its name and size.
3. Click to pick it, or drag a box around anything.
4. Choose Copy as layers, Copy as screenshot, or the download icon to save it. Press Esc to cancel.

Areas are copied at your current window width. Videos, maps, canvases and embedded pages can't become layers, so Divvy offers to copy them as a screenshot.

Screenshots

Copy 3 screenshots captures the full page at every chosen width and pastes into Figma as images, side by side.

To save a screenshot to your computer instead, press ⌥⇧S or use the download icon in the area picker. Files go to your Downloads folder, named like lumen-app-1440.png. Choose PNG or JPEG in Settings.

Very tall pages are saved in numbered parts, because a single image can only be so tall.

Paste and build in Figma

1. Open the Divvy plugin in your Figma file.
2. Click once inside the plugin, then press ⌘V (Ctrl V on Windows).
3. Check what's coming: frames, layers, images, and any missing fonts.
4. Click Build 3 frames. Your frames appear to the right of your work, one per width, named like Lumen · 1440.

Plugin settings

Your own HTML

No extension needed. In the plugin, drop an .html file, choose one with Choose file, or paste HTML code. Pick any widths and build.

• Keep your CSS inside the file. Linked stylesheets on your computer can't be read, and Divvy will warn you.
• Scripts written inside the file run safely. Scripts and images loaded from the internet don't, because the plugin works offline.
• For pages that need those, open them in Chrome and copy with the extension instead.

The .zip download

After any copy, you can click Download .zip. It holds your copy as a .divvy file, plus screenshots if you copied any. Drop the zip into the plugin whenever you like, even on another computer.

Very large pages (over 25 MB) can't go through the clipboard, so the zip is the way to bring them in.

Keyboard shortcuts

Change them anytime at chrome://extensions/shortcuts.

Troubleshooting

Still stuck?

Email komal.mishra.prof@gmail.com. It helps to include the website you copied, a screenshot of what looks wrong, and your Chrome and Figma versions.