Tweets
Spring animation based on a feeling
Love this behind-the-scenes video of Nikolas Klein and William Wu from Figma experimenting with how fast they can set a spring animation based on a feeling.
One more @figma behind the scenes around building the editor for spring animations w/ @willyvvu and @rickrajj.
— Niko (@nikolasklein) June 22, 2022
Once we got a rough version working we tried out how fast you can set a spring animation based on a _feeling_ (aka me making weird noises).
Have fun! pic.twitter.com/YOa5N81NiF
Jumping to the object
Super useful tip: double-click on the icon of an object in the Layers panel to jump to it. (Double-clicking on a name will trigger renaming.)
No fucking way. I’ve just learned that if you double click the Frame/Autolayout/text (whatever it is) icon in the layers panel, Figma will jump to it. 🤯 pic.twitter.com/HmgWoHHCYQ
— James 🤌🏻 (@jamesm) June 20, 2022
Middle-clicking on a hyperlink
Middle-clicking or ⌘-clicking on the hyperlink goes directly to the target.
Did you know you can now middle-click on a @figma hyperlink to directly jump to target?
— Mr. Biscuit (@SShuaiqi) June 18, 2022
Also If you don't like clicking on the middle mouse button you can also ⌘click on the hyperlink pic.twitter.com/k0TdZWUesO
Figma for Devs
A short overview of the most important parts of Figma for developers.
Most times we're too busy looking at Figma as a designer. Ever wondered how Figma works with View-only access?
— manocado 🥑 (@onowomano) June 18, 2022
This thread is mostly for Devs, or anybody else that uses Figma without Edit access 🙃
🧵 pic.twitter.com/Na8kDCUfd6
Generative Art Plugin Beta
Generative Art by Pawel Kontek is one of the coolest plugins I’ve seen in a while. It’s currently in beta and I can’t wait to play with it after it comes out!
"Ultrasound Hummingbird" in @figma. Playing around with manipulated #generativeart on the output of my next Figma plugin. Sign up here for the upcoming beta: https://t.co/HfaNrEN6lg @FigmaPlugins @FigmaHunt @fof_artists pic.twitter.com/7VJ9za4yiL
— Pawel Kontek (@PawelKontek) June 12, 2022
Savage Dog
Martin Bekerman is a great artist — make sure to see more of his works.
Here's an inside look at the guts of the new PFP as built in Figma. Simple shapes with blurs + gradients are really powerful. pic.twitter.com/IA4snshZQM
— 𝙎𝘼𝙑𝘼𝙂𝙀 𝘿𝙊𝙂𝙎 ™ (@mysavagedogs) June 14, 2022
Animating carousels
Supafast!
🌁 Animating carousels in @figma, supafast! pic.twitter.com/1PYgLmsJ6g
— Zander Whitehurst (@zander_supafast) June 13, 2022
Designing in P3
Rasmus, who used to work on this at Figma, shares his workflow for designing in P3 color space and exporting assets in sRGB. Sadly, it’s still a very tricky process.
I wish Figma implemented color space support (color management.) I design in P3 and my workflow for exporting images is: export, run imagemagick to assign the correct profile (my workspace profile). Finally, run imagemagick to convert the image’s colors to sRGB.
— Rasmus Andersson (@rsms) June 15, 2022
3 wicked FigJam widgets
Cool widget recommendations by Zander Whitehurst: Voice Memo, Storymapper, and FigJenda.
🎁 3 wicked Figjam widgets in @figma pic.twitter.com/3VldjuzczV
— Zander Whitehurst (@zander_supafast) June 8, 2022
Create Figma Plugin v2
Yuan Qing Lim announced a new version of his boilerplate for creating Figma plugins with support for dark mode, with all components using Figma‘s official color tokens.
Excited to announce that v2 of Create Figma Plugin now supports dark mode, with all components themed using @figma’s official color tokens!
— Yuan Qing Lim (@yuanqinglim) June 9, 2022
👉 See all the components in the Storybook: https://t.co/jSqLL3ix5E@FigmaPlugins pic.twitter.com/MjhVFxPtpV
Adjust all paddings in Auto Layout
Neat shortcut: ⌘-click on the Auto Layout padding field to adjust all paddings.
Neat @figma easter egg: ⌘ + click in an auto-layout padding field to adjust all paddings. pic.twitter.com/UCt34URAqi
— Mordechai Hammer (@_mordechai) June 7, 2022
Make your own font in Figma
Rasmus Andersson shows how to make a simple font in Figma.
Sunday funday: Make your own font in @Figma.
— Rasmus Andersson (@rsms) June 5, 2022
Copy this file to get started: https://t.co/e9SyhPZpqL pic.twitter.com/rM6ctpKB3h
“Switchboards” in Figma
Ridd: “Switchboards are main components that have been pulled out of a chunk of UI so as to function as a single place to control all of the prototyping connections”.
One of my favorite design tactics is creating "Switchboards" in Figma.
— Ridd 🏛 (@Ridderingand) June 5, 2022
It's a waaaayy more efficient way of prototyping.
Here's how they work 👇 pic.twitter.com/SmU89pknwS
Handing off components with properties
Ridd warns that using component properties introduces a new type of responsibility for designers and explores what the most effective handoff deliverable actually looks like.
By now you’ve probably seen a few of these before/after screenshots like the one below:
— Ridd 🏛 (@Ridderingand) May 31, 2022
Pretty incredible, right?
Yes, BUT... pic.twitter.com/wE1HVHY2yI
Infinite tables
Luis shows a neat trick on how to create an “infinite table” using component properties, where we can toggle on however many columns or rows we need in designs.
Tips time!
— luis. (@disco_lu) May 30, 2022
Using component props, we can create "infinite tables"
So we can toggle on however many columns / rows we need in designs
This prevents us maintaining large variant sets for every permutation of table 🍽
Community file to play with: https://t.co/WqNM5SMjSE pic.twitter.com/yhefqrNImC
Transparent fill with background blur effect
A nice trick from Gleb on how to create a transparent fill that supports a background blur effect.
Epic @figma tip I learned from @edpratti (Material You file)
— Gleb Sabirzyanov ❤️ (@gleb_sexy) June 1, 2022
Transparent fill that supports background blur effect! 🤯🔥
1. Create a white fill
2. Change the fill blend mode to Darken/Multiply
3. Optional: create a style “Transparent”
1% or 0.01% opacity trick is dead! 💀 pic.twitter.com/U63DVuvTNQ
Figma Tip: Start Using Component Properties
Molly Hellmuth with 5 step-by-step examples on how and when to use Component Properties.
💡Figma Tip: Start Using Component Properties
— Molly Hellmuth (@molly_hellmuth) June 1, 2022
Component Properties were Figma’s biggest release at Config2022. They’re shaking up how components should be built on a foundational level, in a big/great way!
Keep reading for 5 step-by-step examples on how and when to use them.. pic.twitter.com/o967PIedl1
Negative values within Auto Layout
Joey Banks creates a card layout similar to iOS’s Wallet app with negative values within an Auto Layout container.
I'm so happy that @figma finally allows for negative values within Auto Layout containers, which make card layouts, like those within iOS's Wallet app, really easy to create! ↔️ pic.twitter.com/InlupvM3Op
— Joey Banks (@joeyabanks) May 24, 2022
Truncated text shortcut
Another great shortcut from Miggie to avoid going into the advanced type settings menu — click on the “Fixed size” icon while holding Option (Alt) to enable truncated text. (With so much free space to the right, I wonder what’s the justification for hiding this option in the menu.)
Option (alt) + click on 'Fixed' text to convert text field to have truncate text behavior in @figma. #figmatip pic.twitter.com/aDhkDL7b3j
— Miggi (@miggi) May 19, 2022
Default Auto Layout values
Cool minor improvement — default Auto Layout value now reflects the Big Nudge number instead of being hardcoded to 10 pixels. You can change it in the Preferences → Nudge amount.
Did the default values in Auto layout change to your nudge amount before or after @figma #Config2022? pic.twitter.com/1OWEQVsiRr
— Dan Eberhardt🏊🏻🚴🏻🏃🏻 (@incontrast) May 15, 2022