Figmalion 2.0. Copy and paste. FigJam’s dedication to delight.
Welcome to the new Figmalion 2.0β! Just a few weeks before Figmalion’s 2nd birthday and 50th issue, I launched the new brand and website. It’s not just a newsletter anymore, but the biggest knowledge base about Figma. All 1,325 links from the past issues have been organized by type and topics, so now you can browse for cool resources or dive into specific areas of interest like Developer Handoff or Design Systems. There is still more to do, but the new website forms a solid foundation for future updates and improvements.
Fun fact: the name “Figmalion” is a pun on Pygmalion, a legendary sculptor who fell in love with a statue he had carved. (There is also a really fun play based on this story by George Bernard Shaw.) That’s where the bust on the old logo came from, but eventually, I fell out of love with it. Meet the new logo by lettering artist Anna Chistyakova! I truly love it and hope it’ll stick for a long time.
— Eugene
Sponsor
Need creative inspiration, like, every week?
Join more than 400,000 people getting a weekly dose of the best, coolest, and latest in design and no-code sent directly to their inbox.
App Updates
A new and improved copy and paste
Figma improved copy and paste to make it more consistent and predictable. Now you can replace selected objects with another object that you’ve copied to your clipboard (⇧⌥⌘V or Shift-Ctrl-Alt‑V), paste an object into multiple frames or groups simultaneously, and paste at the cursor location. To see how it all works, check out a playground file. (Figma launched this feature with a different shortcut, but changed it after listening to the community feedback.)
Paste to replace, paste here, and multi-paste in Figma
Miguel is demonstrating the new copy and paste capabilities.
Copy and paste positioning
Learn how objects will position when using copy and paste in Figma.
Line spacing for bulleted and numbered lists
You can now adjust the spacing between listed items in the type details panel. Finally! Such a small but important change — I had to imitate this with an Auto Layout in the past.
iPhone 13 device frames and frame presets
Figma is now ready for iPhone 13 release.
Interactive Components & Auto Layout
Interactive Components (currently in beta) now work with Auto Layout, and that opens doors for some fun interactions.
What’s new in Figma: September 2021
A quick summary of all the recent updates to Figma and FigJam.
Using Figma
Move from Sketch to Figma in 5 minutes
Karl Emil James Koch writes for 8px Magazine about using group renaming and his plugin the Batch››styler to migrate a design system from Sketch to Figma.
It’s time to fix “mixed” values for Auto Layout padding
Mariz brings a great point — the current implementation not only hides the values but also makes you click on another UI control to change them.
10 keys to nailing responsive design
Ridd shares great tips on how to make your designs more developer-friendly.
Baseline grid
Miguel with a tip on setting up a lightweight baseline grid with Layout Grid.
Percent perfect gradient styles
While this is still a hack, I didn’t realize that a big nudge value affects gradient stops. Good to know!
Fun effects with boolean groups
Boolean groups + vector networks + rounded corners = magic! Don’t miss Miguel’s original thread, and check out where they brought it in the end 🤯
Keep an eye on your resources
Search for “Resource Use” in Quick Action (⌘/) menu to show the status of resources in your file.
Placeholder Slot Component in Figma
“Utilize the power of slots and Figma’s native instance swapping capabilities to customize component content without ever needing to detach component instances ever again.”
Bulk edit layer names in Figma
Nadia Sotnikova on how to edit layers in bulk to ensure consistent naming in the design system.
LottieFiles: Still frame to Figma
“In this video, we will guide you on how to select a single frame from a Lottie animation from the LottieFiles Library and export it to Figma. Then, we will use this new SVG and place it as part of our UI and animate it in Figma using the prototype feature.”
How to design powerful components and buttons with Variants and Auto Layout
Dennis Cortes goes over his approach to building scalable components in Figma using Variants, Variant Groups, and Auto Layout. This video touches on the basics, from definitions of each feature to more advanced methods of building out different types of variants in Figma.
Convert Design Into a Real Website
Designmodo on how to export Figma designs to websites using a no-code tool Siter.io.
FigJam
Zoom controls in FigJam
New plus (+) and minus (-) buttons to make zooming in and out even easier in FigJam.
Multiple text sizes in FigJam
You can now mix different text sizes in the same text box, sticky note, or shape.
How FigJam’s dedication to delight helped build a thriving design community
Emily Lin, the lead product manager of FigJam, shared some of her experiences and lessons learned from launching FigJam with a team at Productboard.
Collaborating in FigJam
Ana Boyer on the best practices and strategies for collaborating in FigJam throughout the entire design process — from your first brainstorm to the final review.
Intro to FigJam: How to brainstorm with an online whiteboard
“FigJam is an online whiteboard for teams to ideate and brainstorm together. Purpose-built for the earliest stages of design, FigJam makes everything from discovery to design sprints easier and more fun — whether you’re working alone or collaborating with your extended team. Let’s see how we can use FigJam collaboratively in an online brainstorming session!”
Resources
Rendition
“Rendition is the best way to hand off code to your developer. It’s a Figma+Github plugin that will write UI code for you from designs. Rendition speeds up the time it takes to implement designs by automating the boring parts of front-end development. It also syncs designs from code back into Figma, allowing you to easily work off of the latest designs.“
Figspot
Figspot is a Twitter-like feed of all comments from authorized Figma teams. Shown as threads and you can reply directly from the feed without loading a Figma file.
Bootstrap 5
A simple UI kit updated for the newest version of Bootstrap.