Using GoFullPage with Figma

Figma & GoFullPage

Here at GoFullPage, we use Figma for everything from prototyping to creating visual assets for a blog post like this one. We often use the two apps together, and love hearing about how our users incorporate both tools into their workflows.
Here’s a great flow recently shared by @johndsaunders on Twitter:

#webdesign quick tip: create a @figmadesign board with inspiring sites (use GoFullPage chrome plugin to snap a full shot) and leave comments on them as part of your competitive analysis for clients. pic.twitter.com/cDNiy8dQGN

— John D Saunders | Webflow Web Designer & SOPs (@johndsaunders) July 20, 2021

How-to

Screenshots from GoFullPage can be copied and pasted directly into Figma (try using our right-click menu!). However, please note that Figma does not allow importing of images with a width or height larger than 4096 pixels. Figma will scale any larger images so they fit within these limitations.

If you need your screenshot to be imported into Figma as a full-size image, you can use the GoFullPage Editor to crop the image into appropriately-sized sections:
First, open the cropping feature, and then change “H” to: 4096

Then, select “Done Cropping”, and copy the first cropped image into Figma.
Next, open the cropping feature again and move the cropping window down the length of the screenshot by changing the number in “Y”:

Select “Done cropping” and copy/paste the second image into Figma. Repeat this process until the entire webpage screenshot has been turned into pieces each with a height smaller than 4096 pixels.
These smaller pieces of the image are then very easy to align in Figma to import the full-size screenshot in its entirety.

Bonus: use GoFullPage to screenshot your final result in Figma for easy sharing

Because of the way Figma renders in the browser, our app is unable to scroll the canvas, though it will still take a screenshot of your screen as you see it. If you organize your Figma canvas and panels on one screen, you can then use GoFullPage to create an easy-to-share screenshot of your Figma canvas. Like in John’s Tweet above!

GoFullPage Premium for quick comments

In addition, the GoFullPage Premium editor is also a great tool for quickly capturing, annotating, and sharing a screenshot in one go!

Helpful links

You can follow John on Twitter for more great tips or check out his personal website and branding agency!
To download our free app: GoFullPage for Google Chrome or Microsoft Edge
To try our Premium Editor: https://gofullpage.com/premium