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.