Figma Tips & Tricks: Copy as PNG Across Applications

Summary

In this tutorial, Tutorial Tim demonstrates a new Figma feature that allows users to copy a PNG using a keyboard shortcut. He explains that on macOS, the shortcut is Command+Shift+C, and on Windows, it's Ctrl+Shift+C. Tim shows how to copy a frame with its elements and paste it as an image variant on the canvas, considering the export settings. He also highlights that the feature works in apps like Slack and Discord, and notes that without specified export settings, the image will default to 2x the original frame size.

Takeaways

• 🖥️ Tutorial Tim introduces a new Figma feature.
• 📋 You can copy a PNG using a keyboard shortcut.
• 💻 The shortcut for Mac OS is Command + Shift + C.
• ⌨️ The shortcut for Windows is Ctrl + Shift + C.
• 🖼️ The copied image considers the export settings applied to the frame.
• 📋 The image can be pasted directly onto the Figma canvas.
• 📤 It can also be pasted into other apps like Slack or Discord.
• 🔄 The feature preserves the image's copy even when pasted elsewhere.
• 📏 If no export settings are specified, the image defaults to 2x the frame size.
• 👍 This tip is helpful for designers needing to quickly share design elements.

Q & A

What is the main topic of Tutorial Tim's video?

The main topic of the video is a new Figma functionality that allows users to copy a PNG using a keyboard shortcut and paste it into various applications like the Figma canvas, Slack, Discord, etc.

What is the keyboard shortcut for copying a PNG in Figma on macOS?

The keyboard shortcut for copying a PNG in Figma on macOS is Command + Shift + C.

What is the keyboard shortcut for copying a PNG in Figma on Windows?

The keyboard shortcut for copying a PNG in Figma on Windows is Ctrl + Shift + C.

What happens when you copy an element using the shortcut and paste it into the Figma canvas?

When you copy an element using the shortcut and paste it into the Figma canvas, it pastes the image variant of that element, taking into consideration the export settings applied to it.

Can the copied PNG be pasted into other applications besides Figma?

Yes, the copied PNG can be pasted into other applications like Slack, Discord, or any other app that supports image pasting.

How does the Figma feature handle export settings when copying a PNG?

The Figma feature takes into consideration the export settings applied to the frame when copying a PNG using the keyboard shortcut.

What is the default behavior of the 'Copy as PNG' shortcut if no export settings are specified?

If no export settings are specified, the 'Copy as PNG' shortcut will default to exporting or pasting the image at 2x the original frame size.

What is the benefit of using the 'Copy as PNG' shortcut in Figma?

The benefit of using the 'Copy as PNG' shortcut is that it allows for quick and easy sharing of design elements as images across different platforms, while also considering the applied export settings for consistency.

Can you provide an example of how to use the 'Copy as PNG' feature in a real-world scenario?

In a real-world scenario, a designer can use the 'Copy as PNG' feature to quickly share a design element with a team member on Slack or Discord for review or discussion without leaving the Figma application.

What other Figma tips and tricks might Tutorial Tim cover in his videos?

Tutorial Tim might cover various Figma tips and tricks such as using components, creating responsive designs, utilizing the auto-layout feature, and optimizing workflows in his videos.

Outlines

00:00

🖥️ Figma's Copy as PNG Shortcut

Tutorial Tim introduces a new Figma feature that allows users to copy a PNG image using a keyboard shortcut. The shortcut varies by operating system: Command+Shift+C for macOS and Ctrl+Shift+C for Windows. When copying, Figma considers the export settings applied to the frame. The copied image can be pasted directly onto the Figma canvas, Slack, Discord, or any other application. The feature is particularly useful for designers needing to quickly share design elements. If no export settings are specified, the image defaults to being pasted at 2x the original frame size.

Keywords

💡Figma

Figma is a popular user interface design tool used by professionals for creating and collaborating on designs. In the video, the presenter refers to Figma as the platform where the new functionality is being showcased, highlighting its role as the central tool for the tutorial.

💡Keyboard Shortcut

A keyboard shortcut is a combination of keys pressed simultaneously to perform a specific function or action in a software application. In the context of the video, the presenter teaches viewers how to use the keyboard shortcut Command Shift C on macOS or Ctrl Shift C on Windows to copy a PNG image in Figma.

💡PNG

PNG stands for Portable Network Graphics, a file format used for digital images, known for its lossless compression and support for transparency. The video demonstrates how to copy a PNG image from Figma using a keyboard shortcut, emphasizing its utility in design workflows.

💡Canvas

In Figma, the canvas refers to the virtual workspace where designers place and arrange their design elements. The video script mentions pasting the copied PNG image onto the canvas, illustrating the practical application of the keyboard shortcut within the design environment.

💡Layers Panel

The layers panel in Figma is a sidebar that lists all the elements in a design, allowing users to organize and manage their components. The script describes selecting a frame and noting the elements within it in the layers panel, which is crucial for understanding the organization of design elements.

💡Export Settings

Export settings in Figma determine how and in what format a design element is saved or shared. The video explains that the copy as PNG functionality takes into account any export settings applied to a frame, ensuring that the copied image retains the desired specifications.

💡Slack

Slack is a team collaboration software that allows for messaging and file sharing. The video script includes an example of pasting the copied PNG image into Slack, demonstrating the cross-app functionality and utility of the keyboard shortcut for communication and collaboration.

💡Discord

Discord is a communication platform widely used for text, voice, and video conversations, often by gaming communities and professionals. The presenter mentions uploading the PNG image to Discord, showcasing another use case for sharing design work outside of Figma.

💡Image Variant

An image variant in the context of the video refers to a version of a design element that has been copied as an image file. The script describes pasting an 'image base variant' into the layers panel, indicating the transformation of a design element into an image format.

💡2x Frame Size

Refers to doubling the size of the original frame when copying as a PNG without specified export settings. The video mentions that if no export settings are defined, the default action is to paste the image at twice the size of the original frame, which is an important detail for maintaining design integrity.

Highlights

Tutorial Tim introduces a new Figma functionality for copying a PNG with a keyboard shortcut.

The keyboard shortcut for copying a PNG on macOS is Command + Shift + C.

On Windows, the shortcut is Ctrl + Shift + C.

Copying a frame with the shortcut considers the export settings applied to it.

Pasting the copied PNG creates an image variant in the layers panel.

The copied PNG can be pasted into various applications like Slack or Discord.

The feature preserves the image when pasted into different platforms.

If no export settings are specified, the PNG is copied at 2x the original frame size by default.

The tutorial demonstrates how to copy and paste the PNG into Slack.

The process of uploading the copied PNG to Discord is also shown.

The tutorial provides practical applications for designers using Figma.

The feature is helpful for quick sharing of design elements.

The tutorial is educational and aimed at enhancing productivity in design workflows.

The video concludes with a reminder to consider the export settings when copying PNGs.

Tutorial Tim invites viewers to look forward to the next tutorial.

Transcripts

what is going on everyone tutorial tim

here and today i'm going to show you

another

figma tip and trick figma's released a

a new piece of functionality where you

can copy a png

uh with utilizing a keyboard shortcut

and you can paste that into the canvas

or you could paste that into slack

or discord or any other app

and you we're going to go ahead and

check that out

so how do we go about doing this first

the shortcut key on

mac os here is command shift c and on

windows it's ctrl shift c

so if i go ahead and select this frame

you'll notice that this frame

and in the layers panel there are all of

these elements that live within it right

so the the main difference here is if i

utilize shortcut key command shift c

and then i go ahead and click off onto

the

onto the canvas and hit command v i've

just pasted

the image variant of this and it the

the interesting thing is it actually

took into consideration the

the export settings i had applied to it

uh when copying this using the keyboard

shortcut which is super helpful right

and now i have this image base variant

here in the layers panel and not only

can you paste it here

but you can also go ahead and say if i

am in slack i can go ahead and hit paste

and you'll notice that

it did preserve that copy and now i can

paste that into slack and send it to

myself if need be

and i just just to show you how this

works i could even send this

via discord as well i can go ahead and

upload that

image if i wanted to and there you have

it

that is how you utilize the

copy as png keyboard shortcut i hope you

found that helpful

and one other thing to note is that the

if you don't have any export settings

specified like i did myself

here on this frame before copying it

the copy as png shortcut key will

default to

exporting that or pasting it at 2x of

the original frame size

um so just keep that and consider in

mind and i hope you enjoyed this video

and i'll catch you in the next one