Rad product and home page! “ShaderGradient is a design tool to create beautiful moving gradients. Make stunning visuals by adding natural movements and effects to the gradient. It's available on your favorite tools, like Framer, Figma, and React.”
New plugin for working with perceptual color and OKLCH color space! This initial release allows inspecting and manipulating color stops in gradients using the OKLCH color space — pretty useful if you have an existing gradient that needs a little tweaking. Bonus point for providing precise control over color stop positions!
A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.
Here are some helpful gradient tips for @Figma:
— Joshua Guo (@jgspace_design) September 6, 2023
- Scroll: Adjust the color hue.
- Option / Alt + Scroll: Adjust the opacity.
- Double-click handle: Evenly distribute the color handles. pic.twitter.com/N8gI79r8ho
Fons Mans shows how to create a dreamy multi-color gradient with Figma without relying on any plugins.
New tutorial! ✨
— Fons Mans (@FonsMans) September 13, 2022
Learn how to create an 'ultra gradient' with @figma, without using any plugins!
Let's get started 👇 pic.twitter.com/5eMYoPJc3z
Oğuz Yağız Kara shows how setting the color of the transparent gradient stop helps make it softer.
✨ Design • Tips #1
— Oğuz (@oguzyagizkara) May 24, 2023
Big news! Today, I'm sharing exclusive design tricks that you won't find anywhere else. These tips will take your work to the next level.
First up: learn how to create a softer gradient.
Get ready to elevate your design game 🪄 pic.twitter.com/ACOtXt0ycb
What, an old-school plugin without AI? 🤯 “Dithercore creates cool dithered images reminiscent of '80s and '90s computer graphics. It brings back the primitive technology of early PCs by utilizing pixel patterns and color schemes from that era.“
Effortlessly remove backgrounds or isolate objects using AI.
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.
Danny Sapio with a few tips on working with paths, anchors, and fills to speed up your drawing workflow in Figma. This article is also available in a video format on YouTube.
A set of unique customizable mesh gradient blends.
The lack of precision in the gradient tool is an old annoyance, but as this tweet grew in popularity I’ve been quietly hoping that maybe the fix would make it to the Little Big Updates. Regardless, the replies provide a ton of smart workaround — distributing stops through double-clicking, nudging stops, using the Precise Gradients plugin, and even looking in the Inspect tab!
Hey @figma, can you show me the position values on here please? I don’t like having to eyeball 15%… pic.twitter.com/cWVLzqNAda
— Arix (@Arix_Ki) March 21, 2023
This website made my head spin! A new Figma plugin and Framer Component for creating highly customizable beautiful moving gradients.
A new plugin by Vijay Verma: “The plugin utilizes the Metavatar algorithm to create stunning gradient backgrounds in a variety of cool colors. It also has the added feature of adding noise to make the gradients even more visually striking.”
In this tutorial thread, Fons Mans walks through the steps of creating Linear-like gradients. The community file is available as well.
New Tutorial! ✨
— Fons Mans (@FonsMans) January 17, 2023
Learn how to create "@linear gradients" with @figma in just a few easy steps.
Let's get started 👇 pic.twitter.com/08wGSA9Ij1
Miggi with two great tips on managing gradients. I wish we didn’t need to resolve to a 100 pixels square hack, but often it gets the job done!
Someone asked yesterday about managing gradients in @figma, here are two ways to handle.
— @miggi@masto.ai (@miggi) January 5, 2023
1. Double click on a gradient stop to distribute evenly.
2. You can nudge / big nudge gradient stops. On 100x100 square, I can move over 5 times in nudges of 10 to get placement at 50%. pic.twitter.com/SqkwTPHxcc
If programming shaders is a bit too much for you, check out this video on how to create an animated mesh gradient in Figma with a combination of a few plugins and built-in tools.
Dan Hollick with a fantastic deep dive on shaders. While this specialized area of graphics programming may seem too niche, shaders have been gaining popularity in UI design for animating gradients and creating cool special effects. In Figma, you can play with shaders inside Rogie’s popular Noise & Texture plugin.
You can read the unrolled version of this thread here: https://t.co/nSJsBnSzDM
— Dan Hollick 🇿🇦 (@DanHollick) December 15, 2022
One of my personal favorites 🙌 Organize the gradient panel faster by double-clicking on gradient stops to evenly distribute them.
This past maker week @figma I had some extra hours and worked on adding the ability to equally distribute gradient stops with a simple double click.
— trevor aquino 😶🌫️😰 (@TrevorAquino) August 2, 2022
However this wasn't my own idea. One of my favorite parts of Figma is being able to interact with the community of users.
1/2 pic.twitter.com/Pik8GXWyjy
Miggi shows how to use images as masks.
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