Tweets
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
Figma SF office
Every time someone posts pictures of Figma’s SF office, I’m blown away by its beauty and creativity.
GDC may be over, but I can't stop networking 😂
— Antonia Forster (@AntoniaRForster) March 26, 2023
I got a tour of the @figma office before I leave SF tonight. So gorgeous! 🌈 pic.twitter.com/E3VdL6lKAx
Magic Messages
Discord designer Daniel Destefanis built an internal plugin for generating entire conversations using ChatGTP and rendering them using their design system. This is an excellent example of automating a mundane part of day-to-day work with AI.
Built a new @figma plugin I call "Magic Messages". It generates entire conversations using ChatGPT and renders them using our design system at Discord. You can set a topic, # people talking, and # of messages. This way we can generate content for our designs more easily. pic.twitter.com/4M01yB87tZ
— Daniel Destefanis (@daniel__designs) March 29, 2023
Haptics on the desktop app (Mac)
Is this an important update? No. But is it fun? Hell yes! The FigJam team keeps delivering the most delight per buck.
9/32 Haptics on desktop app (Mac)
— Figma (@figma) March 28, 2023
Feel design and collaboration coming together with new haptics when you emote, high-five in FigJam, and more.
(And if you don't like it, you can turn it on/off in Preferences) pic.twitter.com/9YVbEL7krk
Sticky scrolling in prototyping
While I don’t often prototype interactions, I love the demo of all the use cases in this thread by Ana Boyer! Engineer Jediah Katz is also dropping some tips and tricks and Zander Whitehurst made a cool demo. Don’t miss the sticky scrolling playground file as well.
I don't know about you, but I was SO EXCITED to learn that Sticky Scroll is part of @figma's Little Big Updates:
— Ana Boyer (@_AnaBoyer) March 28, 2023
For context, sticky scroll allows you to stick a nested element to the top of a frame when you vertically scroll. Some great use cases include: https://t.co/ma9OVMM6Qi
Batched comment notification emails
I hope this is the first step to batching all comments into a daily digest for lower-priority files 🤞
11/32 Batched comment notification emails
— Figma (@figma) March 28, 2023
Stay updated on design feedback without the unnecessary distractions with consolidated email notifications. pic.twitter.com/23VKeMfQev
Rich text in comments
Nice! Markdown FTW.
10/32 Rich text in comments
— Figma (@figma) March 28, 2023
Get more across by bolding, italicizing, and adding links.
To hyperlink your comments, select the text then hit Cmd + K (Ctrl + K on Windows). pic.twitter.com/cWOunN79eO
Align to nested instances
Now you can align layers with layers inside a component instance. Check out the thread by Tom Lowry and don’t miss his detailed spec for different scenarios!
18/32 Align to nested instances
— Figma (@figma) March 28, 2023
Now you can select layers to align to nested instance sublayers. pic.twitter.com/WTiPisRhLW