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.
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.)
Miguel is demonstrating the new copy and paste capabilities.
Learn how objects will position when using copy and paste in Figma.
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.
Figma is now ready for iPhone 13 release.
Interactive Components (currently in beta) now work with Auto Layout, and that opens doors for some fun interactions.
A quick summary of all the recent updates to Figma and FigJam.
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.
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.
Ridd shares great tips on how to make your designs more developer-friendly.
Miguel with a tip on setting up a lightweight baseline grid with Layout Grid.
While this is still a hack, I didn’t realize that a big nudge value affects gradient stops. Good to know!
Search for “Resource Use” in Quick Action (⌘/) menu to show the status of resources in your file.
“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.”
Nadia Sotnikova on how to edit layers in bulk to ensure consistent naming in the design system.
“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.”
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.
Designmodo on how to export Figma designs to websites using a no-code tool Siter.io.
New plus (+) and minus (-) buttons to make zooming in and out even easier in FigJam.
You can now mix different text sizes in the same text box, sticky note, or shape.
Emily Lin, the lead product manager of FigJam, shared some of her experiences and lessons learned from launching FigJam with a team at Productboard.
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.
“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!”
“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 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.
A simple UI kit updated for the newest version of Bootstrap.