#Effects
Cool glowing button
Vijay wrote a step-by-step guide on making a button with a cool multi-color glowing effect.
I always wanted to mask the gradient to create a button like this in @figma. Finally, I found a solution. Here, Sharing the behind-the-scenes and video tutorials to create this cool button.😍 pic.twitter.com/ldzOSVAodb
— vijay verma (@realvjy) January 17, 2023
Inner shadows
Vijay is experimenting with inner shadows in Figma. Despite a limit of only 8 shadows, it’s usually enough to create a 3D effect on any shape.
Experimenting with inner shadows in @figma.
— vijay verma (@realvjy) November 14, 2022
I found that if you use drop shadow or inner shadow on any layer, the limit is 8. In spite of this, it is enough to make any shape like 3D. One secret shared below ☺️. pic.twitter.com/da9sz9fLv0
Halftone effects
Vijay Verma shares a few techniques for adding simple halftone effects in Figma. See also his experiments with Rogie’s upcoming NT plugin and how he achieved a frosted glass effect.
Yes, this is @figma. Simple halftone effects can be easily added to your photos and illustrations to give them a retro look.
— vijay verma ᵍᵐ (@realvjy) September 18, 2022
Another experimenting with @rogie NT plugin. Sharing techniques here 🧶 pic.twitter.com/X43m4oXSWg
Beautiful Shadows
The plugin allows you to create beautiful shadows by simply dragging a “light source,” which casts a shadow from selected elements. The shadow effect is achieved by layering and easing multiple drop-shadows to create a skeuomorphic shadow umbra and penumbra.
Knockout shadow
Figma just rolled out a feature that allows you to turn off showing a shadow behind transparent areas. I'm ridiculously stoked about this because of what it means for turning designs into code.
— ˗ˏˋrogieˎˊ (@rogie) July 22, 2021
Left: HTML shadows
Right: Figma shadows
🧶 A thread this little/big feature... pic.twitter.com/AgvnWL8UAa
Figma Tips: Adding a glass effect to your designs
Neon effect
6 Steps to Make Excellent Blurred Background
Improved Reordering in the Properties Panel
Effect icons indicate the offset direction
My friend Nether @nether8904 told me that Figma effect styles' icon will indicate the offset direction. That's a really cool detail! @figmadesign pic.twitter.com/VKrTvxD3iA
— Hal (@leadream4) August 1, 2020
Behind the feature: shedding light on shadow spread
Now you can adjust shadow spread in Figma on some kinds of objects to create better depth, glows, and borders. It’s fully compatible with the CSS property box-shadow.
Glass Effect Mockup
“This is a simple mockup with a glass effect created from the video presentation of the new Microsoft tool, Office.”
Yummygum: Copy and paste individual style properties between layers
This is a huge time saver. Can’t believe I never tried this before.
TIL in @figmadesign you can select individual style properties and Copy (⌘C), Cut (⌘X) and Paste (⌘V) them onto other layers#figma #figmatip
— Yummygum (@yummygum) April 14, 2020
. pic.twitter.com/WJjp6j4uya
SmoothShadow
After Smooth Shadow generator made rounds in the design community, its author built a matching Figma plugin. It’s the easiest way to build a nice smooth shadow, and as it’s based on a box-shadow CSS property it’s easy to export and reuse in code later.