Tweets
Liquid mesh gradients
Cool technique from Nitish Khagwal for creating animated liquid mesh gradients.
How I create liquid mesh gradients in @figma without any plugins, a thread 🧵... pic.twitter.com/5Vhm02h0FP
— Nitish Khagwal ✨ (@nitishkmrk) May 3, 2023
A glowing glass effect
Fons Mans is back with a new tutorial on how to create a glowing glass effect in Figma.
Tutorial Thread ✨
— Fons Mans (@FonsMans) April 28, 2023
Learn how to create a glowing glass effect with @figma, in just a few easy steps — no plugins needed!
Ready? Let’s dive in 👇#sponsored pic.twitter.com/6NNqVmrYfa
Ignore Auto Layout when dragging
Hold the Spacebar when moving an object to ignore Auto Layout.
🧙♀️ 11 second tip 🧙♀️
— Helena (@minor_axis) December 9, 2021
Ignore auto layout in Figma by pressing space bar as you drag an object. pic.twitter.com/fjUe8gcAAz
Double-clicking layer icons
MDS with a great shortcut of double-clicking on a layer icon to zoom into selection.
TIL double clicking layer icons in @figma zooms to selection. pic.twitter.com/hvNs0l4BEr
— MDS (@mds) April 26, 2023
Color-coding components
A good tip from Jan Toman on color-coding different types of components inside a Figma library, which allows everyone to identify the component’s source and set the right expectations from these components.
When using @figma libraries, we found color-coding different types of components extremely helpful.
— Jan Toman (@HonzaTmn) April 25, 2023
This allows everyone in the team to identify the component's source quickly and set the right expectations from these components.
Some tips and learnings in the thread 🧵 pic.twitter.com/FMr7kjSVBv
Debugging & refactoring a variant component
On a similar note, this thread by Luis is a great walkthrough of debugging, reducing complexity, and refactoring a tricky variant component. The core part of his approach is slicing everything up into composable parts.
Last week I was asked by someone in the Figma community to help debug and refactor their variant component
— luis. (@disco_lu) April 25, 2023
So I'm going to try and walk through how I did it! Let's see if it works as 1 million tweets 🐦
The short answer is: components everywhere pic.twitter.com/DKgjC5oNWg
The designer advocates team
Regardless of going to the in-person Config this summer, this is a great intro of the international designer advocate team. Here is the full list for you to follow — Lauren Andres, Hugo Raymond, Hiroki Tani, Julia Kestner, Mallory Dean, Corey Lee, Alexia Danton, and Sebastian Metel.
A little nervous to come to Config without knowing anyone? FEAR NO MORE! The designer advocate team @figma is here for you. Some of us made a lil intro so you have friendly faces in June. 🫰 pic.twitter.com/fDXzM48msC
— Mal (see u at config) (@mdeandesign) April 27, 2023
Glowing loader
A really cool glowing effect made by Samarth Jajodia, likely with a combination of the blur effect and color blend modes. Check out his other experiments as well.
Crafty Sunday for animating a cool glowing loader in @figma💜 experimenting on how RGB model can produce the widest range of beautiful colours 🏳️🌈
— Samarth Jajodia (@samarthjajodia) April 16, 2023
Keep vibing for my next version with crazy tutorials.#figma #prototyping #colours #animation #motion #poster #art #graphics #design pic.twitter.com/sAcP2zqGvF
Emojis in the prop names
Luis with a nifty list of suggested emojis to indicate different kinds of component properties.
I've been going deep on component properties recently, and found using emojis in the prop names really helps understand their purpose
— luis. (@disco_lu) April 19, 2023
Here's my current list:
✍️ Label
◈ Type
↔️ Size
🔁 Swap instance
📈 Data
🖱 Interaction
←️ Left toggle
→️ Right toggle
🔘 Toggle pic.twitter.com/3pWFbDCdV1
Sunset Drive
Cool animation by Double Glitch using a smart technique from Vijay Verma (see Figma file).
Soundrack of the day:
— Double Glitch 🇺🇦 (@double__glitch) April 14, 2023
▶︎ Kavinsky — Nightcall
Made with Advanced text effects for @figmahttps://t.co/kvIQ3EkcM3 pic.twitter.com/2XOMMHDo4R
Using sections for component documentation
Sections are great for organizing components, documenting states, grouping elements in external embeds, and better visibility of component and frame names.
Are you using #sections in @figma yet? They are one of the most underrated features in Figma. I switched my Figma component documentation entirely to sections and it has made a huge difference. Here's why: pic.twitter.com/WaqErkYBLi
— Christine Vallaure (@moonlearning) April 11, 2023
Creator Micro and iPad
That Creator Micro keyboard and FigJam on iPad combo is pretty slick.
Graphic Designers: “Does it work on ipad?”
— work louder® (@work_louder) April 10, 2023
Me: wireframing our keyboard configurator with the Creator Micro in @figma for ipad😌 pic.twitter.com/ECJvBjGenK
Speaking at Config 2023
I didn’t realize how competitive the speaker selection is at Config 2023. This year the Figma team received over 950 session proposals, and during previous years they’ve had enough time for only about 25.
I wasn't given the opportunity to be a speaker at Figma's #Config2023 buuuut they gave me a free ticket as a thank you still 🥹 pic.twitter.com/v0IurhQyxl
— Νατε (@olobzjr) April 7, 2023
Quick replies in the mobile app
Amazing intro video of the 5x faster comment replies in the updated mobile apps. See also the comparison of performance before and after this release.
How do you do, fellow kids?
— Hugo (@_hraymond) April 11, 2023
A whole bunch of improvements have dropped on the @figma Mobile App, one of which is a much quicker way to react and reply to comments, check it out!https://t.co/CthBTjbrr8 pic.twitter.com/cv3PNQE9Sy
Strengthen relationships between designers and developers
Developer Advocate Jake and Designer Advocate Lauren have an insightful conversation about strengthening relationships between designers and developers. I love Jake’s point that trust is essential and we don’t need to understand every part of each other’s work to collaborate effectively. (Let’s hope Figma Detached is a new series, as I want more!)
sat down with my pal @laurenbandres at @figma to talk about how we strengthen relationships between designers and developers! pic.twitter.com/eESfusGfqc
— jake (@jak___e) April 6, 2023
Icebreakers or games in FigJam
So many great ways to warm up the room in replies to Femke. I’d love to try This or That, play two truths and a lie, draw blind contour portraits, or look for common ground with my team.
What are your favourite icrebreakers or games in Figjam to help warm up the room?
— femke (@femkesvs) April 3, 2023
Randomized avatars
I love seeing how teams improve their workflows with internal Figma plugins. Here, Bryan Berger from Discord built a handy plugin to randomize avatar fills from their design system library. The source code is available on GitHub. (I guess something is in the air, as Miguel Solorio is building something similar for his specific use case.)
Built a handy new @figma plugin to randomize avatar fills from our design system library (growing!). Caching prevents duplicates and category filtering allows one to be intentional about the vibe. pic.twitter.com/AxLfbkM6Bo
— Bryan Berger (@bryanberger) April 6, 2023
Tips & tricks for developers
Tru Narla, Software Engineer at Discord, shares some quality tips on using Figma as a developer — Inspect panel, copying code snippets, and exporting full-sized assets.
Psst... developers, want to become @figma pros??? Well here's some tips and tricks to make working in Figma a LOT easier! pic.twitter.com/1nRR1bFgf4
— mewtru •ᴗ• (@trunarla) April 5, 2023
Focus rings
Luis with a cool technique for adding focus rings to a button using an absolutely positioned component instead of a shadow hack.
Quick tip on creating proper focus rings on components ❖
— luis. (@disco_lu) April 4, 2023
Set up a "focus ring" component, and then use absolute positioning, combined with left/right and top/bottom constraints to make it stick to the edges
Bye bye to shadow hacks 👋 pic.twitter.com/khTfVY5IBa
Getting stuck when building the first design system
Molly Hellmuth shares the top 10 places where her students get stuck when building their first design system in Figma. Many of those involve tactics that once were considered best practices but got depreciated by newer features and approaches. Her answers to the tricky questions come from a ton of knowledge and experience.
💡 Top 10 places my students get stuck when building their first design system in Figma.
— Molly Hellmuth (@molly_hellmuth) April 7, 2023
Keep reading for their questions & my answers.. pic.twitter.com/w1H7US13Dh