presentation deck figma

Resources and tips around creating and designing slide decks, general presentation guidance, and tool workflows and pro-tips.

Using Figma for Presentations: 2021 Update

January 23, 2021

In 2017, I published Using Figma for Presentations . At the time, Figma was still in beta (and didn’t even have prototyping yet!), and most design teams I knew were skeptical about it as a tool — and of collaborative designing as a concept.

Since then, Figma has grown to hundreds of thousands of users, with design teams from some of the most recognizable brands in the world using it daily. Also, since then, I joined and left Figma as a design education manager and community advocate, and have started my presentation design agency, Zacht Studios .

I’m still betting on Figma to be a significant player in the presentation tool game. I wanted to update that 2017 article with the new strategies I’ve learned and the new Figma features added since to create and present with Figma even better.

First, I like to set up a new Figma file with the intention of creating a presentation:

Template Slides

I like to stick these on a separate page in my Figma file to keep my documents tidy.

Using Figma Components, create the base of each slide type. For example, a title slide, a section break, a top title, and a blank slide with just a footnote.

Since I am setting these as Components, I can use them in this file, and I will also publish them to the Team Library, so anyone at Zacht Studios can access them.

The next step is to go back to that original page and start making a deck. I create a new Frame of the same size and place an Instance of one of my Template Components inside it. The reason I do this, instead of just placing an Instance on the canvas by itself, is because I’m going to want to layer other content on top of it.

Figma Instances support Overrides. An override is changing a property of an object that is part of the Component. In this case, that could be changing the title of a slide, or it could be something like changing the color or typeface of an element just in one instance. The benefit here is, for example, having a 30 slide presentation created, with each slide having unique content, and then being able to make changes to the template layout rather than each individual slide separately.

You can also set Styles in your file — or use existing Styles from your Team Library — to adjust type and color choices (among other things) across multiple slides at once, including the template slides.

Before I get too far in the content-creation process, I like to set up some additional structure for my slides:

Figma’s grids are powerful. For me, they help maintain consistency, a critical piece of good presentation design . I usually use just one grid layout of columns for an entire project, but there is a lot of flexibility in Figma if you feel comfortable using multiple grid systems. You can pick any Frame to start with and then save your grid layout as a Style. Then you can use it on any Frame.

Auto Layout

Figma’s auto layout helps maintain spacing rules that you create. Much like Grids, it is another structure that can help maintain consistency.

Now that I have foundational structures in place to lay my content out with confidence, I can use these additional Figma features to mimic more traditional presentation tool features:

Any text or text box in Figma can become a hyperlink. Select the text you want to add a link to and the chain icon appears in the toolbar at the top-center of the interface. These are clickable in the Presentation view (more on that in a second) and in exported PDFs. You can also add hyperlinks in Comments.

You can export your deck as a single PDF file by going to File > Export frames to PDF. Figma will generate a PDF with every Frame on the current Page — another reason to set up your Template Slides on a separate page. Figma organizes Frames left-to-right, top-to-bottom and your PDF pages will follow that order (so will your slideshow in Presentation view, unless you adjust with the Prototype panel).

Sharing/Collaborating

This hasn’t changed much since my original article: “By clicking the share button in the top right corner, you can enter an email address to invite others to collaborate, or generate a shareable link.”

Some of my favorite Figma collaborative features, that eclipse presentation tools like Google Slides, are Observation Mode and Embedding .

When in Presentation mode, using the keyboard shortcut "⌘\" on macOS or "^\" on Chrome OS and Windows hides the toolbar and footer.

If you are going to embed a Figma file on a webpage or share the Presentation mode link with someone else, you can add "&hide-ui=1" to the end of the URL to keep the toolbar and footer hidden there as well.

Alternatively, you can use the Prototype panel to do this by setting the Device to "Presentation".

Animation (aka Prototyping)

Figma is, first and foremost, an UI design tool. With it being flexible enough to do other types of design work, like presentation design, it’s many features can be used beyond their original intention. Prototyping app screens is a core competency, but using that to animate slides and create Keynote-like transitions is more than possible. Smart animate is the Figma equivalent of Keynote's Magic Move.

Community: Files

Via the Share menu, you can publish your file to the Figma Community . Check out our resources, available for free at figma.com/@zach (me) and figma.com/@zacht (Zacht Studios). Other Figma users will be able to create a duplicate of your file to make their own (they will not be able to edit your original file).

Community: Plugins

As of writing this article, there are hundreds of plugins for Figma .

Here are a few of my favorites:

• Stark , contrast checker and colorblind simulator
• Unsplash , free stock photography
• Material Design Icons , Google's icon library
• LottieFiles , use Lotti animations in Figma
• Brandfetch , easily find and place company logos (great for deck making)
• Map Maker , for generating maps directly on the canvas

Additional Tips

Open your file again in another window with Presentation mode so you can see what your audience is going to see in the presented version of the slide.

Use Swap Instance to quickly try out your other layouts for a slide or build out additional slides quickly.

All that to say, there are a lot of great features intended initially for screen design that extend to making great slides fast. 

If you have questions or additional tips to share, please reach out: [email protected]

presentation.design is a resource hub by  Zacht Studios , The Presentation Design Agency.

Need help creating that presentation template or pitch deck for your company? Zacht Studios is a team of skilled creatives focused on company storytelling and fundraising.

We’ve crafted pitch decks, marketing materials, and unforgettable stories for some of your favorite companies like Adobe, Square, Etsy, and SpaceX. Plus, we’ve supported startups in raising more than $1.41B to date.

Curious to learn more? Reach us at [email protected]

Made by Zacht Studios , The Presentation Design Agency | Listen to our creative interview podcast, Bézier

• 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

Pitchdeck Presentation Studio Figma Plugin

Home / Pitchdeck Presentation Studio

• December 1, 2020

Create and present slide decks with animations, videos and links from your Figma designs

• Super easy animations and real-time previews inside Figma. • Embed GIFs and YouTube/Vimeo videos anywhere in your slides. • Attach clickable URLs to any elements in your slides. • Quickly re-order slides by visual position, Figma layer order or drag and drop. • Automatically generates password protected presentation URLs. • Simple, seamless and easy to use presentations in the browser. • Includes speaker notes, timer, laser pointer, and slide controls. • Control your presentation from your phone by scanning a QR code. • Present in fullscreen with notes and controls on a second screen. • Export to PowerPoint, Keynote, Google Slides and PDF. • Relaunch directly from the Figma sidebar in your projects.

— To use Pitchdeck

1. Install Pitchdeck and create a new Figma project. 2. Create as many frames (slides) as you need for your presentation. 3. Add any images and text to your frames to design your slides. 4. Run Pitchdeck inside the page containing your frames. 5. Apply some animations, embeds, links or notes to each slide. 6a. Select the “Pitchdeck URL” format and click “Upload Presentation”. 6b. Or, select PDF/PowerPoint/Keynote/Google Slides and click “Export”. 8. Enjoy your presentation!

For step-by-step video tutorials: • Create and present an animated deck – https://youtu.be/CgHfcrm3oXw • Embed videos and GIFs – https://youtu.be/sT8Rt1DLnCM • Add clickable URL links -https://youtu.be/vyqGdJy8Hdw • Export to PowerPoint – https://youtu.be/IkiG4PWJZEM • Export to Keynote – https://youtu.be/yJ3W1pjS0LI • Export to Google Slides – https://youtu.be/BkMRUL5SvmE • Export to PDF – https://youtu.be/W_W8aYQvg28

— Additional Notes

• 16:9 ratio frames are recommended (eg. 1280×720 or 1920×1080) for the best results.

• If your presentation contains many slides with large images, please note that Pitchdeck may take a bit longer to initially load (and refresh) your frames.

• If you add or update any layers in your Figma file while Pitchdeck is already running, you can click the “Refresh” icon in the Pitchdeck header menu to refresh your layers and make them show up in the Pitchdeck slides and animation previews.

• Pitchdeck will automatically detect if a layer contains areas of full transparency and set “PNG” as the default export format, otherwise it will be set to “JPG”. You can override this to set the export format of any layer to JPG or PNG by adding your own export setting.

• You can set a solid background colour on any slide by setting the “fill” of that frame to the colour you’d like in Figma.

• Presentation URLs will automatically expire after a 30 day period of inactivity (30 days after the link was last accessed and viewed); if you would like to re-activate the URL after it has expired, simply run Pitchdeck in the Figma file and click “Upload Presentation”.

Neumorphism

Typography Styleguide

Columns to Rows

Layer Styles

• 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.

15+ Figma Presentation Templates (+ Slide Deck Style Graphics)

If you are a designer on the hunt for the perfect Figma presentation template, look no further! Our post features a collection of stunning slide deck templates that will level up your Figma design project presentation and showcases.

Figma is a versatile software that’s capable of handling various types of designs, including slide decks. You can use Figma to create stylish slide decks and presentations to showcase your projects and present new concepts to clients without having to rely on any presentation software like PowerPoint or Keynote.

One of the main benefits of using Figma to design slide decks is you get to craft more attractive and visual slides for the presentation. And with this collection of Figma templates, you’ll be able to go above and beyond with your slideshow designs.

We handpicked a collection of Figma templates that feature slide deck-style graphics and layouts. You can use these to make your own presentations, slideshows, and more.

Let’s dive right in and explore these free and paid options that will impress clients and enhance your presentations.

19+ Million Figma Graphic Templates & More With Unlimited Downloads

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

Pricing Table UI

Course Template

School ui kit.

Multipurpose Template

Startup Website

Figma template.

Coming Soon Page

Social Network Template

Figma & psd.

Explore Figma Templates

Aesthetic eCourse Slide Deck for FIGMA & PSD

This is a dynamic collection of 100 customizable slide templates for Figma and they are perfect for creating engaging online course-related presentations. This creative template not only includes visually pleasing designs but also provides a host of layouts like quotes, infographics, and lists. Suitable for webinars, influencer content, and marketing pitches, it’s a practical solution that saves you time and resources while elevating the visual appeal of your presentations.

Fashion Slideshow Promo Template for Figma

This Figma presentation template offers a chic, minimalistic, and contemporary design, optimal for delivering your fashion-related content effectively. It features high-quality screens, customizable layers, fonts, and colors, and is fully editable, enabling you to customize its vector shape to your taste.

Infographics Figma Presentation Template

A useful Figma presentation template for creating engaging, data-driven presentations. It offers stunning visuals, dynamic roadmaps, and insightful timelines that effectively communicate information. It includes slide layouts in Photoshop, Figma, Sketch, PDF, and PNG formats, all fully editable for easy color changes and a free font. Unleash your data’s potential with this captivating infographic template.

Circle Infographic Presentation Template for FIgma

Explore the Circle infographic presentation template for Figma, a set of slides designed for creative data visualization in slide decks. With this template, you can create mesmerizing presentations, make compelling roadmaps, and craft insightful timelines. The kit comes with PSD, Sketch, PNG, and PDF files, and options for easy color changes. Plus, it’s fully editable and even includes a free font.

Process Diagrams Figma Infographic Template

This Figma slide template makes showcasing intricate workflows and procedures simple. It comes in various convenient file formats, includes an array of visual displays, and features editable graphics with clear color combinations. Its user-friendly design is perfect for crafting beautiful process diagrams and roadmaps for your presentation and slide decks.

Business Strategy Infographic Slides for Figma

This Figma template includes an assortment of fully editable infographics related to various business-related concepts. It’s especially ideal for crafting eye-catching business strategy presentations. The package includes Figma files, unique icons, three slide infographic templates, and free access to a creative font.

Digital Marketing Infographic Slides for FIgma

This is a modern Figma infographic template that transforms your presentations with beautiful infographics. It allows you to showcase data in visual form with stylish digital marketing infographic slides. It includes 3 slide templates in Figma, Adobe XD, and Sketch formats.

Hero Header Templates for Figma

Even though these Figma templates are for designing website header sections, they can also be used to create attractive slides for your presentations. This pack contains seven innovative, fully editable, and scalable header designs perfect for an array of slides such as food delivery, online stores, and tech tools.

Hero Section Design Figma Templates

Another collection of sleek, modern hero design templates for your slide designs. It includes 11 distinct hero header layouts, fully customizable with Figma. They are excellent for creating cutting-edge website designs and slide decks for various presentations.

Eshoin – Ecommerce Hero Header Templates

Eshoin is a collection of modern header designs for Figma, which are also perfect for enhancing presentations, and various projects. With a sleek, professional layout, the templates come in editable formats (.PSD, .xd, .fig), and feature a 1920×1080 pixel, 16:9 ratio design incorporating Google fonts. Primarily designed for product showcasing, they ensure an appealing and informative display for viewers.

eCommerce Hero Header Design for Figma

This eCommerce-themed header design lends a clean aesthetic to your website or slide decks. It’s user-friendly, adaptable for small to large businesses, and ideal for crafting bold product showcase slide layouts. With compatibility across Sketch, Adobe XD, Invision Studio, and Figma, all components are vector-based ensuring a sleek design.

Free Figma Presentation Templates

Don’t forget to try these free Figma templates.

Free Deck Template with Fresh Folks Illustrations

This is a bundle of beautiful slide designs featuring cute and fun illustrations that add a creative and more engaging look to presentations. The slides have multipurpose designs that can be customized to make various types of slide decks.

Free Figma Pitch Deck Template

This free Figma presentation template comes with a set of bold slide designs for making pitch deck-style presentations. It has several slides with gradient colors and minimal designs.

Free Grey Pitch Deck Presentation Template

With more than 20 different slide layouts to choose from, this Figma presentation template is one of the best options for crafting a convincing pitch deck to win over your clients. And it’s free to use.

30+ Free Presentation Slides for Figma

This free Figma presentation template comes in both light and dark color themes. You can use it to make elegant and bold presentations for various branding and business slide decks. It includes over 30 unique slides too.

Free Figma Presentation Template

Use this Figma presentation template for free to design bold and professional presentations for your business and design projects. The template is especially ideal for startups and entrepreneurs for creating pitch decks.

Free Elegant Presentation Template for Figma

Another free presentation template for Figma. This template includes several creative slide layouts with elegant designs. They are suitable for a wide variety of slide deck presentations. Even though it uses a different language, you can easily customize each slide to change content.

• Skip to Content ↓
• Skip to Footer ↓

Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.

Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.

Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma.

Easily create and export responsive, production ready HTML emails (eDMs) from Figma.

Everything you need to easily export, import, localize and update text in your Figma designs.

Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.

Securely share your Figma designs and prototypes as password protected URLs or PDF files.

Export production ready favicons (with code) for your website or PWA from Figma in seconds.

Compare and visually QA your Figma designs against real website URLs using smart overlays.

Supercharge your Figma comments and gather external feedback from stakeholders.

Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.

Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.

How to embed Figma Prototypes in Figma presentations using Pitchdeck

Follow along with our complete step-by-step free Figma tutorial video walkthrough.

Used in this video

Video transcript.

Today I'm going to be showing you how to embed a live Figma prototype into any element of your slides in a Figma presentation using the Pitchdeck Figma plugin.

To get started all we need to do is open up a Figma file, click on the little "Resources" icon at the top here, and if you search for the word "Pitchdeck", you'll see Pitchdeck pop up. All you need to do is click on the Pitchdeck result, and then you can run the Figma plugin by either clicking on this "Run" button here or you can click on the little "More options" icon and click on "Save Figma plugin" and that'll just make it easier to access it later. I've already saved it to my Figma plugins list, so to run the Figma plugin I'm just going to go to my Figma canvas, right click, go down to "Plugins" go down to "Saved Plugins", click on the "Pitchdeck" item, and that's just going to run the Figma plugin we saved a second ago.

If you're new to the Figma plugin, the way that it works is it basically treats any frames on your page as a slide. I've got a bunch of different slides here and in each of those frames I've just got a bunch of text layers and content layers, and those will get treated as individual layers in your slides that you can add things like animations and links and inputs to; for today's Figma tutorial, I'm going to be focusing on how to embed a live Figma prototype. To do that, all I've done is just set up a brand new frame called "prototype Embed" (you can call it whatever you want), and inside of that frame I've just got one layer, it's just a rectangle layer called "Embed", and this is basically just going to be a placeholder layer for where we want our Figma prototype embed to go.

In this case I'm going to be embedding a different Figma file; I've got this other landing page design that I grabbed from the Figma Community and I'm going to be embedding this as a live Figma prototype in our Pitchdeck presentation. The first thing I'm going to do is just change the Figma prototype background and I'm going to change it to the same color as my presentation slides. In this case it's going to have a white background, so what I want to do is in my design or the embed that I want to include I'm just going to click on the "Prototype" tab here, then I'm going to go down to the "Background" option and I'm going to change that to white. You can just change that to whatever background color you want; in this case I'm just going to leave it to white, which matches the slide background as you can see here, the outer background border that I've got set is white, so I'm going to set the prototype background to white as well.

Then, to get the Figma prototype link all you need to do is click on the little play button here to go into present mode and this is going to load up the Figma prototype window; what we want to do is we want to click on the "Share Prototype" button, and then we want to make sure that the settings are set to "Anyone with the link", so "Anyone with the link" is selected instead of "Only people invited". I've got "Anyone with the link" and then "Can view"; I want to set that to "Can view" instead of "Can edit", as it doesn't need to have an edit permission, just "Can view". Once those two options are set, you can click on the "Copy link" icon here; click on "Copy link", that's going to copy it to our clipboard, and then we're basically ready to go.

Now I'm going to go back to my presentation design, I'm going to go to my "Prototype Embed" slide and instead of applying an animation, I'm going to go to the "Embeds" tab; I'm going to click on "Embeds" here, and that's going to give us a text area to paste an embed link. In this case I'm going to be pasting it onto this rectangle layer embed layer here that we set up, I'm going to click on the input field and paste that Figma prototype Link in that we just copied from the Figma file, and you can see here it instantly loads up the Figma prototype. We can scroll through this, we can interact with it if it has any interactivity, we can do that as we'd expect, but for today I'm just going to be mainly using it as a way to present a live Figma file inside of our presentation.

Now that we've got that set up, I'll just mention that you can use this on any layer; if you did want to apply it to a different slide you could apply it to, for example, this little rectangle layer. We've got our little image layer, you could paste it in there, and that would replace that layer with the Figma prototype as well. Obviously, that's going to be a bit smaller and it's got this overlay on it, so maybe this isn't the best slide for it, but I just wanted to show you that you can basically embed different things onto different layers in any slide, and that will work as expected; I'm just going to remove that.

Now that we've got our embed set up, all I'm going to do is now export this so we can actually present it in the browser. What we need to do is click on the "Export" button in the Figma plugin; I'm going to click "Export" make sure the format is set to "Pitchdeck Presentation (Web URL)"; I've got that selected, and then all I need to do is click on "Update Web Presentation" or "Upload Web Presentation" if you've not already uploaded one yet. I'm going to click on "Update Web Presentation", this is basically just going to quickly upload all of the images and slide data and we're going to get this message here that lets us know the presentation is ready to go.

You can either send this to your end user or customer as a separate password and URL, but in this case I'm just going to make it quick and copy the "Passwordless URL", which will automatically log into the presentation for me. I've copied that to my clipboard just by clicking this little "Copy" icon, and if I go to my browser and paste that in; I'm just going to hit "Paste" and then "Enter", and this is going to load up the presentation that we just uploaded from Figma. We can jump around here, we can load up our different slides that we created, we've got all of our animations and things like that, but of course we want to actually check out slide two in this case. I'm going to click on slide two, and this is going to now load up the live Figma prototype that we just embedded using the Figma plugin.

You can see here this is the live Figma prototype added exactly where we wanted; you can see we've got our outer kind of padding that we kept on the slide to make sure that we've got a bit of a buffer, we've set the background to the prototype as white as well which means we can basically now scale this up and down, and we can scale it without having any issues with background colors or anything coming through from the Figma prototype. That's really nice if you want to make it bigger or smaller or go full screen, the prototype is going to scale up and down with that as well.

That's basically what it looks like there, and I don't think this really has any interactivity, but this is a live Figma designl, so what we can do is if we go to our Figma landing page in the design, and we want it to change some of this content. For example, if we just jump in here and change this to; I'll just quickly change the font, so we'll just make this "Arial" for now and replace that; we can basically change this content here to be "Presentation Live Updates" here, and if we go back to our presentation you can see here that it's basically updating in real time. If I just move that over a little bit for you to see, we can see here that this is basically going to change in real time; this is 100 live from Figma embedded in your presentation. You can basically make changes to that presentation even after the link has been shared or while the presentation is happening; maybe you want to present something and make changes in Figma while you're presenting, that could be a interesting use case as well for showing off work to clients that's in progress.

That's basically it, I just wanted to show you the basics of how to embed a live Figma prototype into your presentations that are viewed in the Pitchdeck web application; this is a really easy way of going about it and it gives you a lot more flexibility to enhance what kind of content you can show in a presentation that you're sharing with clients or teammates or stakeholders as well. Let's leave it there for today, I hope that's been interesting for you if you've been wondering how to include live Figma prototypes inside your presentations this is a really, really easy way to go, especially if you're already using the Pitchdeck Figma plugin, this is just a new embed that's been added.

If you want to see what other embeds are available, you can click on this little "Supported Embeds" link in the Figma plugin, and that's just going to open up a link to the documentation and give you a whole list of examples of other services that are supported to embed into your slides as well. As I said, you can kind of jump in here and this will load up a bunch of different examples; we can see we've got Figma designs, Figma prototypes, Loom, Lottie files, Google Docs, GIFs, MP4s, SoundCloud; all these different platforms you can embed directly into the Figma plugin for your presentations.

Let's leave it there; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.

Founder of Hypermatic

The secret weapons used in high performing teams.

World-class teams of designers , developers and copywriters use our Figma plugins to 1,000x their daily workflows.

Weblify (Beta)

Welcome to the party, pal. 1,323,900+ plugin users..

Never send a human to do a machine's job — join thousands of top performing designers , developers and copywriters using our Figma Plugins to automate their work.

Privacy and security focused.

All of our Figma plugins are designed for privacy and security first — your data and content belongs in your Figma file.

Extreme Customer Service.

We’re obsessed with providing the best service to always make sure it was a good day for you and your team.

Thanks so much for always being so prompt and responsive !

Thanks so much for always getting back to me so quickly !

It’s awesome that you, as a founder, replies to your users.

Legendary response , Adam... thanks so much!

Thanks for the super quick replies !

Oh amazing! You never disappoint.

Thanks for your support and kindness with these questions!

Thank you for being incredible. We are super impressed !

Adam, you never cease to amaze me . Thank you so much!

Thank you so much for your help, you’re the man !

Wow, you are the GOAT! It’s working great, thanks so much.

Thanks for the prompt response , appreciate your help!

The hero your team needs, but not the one it deserves.

Join our mailing list to hear about our new Figma plugins as they're released, plus free merch and Nic Cage fanfare.

Follow @hypermatic for feature updates 🚀

Copyright © 2019 - 2024

All Rights Reserved

Figma Plugins

Documentation.

• Privacy Policy
• Terms of Service
• Bannerify Docs
• Commentful Docs
• Convertify Docs
• CopyDoc Docs
• Crypto Docs
• Emailify Docs
• HyperCrop Docs
• Pitchdeck Docs
• Pixelay Docs
• TinyImage Docs
• Weblify (Beta) Docs

Free Figma Templates

• Free Figma Email Templates
• Free Figma Presentation Templates
• Free Figma Banner Templates
• Browse all free templates (38) ⟶

Hypermatic Articles

• The Low End Theory
• From Three to Four
• Browse all Hypermatic articles (28) ⟶

Hypermatic Tutorial Videos

• How to export HTML emails from Figma to Amazon Simple Email Service (SES) using Emailify
• How to install and uninstall Figma plugins
• Browse all video tutorials (209) ⟶

Presentation Deck Figma Widget

Presentation deck widget, data bindings, page layouts, build information.

Project Abbreviation : PD

Developer Emails : [email protected]

Figma Widget URL : https://www.figma.com/community/widget/1124060556615523237

Production URL : https://presentationdeck.app

A simple, synchronized presentation deck. Blast through your next presentation deck with page templates including a cover page, descriptor pages (full and minimized), and layout guides. Each page presents the project title, author, and date which are synchronized to all pages on any update. The widget also organizes itself into sequentially numbered pages for managing exports. Create a landscape legal presentation, export as pdfs (merge) and you have a document that presents well on today's 16:9 monitors as well as prints predictably.

Presentation Deck Widget, source: contentful , figma

• Change Layout . This will switch between the six different layouts ranging from cover pages to the various content pages.
• Rotate . Change the layout from portrait to landscape.
• Page Size . Switches from letter to legal size.
• Show Borders . This toggles the visibility of orange dotted lines that demark the borders within the content pages.
• Lock Widget . This locks or unlocks all of the Presentation Deck widgets on the stage.
• Confidential . Shows/Hides a red "confidential" flag in the footer of the files.
• Refresh Widget . If some data did not bind the way you expected, it may just be a refresh issue that can be resolved with this button.

Presentation Deck Features, source: contentful , figma

There are a number of inputs on the widget that if changed, will effect other Presentation Deck widgets.

• Project Name . Found as the main title in the cover pages or on the lower right hand corner of content pages.
• Author . Just below the Project Name or in the center of the page for smaller page layouts.
• Date . Found next to the Author.
• Page Name . This is the main title on pages and will be used to create the table of contents on the cover page with a table of contents.

Presentation Deck Data Bindings, source: contentful , figma

• Cover . A simple cover that will present the minimum project title, author, and date.
• Cover TOC . A more complex cover that builds a table of contents based on your pages. Pages are automatically numbered based on their position next to each other starting from the upper left, down, then right.
• Descriptor . A content page with a section on the right for fuller descriptions or notes.
• Descriptor Small . A content page with information about the project at the bottom.
• Page Only . A content page with no information for content that is larger. To name this page, you will need to first choose "Descriptor" or "Descriptor Small", name the page, then change it to "Page Only"

Presentation Deck Page Layouts, source: contentful , figma

Dynamically built using contentful-readme-generator. Do not edit directly.

updated : 3/7/2023, 11:06:35 PM

space : rtkhko6y3s3u

environment : master

entity id : 6efL10hw536jXcUFKg7kvU

Graphic Design

• USER EXPERIENCE (UX) DESIGN
• User Interface (UI) Design
• Interior Design
• Motion Graphics
• Student Work
• Graphic design
• USER EXPERIENCE Design
• Motion graphics
• Interior design

What Is Figma? Uses, Benefits, and Key Features

Figma is one of the most popular design and prototyping tools for UX and UI designers. Learn how it works and why it’s so useful in this guide.

Launched in 2016, it’s hard to believe that Figma has been around for less than a decade. With its user-friendly interface, powerful design and prototyping features, and collaborative capabilities, Figma has fast become a design industry staple. 

But how exactly does Figma work? And what are the tool’s most exciting features and functions? 

Keep reading. We’ve covered everything you need to know about this versatile tool in our introductory guide, including:

• What is Figma?
• What is Figma used for?
• The best Figma features and functions
• What are the benefits of using Figma?
• Figma vs. Sketch—which is better?
• Does Figma require coding?
• How much does Figma cost?
• How to get started with Figma
• Discover more design tools  

1. What is Figma?

Figma is a user interface (UI) design tool, primarily used for prototyping and collaboration. Figma is entirely web-based, which means that it works directly in your browser; you don’t need to download or install any software to use it. 

There are four main products under the Figma umbrella:

• Figma Design: A collaborative design tool used to create various design assets and prototypes, as well as create and manage design systems.
• FigJam: A virtual whiteboard used for workshops, ideation sessions, and collaborative problem-solving and decision-making.
• Dev Mode: A workspace to facilitate collaboration between designers and developers and ensure smooth design handoff.
• Figma Slides (currently in Beta mode): A collaborative presentation tool that enables design teams to co-create slide decks. 

In this guide, we’ll focus on Figma Design. 

2. What is Figma used for?

Figma is one of the most accessible, user-friendly design tools around—making it highly popular among graphic designers , marketers, UI designers, and UX designers of all experience levels. 

Figma is commonly used to:

• Create static wireframes and mockups for websites and mobile apps 
• Create interactive prototypes (again, for websites and mobile apps)
• Create and manage design systems with reusable components and styles 
• Create presentations, logos , icons, infographics, and social media posts
• Host virtual workshops and collaborative brainstorming sessions (via FigJam, Figma’s digital whiteboard tool)

That’s Figma in a nutshell. Next, let’s explore some of Figma’s most interesting features and functions.

3. The best Figma features and functions to know about

Figma is not only incredibly user-friendly but also packed with an impressive array of handy functions and features. Here are some of the best Figma features that really set this tool apart. 

Auto-layout feature

When designing website and app prototypes, it’s important to think about how your designs will look and perform across different devices and screen sizes. This requires responsive or adaptive design, and Figma’s auto-layout feature simplifies the process of creating adaptive layouts. 

Auto-layout is essentially a property you can add to frames and components within your designs, instructing them to automatically resize and reposition depending on the space available. 

Smart Selection

This feature was created to speed up some of the more repetitive design tasks—say, adjusting the spacing around all the icons on a screen or increasing the height of a group of elements on the page. 

With Smart Selection, you don’t need to tweak each element individually; you can select and manipulate multiple objects at the same time. 

Smart Selection works automatically on any selection or group of three or more elements with uniform spacing. With your chosen items selected, you can adjust their spacing, position, and size all at once. This makes it much easier (and faster) to experiment with different possibilities within your designs.  

The scale tool in Figma allows you to proportionally resize layers and objects. Once you’ve activated the scale tool (by pressing the ‘K’ key on your keyboard or selecting the relevant icon in the toolbar), simply select the object(s) you want to resize and either click and drag to scale up or down or enter the exact dimensions you want to apply. 

The scale tool preserves the aspect ratios of the selected elements, ensuring that the overall design remains consistent. 

Throughout the design process, you’ll find that you need components that are largely similar to each other, with some slight differences or variations depending on the context or use case. 

With the variants feature in Figma, you can create different versions of a component (say, a button) within a single parent component. This is useful for managing different states, styles, or sizes of UI elements—and helps you to organise and simplify your component library. 

Real-time collaboration

This is not a feature per se, but it is one of Figma’s defining characteristics—and one of the reasons it’s so popular. Figma allows multiple users to work on the same design file simultaneously, facilitating seamless collaboration in real-time. 

Team members can see each other’s cursors, make changes, and send messages via the cursor chat feature. This replicates the feeling of working together in the same room; ideal for remote and distributed teams.  

A UI kit is a ready-made collection of components, styles, and layouts that you can use to quickly create mockups and prototypes. Figma comes with an extensive library of such UI kits for different operating systems and use cases—including kits for iOS and iPad, Android, and even Microsoft Teams and Instagram. 

When using Figma, you’re not limited to the tool’s core features. It supports a wide range of plugins that enhance the functionality even further. 

You’ll find plugins for almost anything—whether you want to speed up the process of creating wireframes, developing user flows, or adding placeholder content to your designs. 

We can’t talk about Figma’s best features without mentioning the vast library of customisable templates. Whether you want support with a specific design task or want to facilitate team planning and collaboration, there’s likely a Figma template for the job.

You’ll find brainstorming templates, strategic planning templates, user interview and empathy map templates, and many, many more—all ready for you to customise and adapt to suit your needs. 

4. What are the benefits of using Figma?

It’s no accident that Figma is one of the most popular design tools around. There are many benefits of using Figma—from improved collaboration and a more efficient workflow to the abundance of features, templates, and community resources at your fingertips. 

Here are just some of the many reasons designers love Figma: 

• Figma is easy to learn and use: Figma is renowned for its intuitive, user-friendly interface. Beginners and experts alike can get to grips with the tool quickly. making it ideal for everything from graphic design to detailed UI/UX design projects.
• It’s browser-based—no download necessary: To access Figma, you simply open it in your web browser; it doesn’t matter what kind of device or operating system you’re using.
• Figma enhances collaboration: Figma makes it easy to work as a team, even if you’re not all located in the same place. This is a great advantage for remote and distributed teams.
• Version control and auto-save: Figma automatically saves changes in the cloud, making it easy to revert to previous versions if needed—and reducing the risk of losing your work.
• An impressive array of features and functionalities: Figma has everything you need to create wireframes, prototypes, and many more design assets besides—and you can enhance its capability even further with plugins. It’s a design powerhouse!
• A strong community and additional resources: The Figma community is a great source of inspiration and learning. Figma users have access to community-designed templates, design assets, and plugins—everything you need to streamline your workflow and produce great work. 

5. Figma vs. Sketch—which is better?

When Figma was first launched in 2016, it was often compared to Sketch. Sketch is a vector graphics editor that works on MacOS and, until Figma came along, it was considered by many as the go-to tool for designing and prototyping. 

Now, both tools have been around for some time (Sketch was released in 2010), which begs the question: which is better?

As with most tool comparisons, it largely depends on your needs and preferences. If you work on a Mac and want a native Mac app, you might prefer Sketch over Figma. But, if you want to work collaboratively on any device, Figma would be your tool of choice. 

In terms of design functionality, they’re pretty much neck and neck—although we’d argue that Figma is more versatile. 

Another key differentiator between Figma and Sketch is their pricing. Figma offers a free plan for individual users, and follows a subscription-based pricing model starting at $15 per editor per month. 

Sketch is available with a yearly licence purchase costing $120, or via a monthly subscription costing $10 per editor per month. For solo users, Sketch may work out slightly cheaper than Figma. 

6. Does Figma require coding?

No—you do not need coding skills to use Figma. 

Figma was built first and foremost for designers, and it contains all the features and functions you need to create wireframes, prototypes, and scalable design assets. 

In fact, one of the reasons Figma is so popular is due to its intuitive, user-friendly interface. Besides fundamental design knowledge, you don’t need any specialist skills like coding to make the most of Figma. 

7. How much does Figma cost?

Figma is available via a subscription-based model, with four different price tiers: 

• Free Starter Team plan: This gives you full access to the Figma editor tool and allows you to work on up to three collaborative design files and unlimited drafts.
• Professional Team plan for $15 per editor per month: Includes unlimited Figma files, advanced prototyping features, team libraries, and access to Dev Mode.
• Organisation plan for $45 per editor per month: Includes access to design system analytics, org-wide libraries, Dev Mode, and centralised file management.
• Enterprise plan for $75 per editor per month: Includes advanced design system theming, access to Dev Mode, guest access controls, and dedicated workspaces for different teams. 

8. How to get started with Figma

There’s no doubt about it: Figma is a robust and versatile design tool that’s well worth learning. So where to begin? Here’s a quick guide to start you off. 

Create your Figma account

First and foremost, you’ll need to create a Figma account. You can do this via the Figma homepage—just click “Get started for free” and then follow the steps to create your account. 

Explore the Figma interface

Once you’re logged in, spend some time exploring the Figma interface. 

The main sections within the interface are the toolbar, your blank canvas, the layers panel, and the assets panel. Explore each of these sections in turn to familiarise yourself with where different features live and what’s possible within the platform. 

Follow Figma guides and tutorials 

Once you’re ready to start designing, we recommend heading over to Figma Learn —Figma’s official collection of guides and resources. 

You can take a virtual tour of the Figma interface, work your way through starter projects for some hands-on practice (learn how to design a button, for example, or create an illustration), and explore Figma’s core features. 

These resources give you great insight into how Figma works in practice, allowing you to learn the interface and build out your skills step by step. 

Take a course 

If you’re learning Figma because you want to work in a specific design field, consider taking a professional course. 

Perhaps you’re looking at how to become a UX designer or how to land your first job as a UI designer , and Figma came up as one of the top skills you’d need to learn. A dedicated UX or UI design course will teach you how to use Figma within the context of the end-to-end design process, ensuring you’re ready to use Figma on the job. 

Besides learning important tools like Figma, there are many additional reasons to pursue a UI/UX design course —including instruction from industry experts, a structured, industry-relevant curriculum, opportunities for peer-to-peer learning, and a chance to develop your UI/UX design portfolio. 

Not sure which course to choose? We’ve rounded up the best UI/UX design courses in this guide .

9. Discover more design tools

We hope you’ve enjoyed learning all about Figma and its top features and functions. Whether you’re an aspiring UX/UI professional or a design hobbyist, you’ll find that Figma is a valuable addition to your toolkit—especially if you’re working collaboratively with others.

If you’d like to learn more about the most important design tools , continue with these guides:

• 13 User Interface (UI) Design Software and Tools to Consider in 2024 (Free and Paid)
• The 10 Best Wireframe Tools for Designers
• The 17 Best UX Design Tools and Software for 2024’

We hope this guide to understanding Figma has been helpful. Figma’s features, uses, and benefits are key to enhancing your design workflow. For inspiration, We highly recommend that you check out this UI UX project on the E-commerce website landing page for a small-scale business by AND learner Veda Parapurath for inspiration. In case you need further assistance, here are some of our resources you can consider:

• Watch this session by design veteran and AND’s Academic Head, Prachi Mittal, and our Course Lead, Soumya Tiwari.
• Talk to a course advisor to discuss how you can transform your career with one of our courses.
• Pursue our Graphic Design courses - all courses are taught through live, interactive classes by industry experts, and some even offer a Job Guarantee.
• Take advantage of the scholarship and funding options that come with our courses to overcome any financial hurdle on the path of your career transformation.

Note: All information and/or data from external sources is believed to be accurate as of the date of publication.

Graphic Designer Salary in India: Everything You Need to Know in 2024

Curious about how much you could make as a graphic designer in India? We’ve got all the information you need, from graphic design salaries and job profiles to...…

What Is Adobe Illustrator?: A Complete Guide (With Use Cases and Benefits)

Adobe Illustrator is a vector graphics tool—and a staple in the design industry. Explore Illustrator’s core features and use cases in this guide. …

8 Top Graphic Design Courses in Las Vegas to Consider in 2024

Interested in graphic design and looking for courses to learn industry-relevant skills? Get the list of the best graphic design courses in Las Vegas here... …

10 Best Graphic Design Courses in Houston for 2024

Fulfilling your ambitions of a career in graphic design has much to do with the course you pursue. Here’s a handpicked list of the best graphic design courses in Houston...…

What Is Photoshop? : Complete Guide to its History, Features, and Specifications

Photoshop is a raster graphics editor tool used for image and photo editing. Learn all about Photoshop’s key features and use cases in this guide...…

A Step-by-Step Guide to Building a Graphic Designer Resume (With Tips and Examples)

Learn how to create a graphic designer resume that showcases your skills, impresses hiring managers, and increases your chances of getting an interview. …

Why You Should Pursue a Graphic Design Course

Explore how a graphic design course could help meet your professional goals. Read on for detailed insights into what to look for in a course along with an overview of career opportunities and future trends.…

The 11 Best Graphic Design Jobs in Delhi to Watch Out for in 2024

Explore the different graphic design jobs in Delhi and scale professionally with this article. Read on for details of each role and the skills required to excel in the field. …

Consult Course Advisors

Hire Our Graduate / Upskill Your Team

Become An Instructor

Course(s) you can teach

Skip to main content

• Contact sales
• Start diagramming Start diagramming

Figma Design

Design and prototype in one place

Collaborate with a digital whiteboard

Translate designs into code

Figma Slides

Co-create presentations

Explore all Figma AI features

Get the desktop, mobile,
and font installer apps

See the latest features and releases

• Design systems
• Prototyping
• Wireframing
• Online whiteboard
• Team meetings
• Strategic planning
• Brainstorming
• Diagramming
• Product development
• Web development
• Design handoff
• Engineering
• Product managers

Organizations

Creator fund

Build and sell what you love

User groups

Join a local Friends of Figma group

Learn best practices at virtual events

Customer stories

Read about leading product teams

Shortcut: The Figma blog

Stories about how products take shape—and shape our world

Get started

• Developer docs
• Best practices
• Reports & insights
• Resource library
• Help center

Mock up your own must-see MoSCoW method example

Stay focused by identifying your project’s must-haves, should-haves, could-haves, and won’t-haves, then accomplish that project with endless strategic planning tools.

MoSCoW method template

Invite stakeholders, supervisors, and collaborators to participate in an interactive MoSCoW requirements template.

Prioritizing is a priority

Say goodbye to those “shoulda, coulda, woulda” regrets and keep your MoSCoW method agile.

Tackle your tasks: Categorize every important requirement in one place—then get cracking.

Manage your must-haves: Ensure everyone is on the same page about the non-negotiable aspects of your initiative.

Shrink your spending: Stay within budget with task prioritization features that align with your development costs.

Plan projects with your people

When it comes to must-haves, there’s one can’t-miss: teamwork. When you pull up a MoSCoW template in a shared FigJam whiteboard, you can drag and drop ideas, augment your plan with widgets, and share feedback with anyone—whether they’re in Moscow, Manilla, or Melbourne.

More must-have templates

Conserve your all-important time and energy when you use a MoSCoW matrix template to organize your initiative. Discover more essential graphic organizers from our community.

Bang for buck

Bring cost vs. value into the prioritization conversation.

Product development roadmap

Go from project proposal to purchase-ready in no time.

Other templates from the community

Prioritize finding more helpful tools from FigJam’s collective.

What is the MoSCoW method?

The MoSCoW method—which is sometimes called the MoSCoW framework or MoSCoW analysis—is a graphic organizer that takes a four-pronged approach to prioritizing features and responsibilities. When you fill out a MoSCoW matrix, you’ll sort all your ideas into four distinct categories: must-have, should-have, could-have, and won’t-have.

The MoSCoW method was introduced by software developer Dai Clegg during his time at Oracle in the 1990s. Half word, half acronym, and all efficiency, MoSCoW is a handy visual tool that can help you and your project team focus on the right things.

What are the steps in MoSCoW prioritization?

Each step of the MoSCoW prioritization method involves slotting parts of a project into one of the following four categories:

Must-haves – Step one is to list the big-ticket items that dictate whether your project will succeed or fail. Think legal requirements, safety considerations, and non-negotiable features that make up the majority of a project.

Should-haves – Step two is to count out your should-haves—in other words, the features that would greatly benefit the project but may need to be omitted or altered if push comes to shove.

Could-haves – Step three includes your maybes. Could-haves are like “bonus” ideas—budget permitting, they’d be an excellent addition, but they won’t make or break the final product.

Won’t-haves – Step four is where you’ll put the concepts that simply aren’t viable for the project. Won’t-haves usually arise out of budget or time constraints.

How do you use MoSCoW prioritization?

To incorporate this method into your workflow, start with a customizable MoSCoW prioritization template from FigJam. Right away, you’ll be able to rearrange your ideas on a whim and give and receive feedback through text or audio.

Once you’ve set up your template, assemble the appropriate stakeholders and go through the four steps above. It may be helpful to list all aspects of your project before categorizing each one.

With your MoSCoW method template filled out, it’s time to tackle your must-haves, then allot any extra time and money to your should- and could-haves.

Other templates you might like

Product launch plan template

Work plan template

Competitor analysis template

Product roadmap timeline template

RACI matrix template

Strategic plan template

Explore 1,000+ templates on the Figma community

Explore even more templates, widgets, and plugins—all built by the Figma community.