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:
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!
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