Design

Macbook Pro Mockup - Figma Resource

A high-res mockup ready to accept any design. Pixel perfect dimensions of an actual MacbookPro screen.

Overview

When putting together your portfolio or a client presentation, it's always nice to give your work some context. This free mockup utilizes Figma's awesome Component functionality to instantly create a device mockup from your live design or screenshot.

A few ways to use this mockup:

• Design inside the Master Component

• Paste any group or frame from another Figma file into the Master Component

• Paste a screenshot or other image file inside the Master Component

All methods will result in perfect mockup.

Included in the file:

• 4 Total Mockups

• Exportable frame is 2000px wide

• Screen on the mockup is 1440x900, exact dimensions of a MacbookPro frame in Figma

• Fully Vector

• 2 Light Version, 2 Dark Versions

• Each Colorway has an optional browser window overlay

Continue Reading

View All Posts
Design
8 min read

Design

How to Animate a Hidden Menu with Invision Studio

In this beginner tutorial, I walk you through step-by-step how to create an animated hidden menu for use in your mobile or web prototypes.
Design
8 min read

Design

How to build a Pinterest-style portfolio in Webflow step-by-step

Learn how to create that quintessential "pinterest-style" layout for use in your design or photography portfolio.
Design
8 min read

Case Study

How I designed a popular posts plugin for WordPress

Did my own bias play too big a part of this project?
Design
8 min read

Case Study

Designing a new feature to solve an old problem.

Like most startups in their early stages, Accountingfly was building the plane while it was in the air; using what tools we had already built to fulfill the needs of the customer.
Design
8 min read

Case Study

Questioning the efficacy of a legacy process

For an online job application, why do we force users to enter so much information?