presentation mockup figma

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption

Creating presentations using Figma

In the design world, creating effective presentations is crucial. Ask any designer, and they’ll tell you that the ability to articulate design concepts can be the difference between an idea that soars and one that nosedives.

And when it comes to crafting these presentations, Figma stands out.

Not only is it a versatile design tool that lets you customize your slides however you want, but its prototype feature allows you to create the sort of unique transitions you won’t get with any other tool.

Surprisingly, creating stunning presentations in Figma is pretty straightforward. This guide is going to show you how you can do it. We’ll also review the pros and cons of creating presentations in Figma.

So, if you’re ready to start creating presentations that captivate your audience, let’s jump right into the steps involved.

Step 1: Create a Figma account

To use Figma, you’ll need to create an account. If you don’t already have an account, go to Figma and click the Sign up button in the top right corner. Enter your email address and password in the fields provided. Click the Sign up button, and you’ll be logged into your Figma account immediately.

Step 2: Create your first presentation frame

Open a New design file . You can rename the file by clicking Untitled at the top of the page. Next, click the Frame tool (F) and select Presentation > Frame 16:9 from the templates on the right:

Once you’ve created your first frame, rename it by double-clicking the blue title on the top left of the frame. Enter a new name for your frame and press Enter :

You can also change the background color by selecting the frame and picking a color from the Fill options on the right sidebar.

Step 3: Add your title text

To add title text, click the Text tool (T) and write your title. Stick to one or two words per line and use a different text box for each line. To modify your text size, color, and so on, go to the Text menu on the right sidebar.

With your title text sorted, it’s time to move on to the next step.

Step 4: Add your cover image

Start by drawing the shape that will house your image. It can be a rectangle, ellipse, or any other shape you prefer. We’ll be using a trapezoid for this example.

Draw a trapezoid by using the Pen tool (P) . Next, click the trapezoid and go to Fill in the right sidebar. Select the colored square to open the Fill properties. Click the image icon and select Choose Image :

Select the image you want to use and click Open . The image will automatically adjust to fit the shape you drew earlier.

Over 200k developers and product managers use LogRocket to create better digital experiences

Once your image is in place, it’s time to move to the next step.

Step 5: Create your first transition

The first transition will open the image vertically, while the text will slide in from the left. To achieve this, start by duplicating the entire frame. Select the frame and hit Ctrl/Cmd + D .

On the left frame, reduce the image height to about 1/6th of its size. To do this, select the image and divide the H attribute by six from the right sidebar. Then, align the image center vertically and reduce the image layer opacity to 0 percent:

Next, select the first text box, press Shift , hold down the Space bar , and drag it left until it is outside the visible rectangular frame. Ensure that you hold down Shift and Space to avoid the text box from actually going outside the frame. We need the text to remain within the frame for the transition to work.

In the image below, notice how the text appears outside the visible frame but is still within the Cover slide frame in the layers panel:

Repeat the process for the other text boxes, dragging them a little further each time to create variety in the transition. Then, select all text boxes from the layers panel and reduce their layer opacity to 0 percent.

To finish the transition, go to Prototype from the right sidebar. Select the left frame and go to the blue circle that appears on the right side of the frame.

A plus sign will appear. Click on it and drag the arrow to connect it to the right frame:

In the dropdown menu that appears, click on Instant and choose Smart Animate . Select Ease in from the animation options. Adjust the timing to 1000ms. You can leave everything else in default.

Test your transition by clicking the Play button. If you’re happy with it, return to Design mode to continue working on your slides.

Step 6: Add more slides

We’ll use a different transition style from the second frame to the third. The image will shrink, and the text will go outside the frame. To achieve this, rename the second frame to Slide 1 . Duplicate it ( Ctrl/Cmd + D ) and you’ll have Slide 2 .

Go to the new frame and move the text boxes outside the visible frame (just like we did previously). But this time, move them to the right. Then, set their opacity to 0 percent:

To achieve the image shrinking effect, click on the image, hold down Shift , and drag the bottom-left resizing handle inwards until it’s about 1/6th of its original size. Next, set the image layer opacity to 0 percent. You’ll have a blank canvas to add all the elements you wish to include in Slide 2.

Add your heading and body text to Slide 2. Also, add an image the same way you did for the cover slide:

Let’s add some animation to create a smooth transition from Slide 1 to Slide 2.

Select the image in Slide 2, and copy it using Ctrl / Cmd + C . Go to Slide 1 and paste the image ( Ctrl / Cmd + V ). Resize the image to 1/6th its original size and set the opacity to 0 percent. Move the image to the back using a shortcut ( Ctrl / Cmd + [ ):

This action will create a zooming transition effect.

To animate the text in Slide 2, select all the text boxes and group them ( Ctrl / Cmd + G ). Copy this group and paste it into Slide 1. Move it to the right of the frame using the dragging technique ( Shift + Spacebar ) we used for the cover slide. Set its opacity to 0 percent.

Next, go to Prototype . Connect Slide 1 to Slide 2. By default, Figma maintains the attributes of the previous transition. Leave it as is:

You can play the prototype to ensure that everything works as it should. Once everything is in place, we can move on to the next step.

Step 7: Add mockups

As a designer, your presentations will often involve mockups of your design. So, let’s go over how to add mockups to your presentation slides.

Go back to Design mode and add a new frame. This frame will be Slide 3 . Next, create a mockup. You can use Figma plugins like Clay Mockups 3D , Mockuuups Studio , or Vectary 3D Elements to generate quick mockups.

Paste your mockup inside the new frame and resize it to fit:

To ensure a smooth transition, copy the mockup and paste it into Slide 2. Scale it to about 1/6th its original size. Position it in the middle of the frame, reduce its opacity to 0 percent, and send it to the back. This action will cause the mockup to zoom in when presenting.

Go to Prototype mode and connect Slide 2 to Slide 3. Leave the animation settings as is.

Step 8: Label mockups

Duplicate the mockup frame. This new frame will be Slide 4. Use the Text tool to add a title and description to explain the different features in your mockup. Group the title and description together and name it:

To connect the text to the feature it’s describing, draw a line with the Line tool (L) . While drawing, hold down Shift to keep the line straight.

Next, we’ll add an indicator. Draw a circle with the Ellipse tool (O) . Reduce the fill opacity to 50 percent and add a Background Blur of 20:

Group the line and indicator together and label it.

To add labels to the next feature in your mockup, duplicate the frame (Slide 4) and add another bullet point indicator and text. Repeat this process for all the features in your mockup, duplicating the frame each time.

Next, go to Prototype , connect the slides, and press Play to see if everything works correctly. If you’re happy with the slides, it’s time to wrap things up.

Step 9: Create the final slide

Once you’ve added all the information you need in your presentation, end the presentation with a final slide.

To do this, duplicate the previous frame to create another slide. Use the Text tool (T) to add a final word for your audience. Center the text vertically and horizontally.

Next, copy this text and paste it into the previous frame. Scale it down to about 1/6th its original size. Press K before scaling it to keep it formatted. Center the text vertically and horizontally. Reduce its opacity to 0 percent and send it to the back:

Go back to the final slide. Use the dragging method to move all other elements except the “Thank you” text outside the visible frame. Drag them in different directions for a more dramatic effect:

Finally, go to Prototype and connect the final frame to the one before it. Click Play to see the finished presentation.

Step 10: Share your work

After all the hard work, it’s time to share the finished project with your audience. So, here, we’ll be going over how to Export your work, Share it with your team, and Present it to an audience.

To export your slides as a single PDF file, go to File > Export frames to PDF . Figma will export every frame as a PDF page in your slide deck. Your slides will be organized from left to right and top to bottom, meaning the leftmost frame will be the first PDF page, and so on. Note that if you export your slides as PDF, there’ll be no animation effects.

To share your work with others, click the Share button in the top right corner of the Figma interface. Enter an email address and click Invite , or simply copy the shareable link and send it to anyone you wish to invite to the file.

To present your work in Figma, click the Present button in the top right corner or press Ctrl/Cmd + Alt + Enter . Once in presentation mode, switch to fullscreen by pressing the Spacebar .

Voilà, that’s how you create and share a presentation in Figma.

But is Figma really the ideal tool to use for your next presentation? Let’s help you decide by analyzing the pros and cons of using Figma for presentations.

Pros of creating presentations using Figma

Real-time collaboration.

Figma is great for team projects as it allows multiple users to collaborate in real time, promoting teamwork and efficiency.

With Figma, you can invite up to 500 collaborators to your file (200 can have editing access). Now, that’s a large community of collaborators.

Easy export and sharing

Figma allows you to share your presentations in different formats, such as PDFs, JPGs, or interactive prototypes.

Compatible with multiple platforms

A major pro of Figma software is its ability to work smoothly across various operating systems (Windows, macOS, Linux) and browsers, ensuring compatibility and promoting accessibility.

Access to a plugin library

Another great benefit of using Figma for presentations is the easy access to a library of plugins that can speed up your workflow.

Time efficiency

Figma allows you to duplicate and reuse design components, which comes in handy when you want to create multiple slides with similar layouts.

These are just some benefits that make Figma a powerful tool for creating collaborative and highly accessible presentations. But as we know, every tool has its downsides, and Figma is no exception. So, let’s examine some disadvantages of using Figma to create presentations.

Cons of creating presentations using Figma

Learning curve.

To use Figma efficiently, you must know your way around the interface. For anyone using the software for the first time, there might be a learning curve that can slow down the creative process. This can be an issue if you need to build a presentation with people who have no experience with Figma.

Limited offline access

Although Figma offers an offline mode, there is a limit to the features users can access. This limitation can be an issue when you need to edit or access your presentation from areas with limited internet connectivity.

Design-focused, less presentation-focused

Figma is primarily a design software best suited for designing user interfaces, so it might lack the advanced features you’ll find in dedicated presentation software.

Needs enough RAM and a decent graphics card

For Figma to run smoothly, it requires the right amount of RAM and a decent graphics card. So, if you’re using an older computer, you might not have the necessary specs to run this software.

Now that we’ve analyzed the pros and cons of using Figma, we believe you have enough information to decide if it’s the right tool for your next presentation. So, let’s wrap things up, shall we?

Figma is a powerful and versatile collaborative design tool that you can use to create stunning presentations. Its prototype feature allows you to create unique transitions that make your presentations stand out.

Although there are some drawbacks to using Figma, such as the learning curve involved, the tool has many benefits that make it worthwhile, especially since it’s what many of us designers use in our day-to-day. So, if you’re looking for a tool that you can use to share your ideas in a visually appealing and accessible way, Figma is a great option.

LogRocket : Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Framer vs. Webflow for no-code website building

No-code builders have been consistently growing in popularity. In this blog, I discuss the ins and outs of Framer and Webflow to help you pick the best for your needs.

Using a conceptual model in UX

A conceptual model can help break complex systems into understandable mechanisms. In this blog, I share you can use one as a UX designer.

Triadic color scheme: Theory, examples, and applications

Choosing a triadic color scheme can help us create a theme for our product that really pops or is very attention-grabbing.

What does a brand designer do?

A good brand design gives a brand its edge, and leading this effort is a brand designer. In this blog, I share all ins and outs of this creative career path.

Leave a Reply Cancel reply

• Tour the interface
• Create designs
• Build design systems
• Create prototypes
• Import and export
• Work together in files
• Use AI in Figma Design
• Inspect designs
• Turn designs to code
• Dev Mode across your org
• Work on boards
• Run meetings
• Use AI in FigJam
• Create and edit slides
• Present slide decks
• Use AI in Figma Slides
• Use the Community
• Creator resources
• Visit Community
• Work across Figma
• Integrations
• API documentation

Learn about the new features we announced at Config 2024, from AI to Figma Slides!

For everyone

• Manage settings
• Change preferences
• Use the file browser
• Manage files and projects
• Sharing and permissions

For administration

• Manage seats
• Manage your plan
• Pay for Figma
• Manage a team
• Login and authentication
• Deploy Figma
• Members and guests
• Libraries and resources
• Billing groups
• Security features

Find out more

Level up your Figma skills with these comprehensive skill-based courses.

Get hands-on experience in Figma with these practical bite-sized projects.

Explore tools and features by watching and following along with these expert-led video tutorials.

Get solutions

Troubleshoot

Get help with common issues and troubleshoot unexpected behavior.

Work with support

Submit a bug report, get help collecting log files, and find your system information.

Common questions

Get answers to frequently asked questions.

Figma Community Forum

Ask the community, share ideas, and connect with other Figma users.

Play your prototypes

If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →

Before you start

Who can use this feature

Users on   any team or plan can play prototypes

Anyone with can view access to a file or prototype can play prototypes. Anyone can adjust view options in presentation view.

Prototypes replicate how users might interact with your designs, allowing you to see and test how they work before moving to development. In Figma, build prototypes directly on the canvas. Then, play them to see prototype interactions and animations in action.

Before playing a prototype, prepare the design so that the prototype plays as desired.

Then, choose how you’d like to play the prototype:

• Preview : Play the prototype directly in the editor, with an inline preview. See how the prototype works as you build it—all in the same tab.
• Present : Play the prototype in presentation view, in a separate tab. Share the prototype with others or see how it looks on a specific device.

Prepare prototypes for play

The way frames and connections are set up on the canvas impacts how prototypes are played:

• The design must be within a frame in order to Preview or Present .
• If there are  prototyping connections , Figma will only display those frames with connections while playing the prototype. Click through each screen or interact with any hotspots .
• If there are no prototyping connections, you can navigate through frames from the current page.
• Set up a flow starting point to determine where the user’s journey should start. You can set up multiple flow starting points.
• For presentation view, set the prototype’s device type, starting point, and background color in the prototype settings .

Once you’ve prepared the prototype for play, choose to Preview or Present your prototype.

Preview a prototype

Use inline preview to play your prototype directly on the canvas alongside your design. With inline preview, any design changes are immediately reflected in the preview so you can see changes in real time. When you click another frame on the canvas, the preview jumps to that frame.

To open inline preview, do one of the following:

• Click  Preview in the top toolbar
• Clicking the preview icon on any flow starting point
• Use ⇧ Shift Space  on your keyboard

From inline preview, you can:

• Use the left and right arrows to navigate back or forward through the prototype.
• Restart the prototype from the last selected frame on the canvas. You can also press R to restart.
• Open the overflow menu to choose from different scaling options for your prototype.
• Open the prototype in presentation view in a new tab.
• Click the X to close the inline preview.
• Resize the preview by clicking and dragging the edge of the preview window. Hold ⇧ Shift to scale it proportionally.

Overflow menu options

The overflow menu for the inline viewer contains different scaling and view options for your prototype. The options available will vary depending on whether you have a prototype device selected. Some of these options overlap.

Scale the prototype so it fills the width of the display. Available only if the prototype device is set to No device or Presentation on the page.

The contents of the prototype will resize and re-layout as the prototype viewer resizes according to the constraints and auto layout properties applied to the design. This allows you to view designs at different window sizes and check their responsive behavior. In order for Responsive to work, there must be constraints and auto layout settings applied to the design.

Follow prototype

The selected frame on canvas updates to mirror the current frame in inline preview. As you navigate through the prototype in preview, your canvas selection and position will follow.

Resize window/device to 100%

Resizes the viewer or device to 100% of the frame size.

Respect aspect ratio

The inline viewer window resizes to match the aspect ratio of the current frame. Available only when a prototype device is set to No device .

Show device frame

Show or hide the physical device frame. Available only when a prototype device frame is selected.

Present a prototype

Use presentation view to play your prototypes in a new tab.  you can interact with hotspots or enter keyboard shortcuts within your prototype. 

To open a prototype in presentation view, click Present in the toolbar, or use keyboard shortcut:

• Mac: ⌘ Command ⌥ Option return
• Windows: Control Alt enter

Figma will present the device against the Background Color you selected.

Tip: Want to share your prototype with others? Learn more about sharing prototypes →  

Presentation view layout

Presentation view contains various options you can choose from to interact with a prototype.

From the left side of the toolbar, you can:

• Click the Figma logo to go to the file browser
• Click to show and hide the left sidebar, where you can select flows and view their descriptions.
• Click to enter comment mode and add comments to the prototype.

From the right side of the toolbar, you can:

• Click the arrow next to your avatar and choose to spotlight yourself or follow a presenter
• Share the prototype
• Open the options menu to select different settings for the prototype.
• Click to enter fullscreen mode.

From the bottom of the presentation view, you can:

• Use the left and right arrows to move between screens.
• Use the device switcher to switch to a similar device and access other scaling options. Available if a device frame is selected for the page.
• Click Restart  or press  R to return to the starting point of the current flow. If there are no flows, it will return to the first frame on the canvas.

Options menu

Click to open the options menu for additional settings.

The following options are always available:

Enable Figma shortcuts

Enable Figma keyboard shortcuts , such as:

• C to open comments
• F to enter fullscreen

When enabled, users can navigate through prototypes with keys, such as the left and right arrows on their keyboard.

When disabled, users can only navigate through prototypes by clicking through hotspots or clicking the left and right arrow icons at the bottom of the screen.

Show hints on click

Hotspot hints help guide users through a prototype. They show where the Hotspots are in the prototype. When a user clicks outside of a hotspot, Figma highlight any clickable areas with a blue bounding box.

Accessibility settings

Accessibility settings help those with disabilities access and interact with a prototype. For example, those with visual impairments can adapt a prototype for screen readers and other assistive technologies.

You can choose to show or hide Figma's prototype UI in presentation view. This is useful when you're testing a prototype and want to avoid any distractions.

When you hide the Figma UI in presentation View, Figma will:

• Hide the toolbar and footer on your current view.
• Hide the flows sidebar if Show sidebar is checked in the Options menu.
• Update the prototype URL with a &hide-ui=1 variable.
• Remind you how to restore the toolbar and footer.
• Allow you to copy the updated share link. If you share this link, Figma will hide the toolbar, footer, and sidebar for any other viewers.

Note: Adjusting some settings in the  Options  menu will update the URL for sharing the prototype. Make sure to copy the new URL if you make any changes.

The options menu also contains content and device scaling options to determine how your prototype or device frame displays and resizes. The types of scaling options available depends on whether you have a prototype device selected:

• Without a device frame ↓
• With a device frame ↓

Scaling options without a device frame

If you don’t have a prototype device selected on the page, the options menu provides the following content scaling options:

Actual size (100%)

Display the prototype based on the full size of the design frame. Depending on the frame and the screen size, this may result in a cropped prototype.

Scales the prototype so it fills the width of the display.

Fit width and height

Shrinks the prototype so that both the width and the height fit within the viewer window. It will not scale up the prototype.

Fill screen

Scales the prototype horizontally and vertically so that it fills the entire display. It will not overflow any content of the design.

Depending on the size of frames, the prototype will default to certain scaling settings and different options will show in the Recommended and Other scaling options sections of the options menu:

Scaling options with a device frame

With device frame, the options menu provides Responsive and Fixed size scaling options.

Shows the design at 100% within the device. Depending on the frame and device size, this may result in a cropped prototype. You can control the size of the device with device scaling options.

If you have a prototype device selected, the device switcher becomes available at the bottom of presentation view, which allows you to choose prototype devices similar to the current one. It also has device scaling options for you to choose from:

Fit device on screen

Shrink the device frame so that it fits within the viewer window.

Zoom device to fill screen

Scale the device so that it fills the entire display.

Show device at 100%

Display the prototype at 100% of the frame’s size. Depending on the frame and the screen size, this may result in a cropped prototype.

If a prototype device is selected, this option allows you to show or hide the physical device frame.

Tip: Press Z on your keyboard while in presentation view to move between scale options.

Frame ordering and navigation

When playing your prototype, you can press  → ,  Space , or  N  to navigate to the next frame, and  ←  to navigate to the previous frame. This setting is enabled by default.

The next and previous frames are determined by the frames's position on the canvas or by the prototyping connections you've created.

Prototypes with a flow starting point

If your prototype has a starting point , Figma will create a "history" of frames you've visited when viewing the prototype.

• ← will go to the previous frame, if one is available.
• → will navigate to the next frame. If there is no history—like after using ← —then it will navigate to an adjacent frame you haven't visited.

Prototypes without a flow starting point

If a prototype doesn't have a flow staring point , Figma orders frames based on their co-ordinates in the canvas. First, by their x co-ordinate from left to right, then their y co-ordinate from top to bottom.

If the y co-ordinate is offset in any way, then frames may appear out of order. To fix, you can set horizontal alignment for each row of frames to align-top.

• ← will go to the previous frame if one is available.
• → will navigate to the next frame. First by x co-ordinate, then y-co-ordinate.

Learn how to set a device and starting point →

25+ Best Figma Mockups (Devices, Print, Products & More)

Figma has revolutionized the design world with its real-time collaboration and seamless design process. However, presenting your designs effectively often requires high-quality mockups that showcase your work in a realistic context.

In this post, we dive into a collection of the best Figma mockups available, that provide a tangible way to visualize your designs, making it easier to communicate ideas, gather feedback, and refine your projects.

From responsive web layouts and mobile app interfaces to branding materials and product showcases, our collection covers a wide range of use cases to fit any project’s needs. These mockups are designed to be easily customizable, allowing you to integrate your designs effortlessly and bring your concepts to life with stunning realism.

Have a look.

2 Million+ Figma Graphic Templates & More With Unlimited Downloads

Download thousands of Figma graphic templates, UI kits, and web templates with an Envato Elements membership. It starts at $16 per month, and gives you unlimited access to a growing library of over 2,000,000 Figma templates, design assets, graphics, themes, photos, and more.

Coming Soon Page

Social Network Template

Figma & psd.

Startup Website

Figma template.

Pricing Table UI

Course Template

School ui kit.

Multipurpose Template

Explore Figma Templates

MacBook Pro Vector Mockup for Figma

This Figma mockup template allows you to showcase your designs seamlessly. It offers a high-quality vectorized MacBook Pro device mockup, compatible with Figma, Adobe XD, and Sketch. Its superb detail perseveres in every zoom, making your work look phenomenal.

MacBook Air Figma Mockup

Another handy Figma mockup that’s ideal for presenting your designs. With versions available for Adobe XD, Sketch, and Figma, it’s a versatile solution that retains its quality even when zoomed in on. It features a minimalist design of the MacBook device.

Samsung Galaxy Z Flip Figma Mockup

This is a realistic, high-quality Figma mockup for introducing your designs on the Samsung Z Flip. Available in Adobe XD, Sketch, and Figma versions, this mockup offers vector-based detailing, ensuring quality isn’t compromised when zooming.

iPhone 15 Pro Figma Mockup

This is a dynamic and visually stunning Figma mockup for the latest iPhone 15. It offers 44 unique scenes in all official iPhone 15 Pro colors. The mockup comes with a high resolution of 9600 x 6000px at 300dpi ensuring crystal clear images. You can easily place your designs through smart objects and enjoy fully customizable backgrounds and organized layers.

iPhone 15 & 15 Plus Scene Generator

This iPhone 15 Figma mockup has a highly customizable design, comes with a variety of background and color options, and provides various view perspectives. All elements are editable and it features a super high-resolution, enhancing the modern and minimalistic design of the iPhone 15 mockup.

Dark & Light Browser Window Mockup

This is a fully vectorized Figma mockup for the Safari browser that serves as an ideal tool for presenting your web design projects. Available in 11 different file formats, including Adobe Illustrator, Adobe Photoshop, as well as Figma, it features preset settings to facilitate easy scaling. This mockup stands out due to its dual color theme, pixel-perfect layouts, and clean modern style.

Chrome Browser Window Website Mockup

This is a seamless, vectorized model of the Chrome browser specifically designed for presenting web design projects. Compatible with Sketch, Adobe Photoshop, Adobe XD, InVision Studio, and Figma, it’s highly adaptable and easily scalable. You can customize every button, icon, or line in both traditional Light Gray and Dark variations, making it ideal for precise design plotting and screen-to-print transitions.

Macbook Line Figma Mockup

A superbly detailed Figma mockup that allows you to exhibit your designs in an engaging, professional manner. Crafted in Adobe XD, Figma, and Sketch, it comes in three colors, is fully vector, and maintains its high quality even when zoomed in.

Credit Card Mockups for Figma & Sketch

This is a valuable Figma mockup for those working with financial product designs. It includes 12 pixel-perfect, layered, and customizable credit card designs that are also available in PNG and SVG formats for easy integration into your UI, app, or website design. The careful organization and naming of layers allow for seamless navigation.

Film Frame Mockup for Figma

A sleek, modern Figma mockup perfect for enhancing your poster designs and photographs. With realistic lighting and shadows, it gives your designs a professional finish, perfect for websites, social media, or any online platform. The download includes a PSD file with a Smart Object layer and a versatile JPEG file.

iPhone 15 Pro Realistic & Clay Mockup

Provided in Figma format, this bundle offers a gorgeous way to showcase your designs or projects. It includes all official iPhone 15 Pro colors and unlimited color options for the clay versions of the device. Notable features are its high resolution design (9600 x 6000px – 300 DPI), realistic shadow, and customizable, separate background.

Pink iPhone 15 Figma Mockup

A collection of high-definition Figma mockups that can significantly enhance your project’s aesthetics. It features 10 unique pink iPhone 15 mockups with easily customizable layers in both .png and .psd formats.

3D Hand Holding Phone Mockup for Food Industry

This is a versatile creative asset ideal for showcasing designs related to food businesses. This high-definition 3D mockup bundle includes nine variations of a hand holding an iPhone, suitable for landing pages, apps, presentations, and more. It consists of .png, .psd, .blend, and .fig files, all fully editable in Blender and Photoshop.

3D Hand Holding Phone Mockup for E-commerce

A dynamic Figma mockup kit for showcasing eCommerce designs. Easily compatible with Blender and Photoshop, this package supplies a high-resolution 3D hand holding an iPhone, in nine different variations. An ideal tool for enhancing landing pages, apps, presentations, or other projects, it’s simple to use as well.

3D Man Holding Phone Figma Mockup

Another creative 3D Figma mockup that is ideal for showing off your digital projects. With this mockup, you can easily customize colors in Figma, modify shapes and textures in Blender, and edit in Photoshop. It includes blend, fig, png, and PSD files and is suitable for a range of uses like apps, games, and presentations.

3D Woman Doing Business Presentation Mockup

Featuring a 3D-modeled businesswoman, this Figma mockup is a high-quality scene perfect for any project. Whether it’s for landing pages, apps, or presentations, this easy-to-customize mockup from a Figma file adds an elevated touch. It includes various files (.png, .blend, .fig, .psd) and is fully editable in Blender and Photoshop.

Apple Pro Display XDR Figma Mockup

This is an easy-to-use Figma mockup for showcasing your designs on the Apple display. The mockup, available in Figma, Adobe XD, and Sketch versions, offers detailed and full vector quality—keeping your visuals sharp even when zoomed in.

iPad Pro Figma Mockup

This iPad Pro Figma mockup is available in two distinct colors and it’s an ideal mockup for showcasing your creative designs. Developed professionally in Adobe XD, Figma, and Sketch, it renders detailed, vector-quality images that maintain their clarity even when zoomed. This mockup is perfect for presenting your work on the latest iPad Pro.

iWatch Line Figma Mockup

A dynamic and detailed Figma mockup designed for showcasing your Apple Watch app designs. With versions available for Adobe XD, Sketch, and Figma, it allows you to present your designs professionally. The full vector design ensures excellent quality even when zoomed in.

Droplet – Brand Identity Mockup Kit for Figma

This Figma mockup kit offers a comprehensive set of assets for creating sleek, professional branding representations. Compatible with Photoshop, Sketch, Adobe XD, and Figma, the package features a multitude of mockup styles including overhead, perspective, and minimal, and a range of objects like A4 Letter Head, Envelopes, and Business Cards.

Starry Night – Brand Identity Mockup Kit for Figma

A dynamic and versatile Figma brand kit mockup package that includes four different versions: Photoshop, Sketch, Adobe XD, and Figma. It offers various mock-up styles and objects such as A4 letterheads, folders, envelopes, business cards, and more. It’s designed for easy customization using smart objects, symbols, and components.

Material Triangle – Brand Identity Mockups for Figma

Material Triangle is a versatile brand identity mockup kit compatible with Photoshop, Sketch, and Figma. This kit offers a variety of styles (from overhead to perspective) for an array of objects (A4 letterhead, envelope, business card, etc.) to help create a cohesive brand identity.

Free Figma Mockups

Free business card mockup for figma.

This is one of the most beautiful, realistic-looking mockups on our list. It’s perfect for showcasing your business card designs in a professional environment. It comes in Figma, Sketch, and Photoshop formats.

Free Dark iPhone Pro Figma Mockup

You can download this mockup for free to show off your app designs in a bold and stylish way. The dark scene and the design of this Figma mockup will make your designs look much more attractive.

Free iPhone 15 Figma Mockup

This is a collection of free Figma mockups that include multiple versions of the iPhone 15. There are several color variants of the iPhone 15 in this bundle featuring fully editable backgrounds.

Free Stylish iPhone 15 Mockup

Grab this free iPhone 15 mockup to showcase your app screens and designs like a pro. The mockup features a close-up view of the device with a unique background. It’s available in Sketch, Figma, and Photoshop formats.

Free iPhone and Watch Figma Mockup

This is a clay-style mockup of the iPhone and the Apple Watch. It comes in Figma and Photoshop formats, allowing you to easily customize and showcase your designs using the creative mockup scene.

Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups

Share this article

Step 1: Create a Horizontally Scrollable Frame

Step 2: create an artboard transition, step 3: retreat, step 4: create a (relatively) complex timed animation, prototyping with figma is fun, right, faqs about figma prototypes.

Prototyping is the process of turning a static mockup into an interactive and dynamic mockup (better known as a prototype ). Bringing a static mockup to life is without doubt one of the most — if not the most — exciting step in the design workflow.

It’s also super important that developers understand the design’s user flow, and how it should feel and function. What better way to do that than by using Figma , the best design tool in the world according to the 2020 Design Tools Survey ?

Prototyping with Figma is easy and enjoyable once you know how it works. Start off by duplicating this static mockup (click on Series of Interactions and then Duplicate to my drafts ), and then throughout the tutorial we’ll add more and more functional fidelity. Your local copy should look like this:

Note: I’m assuming that you have at least a small amount of experience with modern UI design tools such as Figma or Sketch.

Let’s start with Artboard 1 , making the selection of cards that overflow the viewport horizontally scrollable. This is one example of how we can make our mockups dynamic without having to create what Figma calls “Connections”. Connections direct us to new Artboards, but that’s not what we’ll be doing in Step 1.

Start by selecting Cards from the Layers Panel (left sidebar), and then from the Design Panel (right sidebar this time) change the Group option to Frame using the dropdown.

I won’t dive into this too much, but the main difference between a Group and a Frame is that Groups wrap their children tightly, whereas Frames can be any size. This means that:

• grouped children scale with the Group, whereas Framed children are a little more stubborn (a feature, not a bug)
• framed children become aligned relative to their Frame, whereas Grouped children are still relative to their Artboard
• frames can have overflowing content that can be scrolled horizontally or vertically (this is what we’ll be attempting)

Wait, does this mean that Artboards are actually Frames? Indeed: what other UI design tools call Artboards, Figma calls Frames . This is likely because, in Figma, Frames can be nested within other Frames, which is slightly different from what Artboards do in other tools like Sketch, Adobe XD, and so on.

Switch to Prototype mode ( ⌥ + 9 ) where the Overflow behavior setting will now be available, and then change the dropdown option from No scrolling to Horizontal scrolling .

Now, you’ll notice that the shadows are oddly cut off by the newly converted Frame, but this is actually standard behavior for overflowing content, and it can be fixed relatively easily.

Since the shadow’s blur variable is 30 and Frames can be any size, we’ll need to resize the Frame to allow for an extra 30 spacing around its edges. It should be easy enough to Resize ( shift + ⌘ + ↑↓←→ ) and Nudge ( shift + ↑↓←→ ) the objects accordingly.

By the way, you might notice (if you click on the Frame) that the cards and their spacing can be rearranged quite easily. This isn’t relevant to the tutorial specifically, but still awesome.

For this next step, let’s try an interaction that connects one Artboard to another Artboard, otherwise known as a “Connection”.

Select the Cards frame (yes, the entire frame, since it doesn’t really matter which card ends up being tapped right now). Then, assuming that you’re still in Prototype mode, drag the Connector (that is, the bordered circle that shows a + when hovered) into Artboard 2 . These Artboards are now connected.

After dropping the Connector onto Artboard 2 , the Connection settings (which should now be revealed), should look like this:

• “On tap” (the interaction will be triggered by tapping)
• “Navigate to” / “Artboard 2” (tapping will cause the user to navigate to Artboard 2)
• “Push” / “←” (“Artboard 2” will push itself onto the screen from the right)
• “Ease Out” / “300ms” (over the course of 300ms, the animation will start off fast and slow down towards the end)
• Check the “Smart animate matching layers” checkbox (common elements such as the back button and the navigation will not animate if left unchanged)

Want to see what we’ve done so far in action? Click the “Present” button (i.e. the play icon) in the top-right corner. If you’re using Figma in a web browser, this opens a new tab.

Tip: hit R to reload the prototype.

Before we move forward and dive into more complex Connections, let’s make sure that we can return to Artboard 1 (or whatever Artboard we came from). Create another Connection, this time originating from the back button(s) with the following settings:

Animation settings won’t be available this time, since the options are fixed. Specifically, the transition will animate in reverse. For instance, if we transitioned into the Artboard with “Push ←” then we’ll transition back out with “Push →”.

During this next and final step, we’ll create a singular animation that actually spans across several Artboards and individually animates several objects rather than the entire Artboard. Specifically, we’ll rotate the expanded card to the left upon the click of a button, and then set up a timer to rotate it to the right before returning to its original state.

Essentially, a swinging animation.

Select the Button object on Artboard 2 and establish a Connector that connects to Artboard 3 . Use these settings:

• “Navigate to” / “Artboard 3”
• “Smart animate”
• “Ease Out” / “300ms”

Note: as we’ve chosen “Smart animate” as the animation type, layers that exist in both Artboards but are visually different will transition smoothly, but only if the relevant layer structure and layer names remain consistent. If they don’t remain consistent, Figma will fail to understand that the layers are one and the same, and they won’t animate correctly.

From the “Design” Panel, you should see that I’ve made the button’s background #FF0000 and rotated the card to the left.

But how do we then rotate it to the right after the 300ms “rotate left animation” has run its course? Well, that’s where timed animations are needed. Repeat the steps above, this time connecting Artboard 3 to Artboard 4 with “After delay” / “300ms” being the only difference. To complete the interaction, repeat once more connecting Artboard 4 to Artboard 5 .

This is how we run animations consecutively. In our case, the initial tap interaction activated a “rotate left animation” and then the following animations happened automatically on a timer.

We’ve now reached the end of this tutorial. The Figma file shouldn’t really look any different (besides a few a visible Connectors when using Prototype mode). However, it should function very differently in Present mode. If you didn’t follow along with the tutorial, check out the “Dynamic” version, where you can test the final result.

Pretty cool, right?

While there are certainly styles of animations and types of interactions with more complexity that we could visualize, what we’ve looked at here should cover about 99% of what you’ll need to know. When it comes to interactions, simple is better anyway!

For animations that require more complexity, there’s a neat Figma Plugin called LottieFiles that’s definitely worth checking out.

And for more on Figma, you can also read about wireframing with Figma .

A Figma prototype is an interactive representation of a design created using Figma, a collaborative design tool. It allows designers to showcase and test the functionality of their designs, providing a more dynamic and user-focused experience.

To create a prototype in Figma, design your screens or frames, then use the “Prototype” mode to link these frames together, defining interactions, transitions, and animations to simulate the user experience.

Yes, Figma allows you to preview your prototype directly within the Figma editor. Simply enter the prototype mode and click the “Present” button to experience your design interactively.

You can share your Figma prototype by generating a shareable link. Go to the “Share” menu, adjust sharing settings, and copy the link. Anyone with the link can view and interact with your prototype.

Yes, Figma supports comments on both designs and prototypes. Share your prototype link, and viewers can leave comments directly on specific elements or areas of your design, facilitating collaboration and feedback collection.

Previously, design blog editor at Toptal and SitePoint. Now Daniel advocates for better UX design alongside industry leaders such as Adobe, InVision, Marvel, Wix, Net Magazine, LogRocket, CSS-Tricks, and more.

How to Create and Add Mockups to Your Figma Designs Using Plugins

Your changes have been saved

Email is sent

Email has already been sent

Please verify your email address.

You’ve reached your account maximum for followed topics.

I Tried Macro Photography With My Smartphone: Here Are My Best Shots

How i get the perfect white balance in my smartphone photography, don’t believe these 7 myths about smartphone photography.

If you’re a designer who likes to showcase your designs by using mockups, it can be easy to create them in Figma.

Instead of saving your Figma designs and moving to another program to create a mockup, you can easily download mockup plugins in Figma. There are many plugin options in various styles, but they’re all simple to use and integrate into larger designs.

How to Find and Download Figma Plugins

Downloading and installing a plugin in Figma is the same whether you’re using the app or the browser version. From Figma’s browser homepage , click Community > Plugins and Widgets , and search through the list or use the search bar.

From Figma’s app , the homepage will offer the same option as the browser to get to the community page. But if you’re on a design page, you can click the Figma logo, then Plugins . If you’ve already got plugins installed, you’ll see them listed here.

To find more, choose Browse Plugins in Community. This will take you to the community page within the app where you can search for other plugins.

On the community page, you’ll find a small blurb for each plugin, date of the last update, and how often each plugin has been downloaded. For more information about each plugin—such as comments from users and usage guides—clicking its name will take you to that plugin’s information page.

Once you’ve found a plugin you’d like to download, click the blue Install button.

If you’re not sure what to look for, here are our top five favorite mockup plugins. There are many more, but it’s good to start somewhere.

Clay Mockups 3D

Angle mockups.

• MockRocket - 3D Mockups

Vectary 3D Elements

How to use mockup plugins in figma.

The process of installing plugins is the same regardless of the type of plugin you’re using, but there may be some differences in how they are used. That’s why it’s always best to read the individual plugin’s community page for extra details.

In Figma, you can choose ready-made frame sizes for specific screens, like the iPhone 13 or a large or small Android. You should create your design for its intended device size rather than trying to resize the designs later to fit your mockup, but some mockups will allow for slightly different sizes with no distortion.

You could even use a screenshot from your device, which will be perfectly sized for a mockup of the same device.

Mockups are usually for static screen designs, although you can make a video mockup in Photoshop . We're going to focus on Figma mockups for handheld devices, but you can create a mockup from scratch in Photoshop for other devices. With your screen design finalized, you can move on to creating the product mockup.

We’re going to show you how to use three of our suggested plugins: Clay Mockups 3D, Angle Mockups, and Vectory 3D Elements. Let’s jump right in.

With your design open, select the frame and then go to Plugins and choose Clay Mockups 3D . This opens a window where you can choose the device for the mockup. Your design should show on the screen of the mockup in this window.

You can change the angle of the mockup as well as the color in this window. Once you’re happy with how it looks, click Save as Image .

You can go back and change the color or other aspects at any time by clicking Edit Mockup under Plugin in the right-hand menu. Now you can add your plugin to larger designs like presentations or your portfolio.

To use Angle Mockups, you need to create an Angle account to download the mockup library from their website. On Angle’s website , click Sign In , which will bring up a popup where you can click Sign Up and add your details to make a free account.

Once signed in, to download the mockups, click Mockups > Download Sample . For a more comprehensive set of mockups, you can pay for premium access, but the sample offered with the free account is good enough.

Once downloaded, unzip the file. This contains samples you can use in Figma, Sketch, and Adobe XD, as well as some free wallpapers. Open Angle Figma . You’ll find two videos to help with using the mockups, as well as four sets of Figma files with various mockups.

To import the files to your Figma account, go to the Figma browser and click on your profile. You can access this from the app by going to File > Open File Browser . Drag and drop each Angle file into Figma. Then open the Angle file by double-clicking on it from the Figma browser page.

Find the device angle you want to use for your mockup and copy it ( C md + C for Mac or C trl + C for Windows). Paste it ( C md + V for Mac or C trl + V for Windows) into the same artboard as your main design.

In the layer palette, expand the layers of the mockup screen until you see the layer with a picture icon titled Place Artboard Here . Select that layer. Then go to Plugins > Angle Mockups and select your original design in the popup window.

This should show in the preview window in the angle of your mockup, but it will not show the device of the mockup. Click Apply and your screen should now be on the device mockup at the correct angle.

Vectary 3D works similarly to Clay Mockups 3D, although it has fewer options for device mockups as it also offers a variety of 3D assets. Open your design, select the frame, and go to Plugins > Vectary 3D Elements .

Find the mockup you’d like to use in the popup library, then click Load Frame . Once your design has appeared on the device’s screen, click Export Image .

Now you have a 3D mockup of your design on the device you choose. You can add it to another design easily.

Once your mockup is complete, you can save it as a PNG file to easily use in another design. Click File > Export . Select your chosen image to export, then click Export for your final PNG.

Add Realism to Your Designs With Figma Mockups

There are countless uses for creating mockups for your designs. With various Figma plugins, you can find a large variety of styles to work with that you can add to your presentations, portfolio, or create just for fun to show off your design work.

With a few differences in application, Figma mockup plugins are easy to access and use, so why not try it?

• Graphic Design

Design & art matters, let’s make it great!

Best Figma Mockup Plugins to Design Beautiful UIs and More! (2023)

Disclosure: This post may contain affiliate links. We get a commission if you decide to make a purchase through our links, at no cost to you. You can read more about our affiliate disclosure in our  privacy policy .

You’ve come to the right place if you’re looking for Figma mockup plugins and free templates . I’ve scoured the Figma Community to find the best mockups that I’d use myself. The ones listed below are my personal favourites.

You will undoubtedly find everything you need to create that incredible design project of yours. So, check them out!

Best Figma mockup plugins

• MockRocket – 3D Mockups
• Mockuuups Studio
• Artboard Studio
• ls.graphics Mockup
• All Hands Mockup Generator
• Vectary 3D Elements
• Angle Mockups

Best free Figma mockup templates

• 3D Icons Plugin
• Free Mockups for Dribbble Shot
• iPhone 14 & iPhone 14 Plus Mockups
• Brand Guidelines Design Kit
• Device Mockups Library (100+ devices)
• Mobile Chat Figma UI Kits | BRIX Templates

Best Figma Mockup Plugins

1. mockrocket – 3d mockup.

Want beautiful 3D gadget mockups? The MockRoket Figma plugin lets you make product videos, presentations and helps boost your portfolio with their stunning 3D device mockups…and you can animate them too !

MockRocket includes translucent backdrops, clay devices, shadows, custom colours, and reflections. You can choose from the newest 3D gadget models, including the iPhone, MacBook, and iMac.

Install MockRocket

2. Mockuuups Studio

The  Mockuuups Studio  plugin generates thousands of photography style mockups. These kinds of mockups are ideal if you need to present your marketing materials or visual contents as seen in real world application.

Just pick a device and choose from a diverse mix of mockups. You can filter mockup searches to fit your needs like colors, gradients, or even the latest version of Dell laptop display preferences.

This plugin works like a charm and saves you a great deal of  time. Their mockup libraries are constantly updated and have now grown to 2,800+ mockups.

Install Mockuuups Studio plugin  or,

Try Mockuuups Studio for free

3. Artboard Studio

Artboard Studio Mockups  allows you to create, animate and design your creative projects in your own scene with their extensive library of items.

From app and website mockups to T-shirt and book covers, you can choose from their carefully crafted mockup templates to fit your needs.

If you’re installing the plugin to use in Figma, follow the below step by step guide to get started quickly.

However, there’s one downside with the plugin. It has some artboard loading issue in Figma especially with larger mockups or components.

I would recommend using the Artboard Studio as a  standalone in-browser app  because it works much faster in a browser. You can create much higher resolution visuals and work with larger components or items there. You can then export them as images and import them into Figma.

The Artboard Studio app also allows you to collaborate and share projects/assets with colleagues and friends.

Install Artboard Studio plugin   or ,

Try Artboard Studio for free

4. ls.graphics Mockup

Mockup by ls.graphics has a big collection of device mockups, prints, branding and presentation mockups, UI/UX kits and other graphic assets.

The plugin features:

• Mockup Library – the library helps you to incorporate a mockup into your project fast and easy.
• Distort (Perspective) transformation – can be used with existing mockups.

Install ls.graphics Mockup

5. All Hands Mockup Generator

All Hands Mockups lets you show your designs in device mockups held in hands. This is an excellent way to present your work in hands interacting with devices.

To use it in Figma, just drop your designs into one of several hands in two easy steps. Then choose your frame, a hand and…you’ve got a lovely (and inclusive) mockup to show off.

Please keep in mind that this plugin does not yet support the Safari browser. Visit nappy.co/all-hands to see the entire collection of All Hands photos in high resolution.

Install All Hands Mockup

6. Vectary 3D Elements

Your 2D designs take on a 3D perspective when you use the Vectary 3D Elements plugin in Figma. Once the plugin is installed, you will get a 3D editor with numerous customization options and a layout library with lots predefined 3D mockups to work with.

Simply drag and drop your design from frame to mockup. Then customize the 3D elements with the editor, all within Figma!

Here’s an in-depth step-by-step guide to use the plugin.

Install Vectary 3D Elements

Gifmock for Figma is a tool that allows you to generate high-quality GIFs from layers in your Figma files.

From your static images and mockups, you can create GIFs in just 3 steps:

• Select layers to create GIF frames
• Adjust the delay and position of your frames with pixel-perfect precision

The plugin also features:

• Smart Cropping
• Pixel Preview
• Measurement
• Retina Support
• Per Frame Delay
• Frame Ordering

Gifmock securely stores your GIF files on your machine and not on the cloud.

Install Gifmock

8. Angle Mockups

Angle Mockups in Figma will show your designs in perspective mockups in full vector and in the latest devices!

This is a fantastic plugin for displaying your designs in device mockups in crisp vector graphics. Angle is also very simple to use. The plugin is free and does not require sign ups. If you want to use their massive library of 1000+ vector mockups, go to https://Angle.sh .

Install Angel Mockups

1. Animocks

Custom motions can be created with this Animocks pack. You can also customize the colours and both light and dark modes are available!

There are 2 plugins required for this set:

Get Animocks

2. 3D Icons Plugin

3D Icons by Vijay Verma has beautifully crafted open-source 3D icons available free for commercial or non-commercial use.

With this plugin, you can search for any 3D icons and use it for your designs, directly from Figma. Feel free to check out this open-source plugin on GitHub at: github.com/realvjy/3dicons-Figma

Get 3D Icons

3. Free Mockups for Dribbble Shot

This mockup is a must have for UI designers and fellow Dribbblers! There are more than 30 modern UI style kits available to help you nail that awesome shot on Dribbble and social media.

Get Free Mockups for Dribbble Shot

4. iPhone 14 Pro & iPhone 14 Pro Max Mockups

Here it is! The latest iPhone 14 and 14 Pro Max mockup templates with the Dynamic Island UI . Go ahead and use this free template to present your latest mobile apps design in Apple’s latest iPhone 14.

Also, get the Dynamic Island Animations template if you want to simulate your app’s notification and user interactivity in this pill-shaped UI.

Get iPhone 14 Pro & iPhone 14 Pro Max Mockups

5. Brand Guidelines Design Kit

This is the free version kit that can help you create and automate your brand style guides. It features a wide variety of brand styling templates like cover page, logo construction, hanging tote bag, business cards and lots more.

The full version with more supportive tools and templates is available on Gumroad . Be sure to check it out as well.

Get Brand Guidelines Design Kit

6. Device Mockups Library (100+ devices)

This mockup library has more than 100+ of iOS, Windows PC, iPhone and Android of device mockups in SVG format.  All devices include shadow and no-shadow variants. Get a copy if you’re looking to prototype your design on cross-platform devices.

Get Device Mockups Library

7. Mobile Chat Figma UI Kits | BRIX Templates

Do you want some ideas to get you started on designing a messaging app?

Then use this free Mobile Chat UI Kit Template, which has over 150 components. These free components can be duplicated, saving you hours of design time.

Get BRIX Mobile Chat template

Last but not least…

I hope you find the above Figma resources useful. Thank you for reading and now, go create that awesome design!

Hazel Lee is the designer and founder of YourDesignJuice.com, or YDJ™ in short. Since graduating from Staffordshire University back in 2002, she has worked as a full-time graphic and UI designer, then a freelancer before founding YDJ™ in 2017.

She now spends most of her time writing and posting inspirational contents on the YDJ Blog. She loves chocolates and enjoys connecting with other fellow creatives on social media.

See author's posts

You may also like:

15+ Best Online Motion Graphics Courses: Teach Yourself

11+ Best Craft Tables & Accessories for Your Crafting Needs (2024)

11+ Best Curved Monitors for Work from Home Users (2024)

Best Abstract Wall Art Ideas for Your Home (2024)

Leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

• X (Twitter)
• More Networks

How to make a presentation using Figma

• Por Sophia Silva
• 11/08/2022 às 11:39 atualizado em (11/08/2022 às 11:39)
• 14min de leitura

How about making a presentation with Figma ? Want to know what’s so special about him and what it can do for you?

A tool that has been conquering more and more people due to the numerous features it offers, and best of all, for free, Figma is an application that has everything you need to produce a high-level presentation.

But what is Figma?

One of the best tools online for UI Design, which means “User Interface”.

In other words, everything can be done online, through the browser, without the need to download any type of program or application.

And the best: collaboratively!

But what does a collaborative tool mean? We explain!

You can share any project – whether with clients, classmates, or co-workers – for them to see the progress, without having to export it to PDF or other file types.

At any time you can share the result of your project in presentation mode through a generated link.

Interesting, right?

Among so many tools already available and attested, why use Figma?

There are several points that need to be noted here. Despite being a relatively new tool, Figma has already proven itself to be effective and of a high level in terms of the final quality of projects.

But there are several advantages that you should analyze to decide whether or not to start using Figma.

Take a look at the list we prepared.

1. It’s free and online

This is one of the main advantages of the program, as it democratizes the creation, collaboration, and prototyping of countless projects every day, without the need to install anything on the computer.

In addition, your work is automatically saved in the cloud and a link is generated for each project in a simple, light, and fluid way. And designs can be shared even in real-time.

Although there is a paid version, which offers other features, the free version of Figma allows the realization of many advanced projects.

2. It has a plugin library

Among the best tools in Figma are Building wireframes, Table paste, and Lilgrid.

And even though having a library of plugins is not exclusive to Figma, they make any project much more elaborate.

While ready to use, these connectors provide your design with different layouts, import data in other formats, or organize information or elements.

3. It has the option of auto-layout

This facility is to make the designer’s life easier.

After all, one of the great challenges of anyone who creates a new design is, precisely, to maintain coherence between scales, proportions, sizes, or spacing of each or between design elements.

And this auto-layout function comes to make it easier, as it avoids misalignments and differences that could harm the aesthetics of your project.

4. Offers multiple integrations

Figma allows your projects to be integrated with other tools, such as Slack, Axure , and Confluence, in a very easy way and without bureaucracy.

This feature ‘offers more autonomy to the teams involved in the projects.

5. Gives access to the global community

This perk here will make your eyes sparkle!

Have you ever imagined being part of a community of designers, where it is possible to exchange knowledge, experiences, and tips?

That’s exactly what Figma offers. You become part of a worldwide network of professionals that grows every year and the advantages of this are numerous, starting with the fact that you will never be alone in this sea of design again.

6. Easy sharing

Because it is collaborative, Figma makes life much easier for those who use it.

Mainly because it makes it easier to share projects without having to export a PDF, make a print or upload files from the drive.

This is because you can share all your work by generating a link. And even those who have the link to your work can follow your project in real-time.

7. Allows collaborative work

Easy project sharing brings another facility to Figma: collaborative work.

That is, multiple people can access it at the same time.

Thus, it is possible for the entire team to work together.

And look how cool: Figma supports up to 500 contributors per file.

Of these 500, 100 can be editors.

As a result, Figma becomes the ideal tool for conducting workshops, design reviews, and brainstorming sessions, among others.

8. Weekly updates

Yes, almost every week Figma brings some updates to make your projects even better, more professional, and all this without being rocket science.

In addition, through the tool, you can keep up with new market trends.

And for those who want to improve their knowledge, this is all good, do you agree?

Inside Figma

Now that you know the advantages of Figma, how about learning how to make a presentation with this tool? Before that, however, see how to use this platform.

The first step is to create your account on the platform. The process is very quick and can be completed in just 4 steps.

As soon as you complete your registration, you can access it.

If you are going to form a team, that is, have people working together with you, just invite them through a link or via email.

The cool thing is that you can start a project from scratch or from the available templates.

In the meantime, if you have difficulty using Figma, you can explore the “Figma Tutorial” , a kind of virtual tour of the platform, which will guide you through the main settings, helping you to better understand Figma and how to explore it.

Did you learn to use this tool? So now, see how you can make a presentation using Figma.

Figma is an extremely powerful tool that can be used for the development of different types of graphic pieces, from simple images for publication on social networks to the development of high-fidelity application screens.

This is made possible by Figma’s prototype feature, which allows for various customizable transition options.

Not to mention that you can incorporate plugins that will make your audience even more involved and excited about what they see.

So, there are many ways you can make a presentation with Figma.

Learn how to make amazing presentations that will take your work and your reputation to the next level.

See in practice how to create impactful presentations using Figma

1. Frame configuration

The first step for you to make a presentation using Figma is to set up a presentation board.

To do this, open Figma and go to “New design file”.

Then click on “Frame Tool (F)” to start working on your frame, or choose one of the templates, which can be found on the right.

To do this, click on “Presentation > Slide 16:9”.

From now on, you will actually start creating your frame. Then set a background color.

However, remember that you can change the color whenever you want.

The goal here is to make all the frames stand out by changing the fill color.

Take the opportunity to rename your board by double-clicking on the blue title in the upper left corner.

2. Add the text

To add texts to your board, just use “Text Tool (T)”.

You can set your text preferences in the “Text on the right” menu.

A tip: Figma uses Google fonts, so get to know them to choose the best combinations.

Finally, use separate text boxes when using separate lines, with only one or two words per line.

3. Time to place the images

It’s time to start bringing your board to life. Choose a photo – which can be a stock photo or one that you can take just for that.

Then draw a rectangle with the “Rectangle tool (R)” to add an image.

Your photo will be added according to this format.

After that, just click on this rectangle and go to “Fill” , then click on the colored frame.

Then go to “Solid” > Image > Choose Image” to find your image.

Found? Go to “Open”.

When hovering over the image, it will reveal 4 white circles. Click and drag a circle inwards to round the corners of the image.

Now it’s time for you to arrange the circle layers so that the image is on the back and the text is on the top layer.

To make this happen, you have two options: dragging the layers in the layers panel or using “Cmd/Ctrl + [“ to send a layer back or “Cmd/Ctrl + ]” to bring a layer to the front.

4. Time to create the first transition of your board

After following all the steps above, it’s time to create your first transition in your presentation using Figma.

And this will open the image, allowing the title text to slide into the frame.

Simultaneously, select the first frame and press “Cmd/Ctrl + D” to duplicate it.

To reduce the image scale, simply reduce the height attributes in the “H” box to approximately 150, leaving a horizontal slit in the image.

This process should be done in the frame on the left.

Then, select both images in the frames, clicking “Option + V (Mac) or Alt + V (Windows)” to center it.

To complete the image transition, select this photo on the left.

5. Attention to opacity

Afterward, you need to change the opacity to 0% by clicking the menu on the right in the box next to “Pass Through” under “Layer”.

This step is important because it will make the image invisible before transitioning and opening.

Then click the “Shift” key while holding it down in the first text box.

You will start dragging this text box out of the frame while holding down the spacebar.

This spacebar command is important to prevent the text box from disappearing out of the frame and the transition being successful.

So: hold the spacebar before dragging, so it just moves your frame.

Once this is done, repeat the process for the second or subsequent text box.

However, drag them a little further to the left to add some variety to the transition.

At this point, while the text is still selected, you can reduce the layer’s opacity to 0% in the same way as you did previously for the image.

6. Defining the transition

To define the transition, you must go to “Prototype”.

There, you will select the frame on the left and click on the blue circle that appears in the center of the right side of the frame.

Once that’s done, drag it so that the line goes to the second frame.

In the drop-down line that says  “Instant” , you will select  “Smart Animate”.

Soon after, you can change the box with the timer to 1000ms.

The result of this? Your transition will be set to take one second from the mouse click.

The other settings should be set by default.

To do so, make sure not to rename the frame titles after defining a transition, otherwise, the files will not be connected.

It’s time to test your transition. Just click on the “Play” button.

Then, to continue your presentation design, just go back to “Design” .

7. Time to add more slides to your Figma presentation

That part is easy. If you want to go from slide 1 to slide 2, just duplicate the rightmost slide by clicking on the command “Cmd/Ctrl + D”.

On slide 2, just move the text boxes out of the frame using the command “Shift” + press the spacebar and then start dragging.

Then you can move one of the text boxes to the left and the other to the right of the frame.

Afterward, set the opacity to 0% for both.

For the image, move it off-center, making it smaller. At this point, set the opacity to 0%.

This action will give you a blank canvas for the second slide.

From now on, you can add whatever content you want on top of the invisible assets on the previous slide.

Then add a large image in the center of the frame, and if you want to put some decorations on top of your image, use a Figma plugin for Gifs or download a sticker Gif from Giphy to drag it on top of the image.

Once this is done, you can select the main image and any Gifs, grouping them through the command “Cmd/Ctrl + G” , this ensures that Smart Animate works correctly.

In the next step, you can select the group and copy it, using the command “Cmd/Ctrl + C” . In the next step, you can paste it into the frame of slide 1 using “Cmd/Ctrl + V” .

The next step is to reduce and set the opacity to 0%.

Then, move this layer back through the command “Cmd/Ctrl + [“ . This action will ensure a smooth transition to the next slide.

Once that’s done, let’s move on to the next phase.

8. The prototype phase

After you’ve ensured a smooth transition to the next slide, you go to the “Prototype” .

Now, you can select slide 2 and click on the blue circle to drag it to slide 3.

Figma’s default in the prototype menu is to use the previous settings, so they must all be set according to the previous transition. Go back to the project.

Then you can duplicate the last slide with the command “Cmd/Ctrl + D” .

This slide will use the same image as the previous one but scaled to one side of the frame.

From there, you can move the image to the left of the frame by dragging it while holding down the “Shift” key.

Now, hover your mouse on the right edge of the image until the opposite arrows appear, click and drag the right edge of the image to the left until you are satisfied.

From there, go to “Prototype” to link the two frames. Then go back to “Design” .

Immediately place a title and body text to the right of the scaled image to group them together.

Then just copy the text group and paste it onto the previous slide by clicking and dragging the text group to the right of the frame as before.

9. Add a mockup

In this step, you can create a mockup for your Figma presentation.

To do this, simply add a new frame and paste your mockup into it, resizing it to fit the frame.

Then, just copy this mockup and paste it into the previous frame.

Resize the frame to fit the part of the image, and move it to the back of the layers.

Afterward, you must set the opacity to 0% and link the frames in “Prototype”.

10. Add labels

You can now duplicate the mockup board and add a title and description to explain parts of your model.

The next step is to group the text and name it.

You can also create a frosted glass indicator for your markers and lines.

To do this, just group a line with a circle. Right after that, align your indicator with what you’re describing and add your description next to it.

Frames must be linked in  “Prototype” .

Afterward, just duplicate the frame and add another bullet pointer with what you’re describing.

Prototype this again and duplicate each frame per bullet point, so that each bullet point transitions itself.

11. Time to finish the presentation

Shall we go to the last slide of your Figma presentation? To do this, simply duplicate it, writing a final word or two. Center the words, copy the text and paste it onto the previous slide.

To shrink text, hold down “K” while scaling it – this will keep your text formatted as you shrink it.

Then just place your text somewhere near the top of the mockup and send the layer back under the image.

The next step is to set the opacity to 0%, going back to the final slide.

You can now move the other objects out of the frame using the drag method.

That way, the transition will slide everything sideways and up as the text moves down and expands.

The slides link is in “Prototype” .

12. The time of presentation

Your project is ready and it’s time for you to share it.

Just log in to your Figma account or share the URL with others, so they can see your presentation from anywhere.

To make your final presentation with your transitions, you will click the “Play” button and choose the full-screen mode.

Your frames can also be saved as PDFs. However, in this option, you will miss the animated transitions.

Did you learn all the steps to create a presentation in Figma?

Now that you’ve learned the step-by-step guide to creating amazing presentations in Figma, how about sharing this knowledge with your friends? Take advantage and forward this article to those you know will like it!

Posts Relacionados

9 Apps para seguir pessoas no Instagram automaticamente

• há mais de 1 dia

13 Necessary equipment for recording a podcast

The 4 types of hosting that exist and how to choose yours

The 8 best websites to trim podcasts

The 9 best audio podcast platforms

How to download only part of a YouTube video

• Social Links
• social networks
• Uncategorized
• Windows Phone

iPhone X, XS & XR

iPhone 7, 8 & SE

Apple Watch

Google Pixel

• Galaxy S10, S20 & S21

Galaxy Note

Android Phones

Android Tablets

Phone Mockups

Computer Mockups

Laptop Mockups

Tablet Mockups

Smartwatch Mockups

• Social Media
• Productivity
• Real Estate
• iOS UI Kits
• Android UI Kits
• macOS UI Kits
• Other UI Kits
• Illustrations
• Figma Plugins

Figma Mockups

Best Figma Mockups

Galaxy S10 & S20

• Design Systems
• Sketch Resources
• Adobe XD Resources
• HubSpot Themes
• Framer Templates
• HelpScout Templates

Figma Elements © 2023 | Sitemap  | Made with ❤️ in Netherlands FigmaElements is NOT officially associated with Figma, Inc. We are a non-official community looking to share valuable resources to all Figma designers worldwide.

Device mockup in presentation mode

Hi Figma. This is true pain when I have to hide device mockup in presentation mode few minutes before an important call. I can’t express my feelings. I have to rush and google a solution every month I get into this situation. This setting if at all to be kept should be exposed during presentation mode as one having critical impact in the moment of presenting.

Thanks for the feedback! We’ll pass this onto our team for consideration.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Figma Website Mockup

Select your preferred Figma Website Mockup item and begin customizing directly in your browser. No need for downloads or Photoshop! All mockups on the Mockup Zone website are editable within Artboard Studio, Figma, and Adobe Express. You can choose to edit directly in Artboard Studio or install plugins for Figma and Adobe Express to effortlessly place your designs and create stunning mockups.

Figma Website Mockup Generator In Your Browser

Create high-quality and realistic Figma Website Mockups directly in your browser. Edit these mockups in your preferred design tool, such as Artboard Studio, Figma, or Canva, to craft the perfect presentation for your design. Say goodbye to downloading PSD files or the need for Photoshop to make mockups.

Ever Growing Figma Website Mockup Library

Our dedicated team works tirelessly to expand our library, adding new mockups every single day. With a commitment to keeping our offerings fresh and relevant, we ensure that our mockups are always updated to reflect the latest trends and design preferences.

Realistic and High Quality Figma Website Mockups

Easily edit and always get realistic and high resolution results for your Figma Website Mockup. Our carefully crafted, high-resolution, and sharp mockup items are ready for your designs to be showcased.