Categories
Helpful Tips User Story

Using GoFullPage with Figma

A quick tip from John D. Saunders, founder of 5Four Digital

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:

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.

Imported image on left was automatically resized by Figma, assembled image on right is true to size


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!

Note: you will not have access to GoFullPage on the Figma desktop app. This will only work for the browser 📸

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s