How to frame and present your work, in a way that’s hard to beat, in about 20 minutes.

Let’s get it

You’ve got work, and you need to present it yesterday.

Open Figma and let’s get started.

Creating the perfect frame

Hit “f” on your keyboard, this will open the frame palette on the right of your screen.

Choose “Desktop” (1440 x 1024) and you should now have something like this:

Now resize it using the frame properties box:

For our purposes in this tutorial we will be using a 4:3 frame (1280x960) for web presentation because:

• It loads faster
• While maintaining a reasonable degree of quality.

— — — — — — — — — — —

Note: You also have the option of using a 16:9 frame (1920x1080) for presenting full screen on FHD devices and projectors.

This is typically the resolution you’d use if you’re going to present your work in person on a large screen or overhead, though it loads slower which is why we’re using the 4:3, smaller resolution for web presentation above (also because typically in a web portfolio, your work isn’t being viewed in full screen).

Placing your content

Make sure your frames have a 34pt border radius applied to them.

Also make sure that “clip content” is checked.

Slap your content in the dead middle of the frame.