In this video, Darshan Gajara from Consistent Creators podcast talks to Designer Advocate Luis Ouriach about his role at Figma, overcoming burnout, building an audience, and the breakdown of his viral Twitter threads.
Great examples of automating grunt work with the Automator plugin.
Follow up to last week's tweet about @Figma / @diagram automations. Here are 6 I use regularly:
— Greg Huntoon (@GregHuntoon) May 3, 2023
1. Set component property
2. Replace selected text
3. Reverse layer order
4. & 5. Add/remove auto layout to selected frames
6. Count selected objects
Alright, let's break them down... https://t.co/hVWMMNpxdG pic.twitter.com/wWI3eKlol2
A simple but fun technique for creating cool animations with mirrored components.
Random silly Monday fun in @figma with mirrored components pic.twitter.com/jfFRgvzCFN
— Double Glitch 🇺🇦 (@double__glitch) May 1, 2023
Ridd just launched Deep Dives, “a new interview series full of stories and advice to help you take a huge leap forward in your career”. In the first episode, Joey Banks gives an in-depth look at what it’s like to lead design systems at Twitter and Webflow, shares his strategies for structuring component libraries, working efficiently in Figma, and even keeping up with all of the latest plugins and tooling.
A set of social widgets for Bento with a little extra depth from Double Glitch.
A quick demo of the sticky scroll feature introduced as part of the recent Little Big Updates.
Lauren shows how to create a micro animation (also known as micro interaction) using a heart icon. These interactions add a really fun touch, and I love that the tutorial uses a heart icon from another tutorial by Miggi.
Lauren Andres discovers an older feature “delete and heal” to create smoother vector lines.
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
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
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
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
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
The new plugin by Meng To uses AI to upscale up to 8X the original resolution. Perfect for a variety of images including avatars, background images, Midjourney renders, and marketing images. (Interesting that the author heavily relied on ChatGPT 4 to build it.)
The recording of Miggi’s workshop livestream on using vector tools in Figma.
A pack from Double Glitch with a collection of pre-made text effects that you can apply to your designs with just a few clicks. Reminds me of the good ol’ days of downloadable Photoshop actions. While the pack is commercial, I suggest checking out a free demo in the Community and watching a screencast.
Christine Vallaure shares a few practical prototyping techniques and advanced tips & tricks. They include using Auto Layout with Smart Animate, stateful transitions with sections, nesting prototypes, interactive components, and more. This video is also available as an article.
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
So happy to see that this geeky tool hit 2nd place as a Product of the Day at ProductHunt last week! Its author Roman Shamin collaborated with me on Accessible Palette in the past and built a few other projects featured in this newsletter. While the UI of the color picker may seem complicated at first, its guiding principle was educating and demonstrating new concepts underlying the OKLCH and LCH color spaces. It’s my go-to tool for working with these color spaces and wide-gamut P3 colors.
For additional context, see an in-depth article OKLCH in CSS: why we moved from RGB and HSL by Roman’s co-author on using OKLCH color space in code, as well as my article Accessible Palette: stop using HSL for color systems on using perceptually uniform color spaces as a foundation for design systems.
In this Study Hall, Miggi covers several ways to add/edit images in Figma and demonstrates how to upload a video to use when prototyping or presenting.