# Using Pitchdeck

# Designing your presentation slides

Pitchdeck works by loading the top level parent frames from the current Figma page via the Pitchdeck Figma plugin, and treating each frame as a "slide" for your presentation.

Frames should all be the same size

For the best results, please ensure that all of the frames you want to use for slides are all the same size. Using a consistent frame size at a 16:9 ratio (eg. 1280x720 or 1920x1080) tends to work best for presenting on most screens.

# Selecting a slide to edit

You can switch between your slides in the plugin by clicking on the image thumbnail for each frame in the left hand side of the Pitchdeck plugin.

Parent frames required

To load any slides into Pitchdeck, your Figma page must contain at least one "Parent Frame". This means, any "frames" that are located directly underneath your page.

# Checking and unchecking slides to include

You can include (or exclude) any frame from being used in your presentation by clicking on the checkbox next to the frames in the left hand side of the Pitchdeck plugin.

# Ordering your slides using quick sort options

There are a number of different ways to sort the order of your frames for your presentation slides:

# Sort frames by Figma Layer Order

Selecting the Sort frames by Figma Layer Order option will automatically sort your the order of your frames to match their order in your Figma layers.

# Sort frames visually by Columns

Selecting the Sort frames visually by Columns option will automatically sort your the order of your frames to match their visual positioning order by columns in your Figma design.

# Sort frames visually by Rows

Selecting the Sort frames visually by Rows option will automatically sort your the order of your frames to match their visual positioning order by rows in your Figma design.

# Ordering your slides using drag and drop

You can manually sort the order of your slides using drag and drop, by clicking/holding your mouse on the drag icon (next to any of your slides), and dragging it up or down to shift its order in your uploaded frames, then dropping it to confirm that order. This custom ordering will be saved if you want to switch between ordering options, so you can get it back by clicking the Sort frames by Custom Order option in the sorting select box.

# Refreshing your slides from Figma frames

If the Pitchdeck plugin is already running and you need to add or remove any parent frames on your current Figma page, you can make those updates as needed and then click on the Refresh icon button in the Pitchdeck plugin toolbar.

# Adding speaker notes to your slides

You can add speaker notes to each slide by clicking on the Speaker Notes text area and typing or pasting your notes for that slide in the field. Your slide notes will be included in any PowerPoint/Keynote/Google Slides export, and also viewable from the presenter mode in the Pitchdeck web app.

# Exporting your speaker notes to a text file

You can instantly export all of the speaker notes you've added to your slides in the Pitchdeck plugin by clicking on the export icon button in the Speaker Notes area at the bottom of the plugin window. This will let you save a .txt file containing all of your notes to your computer.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Animating your slides

You can animate any direct child layer in the parent frames in your slides by applying keyframe presets, speeds and timing offets to them.

Animations are only used for web presentations

Please note that any animations you add will only be used in a presentation uploaded to the Pitchdeck web app; this means that no animations will be included in your PowerPoint/Keynote/Google Slides exports or PDF file exports.

# Choosing a preset animation style

Pitchdeck comes with dozens of pre-defined keyframe based animations, which are grouped into 3 categories:

  • Entrances
  • Transforms
  • Advanced

To set an animation, ensure that the Animations tab is selected, then hover over the layer you would like to animate in the Pitchdeck layers list and click on the select box. Scroll through the list of animations and click on an animation name to apply it to your layer. You'll see the slide preview update instantly with the new animation applied.

# Changing the animation speed

You can adjust the speed and delay of your animations by clicking down on the left/right edges of the timeline bar for your layer, then holding and dragging with your mouse to adjust the length of your animation and it's start/end point.

You can shift the location of your animation on the timeline by clicking down on the middle of the timeline bar for your layer, then holding and dragging with your mouse; moving it either left or right to change where it is placed in your timeline.

# Copy/pasting animations between layers

# Embedding media to your slides

You can embed media to any direct child layer in the parent frames in your slides by pasting a URL (linking to to a .gif file, .mp4 file or a YouTube/Vimeo video) or using the built-in search options (powered by GIPHY and Pixabay).

# Searching/inserting GIFs to your slides

To add GIFs using the built-in GIPHY search integration, you can click the GIFs/Videos tab, then hover over the child layer where you would like to embed the GIF; then click on the GIPHY button to open the search panel. Type a keyword in the search field, then click the Search button to load the list of GIF results for your keyword search.

To insert a GIF result into your selected layer, you can click on any of the GIF thumbnails in the GIPHY search results list.

To remove a GIF from any layer, you can delete the URL from the text input field for that layer.

You can embed your own .gif URLs

If you have a GIF hosted on your own website or another website that you would like to embed, you can manually paste the valid direct link to the .gif file into the embed text input.

GIFs inside the Figma document are not supported

Due to GIF exports not being natively supported in Figma, any GIFs added "directly" inside your Figma designs won't be animated. To use animated GIFs, please only add them as URLs inside the Pitchdeck plugin instead.

# Searching/inserting stock videos to your slides

To add stock videos using the built-in Pixabay search integration, you can click the GIFs/Videos tab, then hover over the child layer where you would like to embed the video; then click on the Pixabay button to open the search panel. Type a keyword in the search field, then click the Search button to load the list of stock video results for your keyword search.

To insert a video result into your selected layer, you can click on any of the video thumbnails in the Pixabay search results list.

To remove a stock video URL embed from any layer, you can delete the URL from the text input field for that layer.

You can embed your own .mp4 URLs

If you have a MP4 video hosted on your own website or another website that you would like to embed, you can manually paste the valid direct link to the .mp4 file into the embed text input.

Videos are only used for web presentations

Please note that any video embeds that you add will only be used in a presentation uploaded to the Pitchdeck web app; this means that no videos will be included in your PowerPoint/Keynote/Google Slides exports.

# Embedding external video URLs to your slides

To add external video URLs from YouTube and Vimeo, you can click the GIFs/Videos tab, then hover over the child layer where you would like to embed the video; then paste any valid video URL from YouTube or Vimeo into the text field to embed it.

To remove an external video URL embed from any layer, you can delete the URL from the text input field for that layer.

Videos are only used for web presentations

Please note that any external video embeds that you add will only be used in a presentation uploaded to the Pitchdeck web app; this means that no videos will be included in your PowerPoint/Keynote/Google Slides exports.

To add external clickable URL to any child layer in a slide, you can click the URL Links tab, then hover over the child layer where you would like to attach a clickable link; then paste any valid URL into the text input field.

To remove a URL link from any layer, you can delete the URL from the text input field for that layer.

URL links are not included in PDF exports

Please note that any URL links that you added using the Pitchdeck plugin will not be included in your PDF file exports.

# Exporting your slides to a .pptx file

This export option will export your slides from Figma to a .pptx file that you can open with Microsoft PowerPoint, Apple Keynote or Google Slides.

To use this option, click the Export Presentation button in the Pitchdeck toolbar, then ensure that either the PowerPoint (.pptx file), Keynote (.pptx file) or Gooogle Slides (.pptx file) option is selected as the presentation export format. Once you've configured your export settings, you can click the Export button to begin exporting your slides.

Animations and videos won't be included in the exported .pptx file

Please note that any animations or video embeds included in the Pitchdeck plugin won't be included in your PowerPoint export. These are only used for a presentation uploaded to the Pitchdeck web app.

# Configuring .pptx export settings

# Using Retina @2x Images

Enabling the retina image option will automatically export any JPG and PNG images at retina (@2x) resolution. This will give you sharper looking images in your presentation, but will also increase the file sizes of any JPG and PNG images.

# Compressing images

Enabling the image compression option will compress any JPG and PNG images used in your presentation. By dragging the Image Compression slider left and right from 0-100 (Lowest Quality - Best Quality), you can specify the quality of the image. Moving the slider closer to 100 will result in better quality images, but larger file sizes. Moving the slider closer to 0 will result in worse quality images, but also smaller file sizes.

# Using editable text (BETA)

Enabling the Use Editable Text (BETA) option will export your .pptx file with text that can be edited in PowerPoint/Keynote/Google Slides. When this option is not enabled, all text will be exported as text. Please note that there may be some minor visual differences between editable text in PowerPoint/Keynote/Google Slides and Figma.

Ensure that any custom fonts are installed/replaced

Please note that opening the exported .pptx file on a computer which doesn't have the fonts used in Figma installed will cause the text to look different than it does in the Figma design. Please ensure you install any required fonts or replace/substitute any missing fonts in PowerPoint/Keynote/Google Slides where needed.

# Including slide numbers

Enabling the Include Slide Number option will export your .pptx file with page numbering included. This will automatically add a page number to each of your slides in the position you've specified. To change the position of your slide numbers, you can click on the select boxes for horizontal (to select from Left, Center or Right) and vertical (to select from Top, Center or Bottom) positioning.

# Downloading your .pptx file

After clicking the Export button, you'll see a confirmation screen letting you know that your .pptx file is ready to download. To download the .pptx file from Figma to your computer, you can click the Download your .pptx file button in the Pitchdeck plugin.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Exporting your slides to a .pdf file

You can export your presentation to a static PDF file by clicking the Export Presentation button in the Pitchdeck plugin toolbar, and ensuring the PDF Deck (.pdf file) option is selected, then clicking the Export to PDF button. Once the PDF export has completed and the confirmation message appears, click the Download your .pdf file button to save the file to your computer.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

URL links are not included in PDF exports

Please note that any URL links that you added using the Pitchdeck plugin will not be included in your PDF file exports.

# Adding password protection to your PDF

If you would like your exported PDF file to require a password before it can be opened, you can enable the Require a password to open the PDF file setting, then set your own password in the password input field. Ensure that you give this password to anyone you're sending the exported merged PDF file to, or they won't be able to open the file to view its contents.

Browser Support

Due to browser compatibility issues, the Export to PDF feature in Pitchdeck isn't supported in Safari. Please run the plugin in another browser (like Chrome) or the Figma Desktop App instead.

# Uploading your slides to the Pitchdeck web app

This export option will upload your slides from Figma to the Pitchdeck web app, automatically generating a URL and password that will allow you to present your slides online using your web browser; complete with your animations, GIF/video embeds and clickable links, and lots of other neat features.

To use this option, click the Export Presentation button in the Pitchdeck toolbar, then ensure the Pitchdeck Presentation (Web URL) option is selected as the presentation export format. Once you've configured your export settings, you can click the Upload Web Presentation button to begin uploading your slides.

URLs will expiry after 30 days of not being viewed

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 use the Upload Web Presentation button again.

# Using Retina @2x Images

Enabling the retina image option will automatically export any JPG and PNG images at retina (@2x) resolution. This will give you sharper looking images in your presentation, but will also increase the file sizes of any JPG and PNG images.

# Compressing images

Enabling the image compression option will compress any JPG and PNG images used in your presentation. By dragging the Image Compression slider left and right from 0-100 (Lowest Quality - Best Quality), you can specify the quality of the image. Moving the slider closer to 100 will result in better quality images, but larger file sizes. Moving the slider closer to 0 will result in worse quality images, but also smaller file sizes.

# Copying your presentation URL and password

Once the upload has completed, you'll be able to copy the secure URL and password to view your presentation in the browser, using the Pitchdeck web app.

URL and password details can be accessed in the plugin later

If you need to copy these URL and password details again later, you can do this by clicking the Export Presentation button in the Pitchdeck plugin toolbar, and ensuring the Pitchdeck Presentation (Web URL) option is selected. You will be able to copy/paste your URL and password details under the Active Pitchdeck Presentation section.

# Using a passwordless URL (auto login)

If you don't want to use a URL/password combo for your presentation, you can copy the Passwordless URL (Auto Login) link, which will automatically log you in upon visiting the page in your browser.

QR code version can be found on the upload confirmation screen

If you would like to easily open up the presentation link on your phone/tablet, you can scan the Passwordless URL (Auto Login) QR code on the upload confirmation screen, which will automatically log you in upon visiting the page in your browser.

# Deleting your uploaded presentation URL

You can delete your uploaded presentation URL that you've generated using the Pitchdeck plugin by clicking the Export Presentation button in the Pitchdeck plugin toolbar, then enabling the toggle option: I would like to delete the active URL; enabling this toggle will allow you to click the Delete Presentation URL button.

You will see a confirmation message letting you know that the presentation URL was deleted.

Deleting the URL means anyone with the link won't be able to see it anymore

Clicking the Delete Presentation URL button will delete the uploaded presentation URL. Anyone with that URL won't be able to view the presentation anymore. However, you can always re-upload the presentation at anytime by clicking the Upload Web Presentation button again, if needed.

# Using the Pitchdeck web app

The Pitchdeck web app allows you to present your uploaded slides in the browser, using the URL and password generated in the Figma plugin.

# Opening your presentation

Once the upload has completed, you'll be able to copy the secure URL and password to view your presentation in the browser, using the Pitchdeck web app.

URL and password details can be accessed in the plugin later

If you need to copy these URL and password details again later, you can do this by clicking the Export Presentation button in the Pitchdeck plugin toolbar, and ensuring the Pitchdeck Presentation (Web URL) option is selected. You will be able to copy/paste your URL and password details under the Active Pitchdeck Presentation section.

# Using a passwordless URL (auto login)

If you don't want to use a URL/password combo for your presentation, you can copy the Passwordless URL (Auto Login) link, which will automatically log you in upon visiting the page in your browser.

QR code version can be found on the upload confirmation screen

If you would like to easily open up the presentation link on your phone/tablet, you can scan the Passwordless URL (Auto Login) QR code on the upload confirmation screen, which will automatically log you in upon visiting the page in your browser.

You can navigate between your slides in the Pitchdeck web app by clicking on the Prev and Next buttons in the Pitchdeck web app toolbar at the bottom of the page, or by pressing the Left Arrow or Right Arrow keys on your keyboard. Pressing the Space key on your keyboard will also move to the next slide.

# Jumping between slides in your presentation

If you need to jump directly to a certain slide in your uploaded presentation, you can use the slide selector in the Pitchdeck web app toolbar at the bottom of the page. Clicking on any of the slides in the select box options will instantly jump to viewing that specific slide.

# Toggling slide numbers

You can show visible slide numbers in your presentation by clicking the Numbers button in the Pitchdeck web app toolbar at the bottom of the page.

# Using the pointer overlay

You can enable a pointer overlay by clicking the Pointer button in the Pitchdeck web app toolbar at the bottom of the page. This will show a pointer overlay on your presentation. You can change the default pointer (the red laser) to something else by clicking on another pointer in the list of pointer options available above the Pitchdeck web app toolbar while the pointer is active.

When the pointer is active, you can move your mouse around the screen normally to act as the pointer, displaying the pointer cursor you've selected.

Clicking the Pointer button again, while the pointer is active, will hide the pointer and the cursor options from your presentation.

# Downloading your speaker notes

You can download all of the speaker notes from your presentation to a .txt file by clicking on the Download Notes button in the Pitchdeck web app toolbar at the bottom of the page.

Notes also viewable in speaker mode

Besides using the Downdload Notes option, you can also view your speaker notes by using the Speaker Mode (or Remote) option.

# Toggling fullscreen mode

If you would prefer to view your presentation in full screen mode (instead of the windowed browser), you can click on the Fullscreen button in the Pitchdeck web app toolbar at the bottom of the page. You can exit fullscreen mode at any time by pressing the esc button on your keyboard, or clicking on the Fullscreen icon button again.

# Recording your designs to a video file

You can record your presentation in the Pitchdeck web app by clicking on the Record button in the Pitchdeck web app toolbar at the bottom of the page. This will prompt you to allow the page to access screen sharing and audio. Once you've done this, you'll be able to select the browser tab as the source that you would like to share and record.

To stop the video recording, you can click on the Stop button in your browser or click the Record icon button again.

Stopping the recording will automatically download your .webm video to your computer's default download folder.

Video will be auto downloaded if the tab is closed

Just in case you accidentally close the tab while the screen is being recorded, the Pitchdeck web app will automatically stop the recording and download the video file, recorded up until the time that the tab was closed.

# Opening and viewing your recorded video file

After the .webm file save been downloaded, you'll be able to upload it to your own website, send it to someone via Slack (or another method) or edit/convert it to another video. The easiest way to open the downloaded video file is to drag the downloaded file into your web browser, and using that to play it back.

# Activating the webcam overlay

You can use your webcam as a draggable/resizable overlay to sit over your presentation in the Pitchdeck web app by clicking the Webcam button in the Pitchdeck web app toolbar at the bottom of the page. This will prompt you to allow the page to access your webcam. Once you've done this, you'll be able to see your webcam sitting over the presentation area.

To change the position of the webcam overlay, you can click and drag your mouse on the overlay and move it to a new position anywhere on the screen. To resize the overlay, click on the overlay, then click and drag your mouse on the square anchor points around the square.

# Using the speaker mode remote

Speaker mode allows you to control your presentation from a different screen, or by using your phone/tablet.

# Using speaker mode to present from another screen

To open speaker mode in a new window from your main presentation window, you can click the Speaker Mode button in the Pitchdeck web app toolbar at the bottom of the page. This will pop-out a new window that you can drag onto a second screen, allowing you to control your presentation from one screen, while having the main presentation on a different screen.

You can navigate between your slides in speaker mode by clicking on the Prev and Next buttons in the speaker mode toolbar at the bottom of the page, or by pressing the Left Arrow or Right Arrow keys on your keyboard. Pressing the Space key on your keyboard will also move to the next slide in the main presentation window.

If you need to jump directly to a certain slide in your presentation, you can use the slide selector left hand side of the page. Scrolling through your slides and clicking on any of them will instantly jump to viewing that specific slide in the main presentation window.

# Changing the font size of your speaker notes

To toggle between different font sizes for your speaker notes, you can click the Font Size button in the speaker mode window; clicking the button will cycle through 18px, 22px, 26px and 30px font sizes. This can be useful if you're standing further away or closer to the screen while presenting.

# Using the presentation timer

To keep track of how long you've been speaking, you can use the presentation timer built-in to the speaker mode window. The timer will start automatically upon opening the speaker window, but you can click Pause at anytime to pause the timer; clicking Reset will restart the timer back to 00:00:00; clicking Start will resume the presentation timer.

# Toggling slide numbers

You can show visible slide numbers in your presentation by clicking the Numbers button in the speaker mode toolbar at the bottom of the window.

# Controlling the pointer

You can enable a pointer overlay by clicking the Pointer button in the speaker mode toolbar at the bottom of the window. This will show a pointer overlay on your main presentation window. You can change the default pointer (the red laser) to something else by clicking on another pointer in the list of pointer options available above the speaker mode toolbar while the pointer is active.

When the pointer is active, you can click/hold and drag your mouse around the pointer pop-up area in the speaker mode window to act as the pointer, which will control the position of the pointer on the main presentation window.

Clicking the Pointer button again, while the pointer is active, will hide the pointer and the cursor options in your main presentation window.

# Using your phone or tablet as the speaker mode remote control

To use your phone or tablet as a remote control for your presentation, you can click the Remote button in the Pitchdeck web app toolbar at the bottom of the page. This will open an overlay showing a QR code; scanning the QR code with the camera on your phone/tablet will open a new page in the web browser on your phone/tablet, allowing you to control your main presentation window wirelessly.

Controls in the phone/tablet are the same as the speaker mode window

Using the Remote option will load up the same remote control as the Speaker Mode option on your computer, with an optimized interface for smaller screens. For help using these controls, please see the documentation above.