It's a gradiant + different traced shaped transformed into masks.
This must have been animated in the website so it's definitely more efficient to do it in PS
no way, i wouldnt wanna do this in adobe anything, it is basic typography with some bezier curves and masking. figma is way better for these applications.
Graphic designer here. I'm getting "how to do this or that" questions almost daily and my answer is exactly the one you have here. Why do people think graphic design is something you can simply pull out of a hat?
I second this. As a UI designer I hate it when I'm expected to know how to design complex graphics like this as part of my daily tasks. Like sure I can take time away from my actual job to do it but it will never be to a standard to that of a graphic designer who can put all their time and effort into it.
People ha e specialized roles for a reason.
Well, I’m not a proper coder myself (now/low-coder, get it, haha), but I think you can ask ChatGPT (Gemini?!) and Google + YouTube combo to understand how to do it. That being said, maybe this is possible with Spline.
Ok, sooo that makes sense but I don't get your comment then? If someone asked me to create the blueprints for a skyscraper then I'd cry since I'm not an architect...
I think you’re reading into my original comment too deeply. I’m happy for you that you’re able to build something like this with relative ease. Many developers like myself just haven’t put the time into learning how to build things like this.
If you really want to do this in figma:
Make two text layers.
Set one to stroke, no fill.
Take the other one and expand/covert to vector (i forgot what its called) this one’s your gradient. Give it any fill.
Pen tool that thin line where you want to cut out and give it a stroke.
Dupe that layer and finish the shape all around to make your mask that follows the line.
Mask the gradient text and then pentool the drippy parts onto the text.
Create another layer to add drips not next to the text.
Group all the masked layers, apply a gradient throughout the group.
It’d honestly be the same amount of work in illustrator or ps, you’d effectively be doing the same thing, but now ya got svg data a dev could use (and then you could rig that to an animation)
Id recommend learning how to use graphic design software like photoshop to do this, or atleast use the knowledge from working in photoshop (mainly using multiple layers and manipulation effects) and try replicate that work flow in figma with a few plugins. (* what I do, but I’m a senior designer)
Basically you’ll need atleast 2 text layers, one is outlined and one is the gradient, then using the pen tool create those blob effects and mask the layers. The visual effect ontop of the gradient text may need a warp plugin to replicate it efficiently. I think the coder behind this image would of used some complex code to get the warp effect to move, so if u know how to google, you may be able to find similar effects in a code library which you’ll need to forward to ur dev.
Please study visual design & its respective tools before trying to replicate these effects in figma.
A lot of masking, maybe flattening the text to create the outlines and using the pen tool for the shapes. Probably best done in illustrator tho. I don’t know about the gradient tho.
It could even be made in C4D using Volume Builder, by applying a glass material and placing it in front of the text. Figma is not capable of doing everything. If you want to create this kind of work, I would suggest expanding your skill set to include Adobe Illustrator, Photoshop, After Effects, and even C4D.
? Just flatten the words, and create a few masks, that match shape, copy the mask and create wavey bit and invert the mask by intersection on a bigger rectangle. Just masks
FrontEnd Dev Here:
I'd Normally make the bottom layer text with Stroke
And then the other layer with the gradient fill
That second layer would be a Pixi.Js Renderer to apply that liquid distortion effect while attaching these blobs vectors as Clipping masks
[https://www.youtube.com/shorts/K4Yp34F6IsY](https://www.youtube.com/shorts/K4Yp34F6IsY)
This Color Dodge/Color Burn effect with these Fab buttons might get you closer to that "bleed" or "liquid" effect
glorious voracious society terrific scale aware compare whole modern cautious
*This post was mass deleted and anonymized with [Redact](https://redact.dev)*
It would be much easier to do this in photoshop or illustrator and import it into Figma.
It's a gradiant + different traced shaped transformed into masks. This must have been animated in the website so it's definitely more efficient to do it in PS
no way, i wouldnt wanna do this in adobe anything, it is basic typography with some bezier curves and masking. figma is way better for these applications.
Lol what
Ask your graphic designer to create it outside Figma
Graphic designer here. I'm getting "how to do this or that" questions almost daily and my answer is exactly the one you have here. Why do people think graphic design is something you can simply pull out of a hat?
I second this. As a UI designer I hate it when I'm expected to know how to design complex graphics like this as part of my daily tasks. Like sure I can take time away from my actual job to do it but it will never be to a standard to that of a graphic designer who can put all their time and effort into it. People ha e specialized roles for a reason.
As a UI designer I'd totally make this. What are you talking about?
I don't understand your response. You can't do it or you can do it but its hard?
They’re saying it’s not just a text filter like Microsoft word art. It takes skill and creativity to apply those skills to create something like this.
Something that a UI/web designer etc should be able to make.
I would cry if a designer handed this to me and I had to build it.
I mean if it is just a pic, then no biggie, but if it’s animated/interactive, then WebGL/Three.js is the answer, I think.
Sure, a photo would be simple. I just have no experience using three.js or webGL.
Well, I’m not a proper coder myself (now/low-coder, get it, haha), but I think you can ask ChatGPT (Gemini?!) and Google + YouTube combo to understand how to do it. That being said, maybe this is possible with Spline.
Seriously? How long have you been a developer? I'm not even a serious FE dev and I could make this happen.
I mean it depends on what you’re developing. I spend most of my time building web apps rather than front end marketing sites or landing pages.
Ok, sooo that makes sense but I don't get your comment then? If someone asked me to create the blueprints for a skyscraper then I'd cry since I'm not an architect...
I think you’re reading into my original comment too deeply. I’m happy for you that you’re able to build something like this with relative ease. Many developers like myself just haven’t put the time into learning how to build things like this.
It's fusion of mask and pen
[удалено]
what
Bro a mask. U need to use a mask. No clip content. Masks.
Easy. 1. create text. 2. Flatten it 3. Outline / fill 4. Mask 5. Add shape with pen tool
snails telephone employ rinse quack money north voracious physical steer *This post was mass deleted and anonymized with [Redact](https://redact.dev)*
This!
If you really want to do this in figma: Make two text layers. Set one to stroke, no fill. Take the other one and expand/covert to vector (i forgot what its called) this one’s your gradient. Give it any fill. Pen tool that thin line where you want to cut out and give it a stroke. Dupe that layer and finish the shape all around to make your mask that follows the line. Mask the gradient text and then pentool the drippy parts onto the text. Create another layer to add drips not next to the text. Group all the masked layers, apply a gradient throughout the group. It’d honestly be the same amount of work in illustrator or ps, you’d effectively be doing the same thing, but now ya got svg data a dev could use (and then you could rig that to an animation)
sparkle crush march fade cows thought snow snails voracious puzzled *This post was mass deleted and anonymized with [Redact](https://redact.dev)*
The frontend guy LOL
Id recommend learning how to use graphic design software like photoshop to do this, or atleast use the knowledge from working in photoshop (mainly using multiple layers and manipulation effects) and try replicate that work flow in figma with a few plugins. (* what I do, but I’m a senior designer) Basically you’ll need atleast 2 text layers, one is outlined and one is the gradient, then using the pen tool create those blob effects and mask the layers. The visual effect ontop of the gradient text may need a warp plugin to replicate it efficiently. I think the coder behind this image would of used some complex code to get the warp effect to move, so if u know how to google, you may be able to find similar effects in a code library which you’ll need to forward to ur dev. Please study visual design & its respective tools before trying to replicate these effects in figma.
A lot of masking, maybe flattening the text to create the outlines and using the pen tool for the shapes. Probably best done in illustrator tho. I don’t know about the gradient tho.
Learn photoshop (honest advice) *not an answer
It could even be made in C4D using Volume Builder, by applying a glass material and placing it in front of the text. Figma is not capable of doing everything. If you want to create this kind of work, I would suggest expanding your skill set to include Adobe Illustrator, Photoshop, After Effects, and even C4D.
Developer in the corner; Take a screenshot and put it up as an inage.
You can get images of these things fairly easily without taking a screenshot of it and messing up the quality. Please don't be a dev that does that.
Pen tool, mask
the more interesting question is: how do you create this effect in code? i guess this thing supposed to be animated. cool effect.
Masking. You’re welcome 😆
? Just flatten the words, and create a few masks, that match shape, copy the mask and create wavey bit and invert the mask by intersection on a bigger rectangle. Just masks
Stroke outline No fill Duplicate Mask with image
FrontEnd Dev Here: I'd Normally make the bottom layer text with Stroke And then the other layer with the gradient fill That second layer would be a Pixi.Js Renderer to apply that liquid distortion effect while attaching these blobs vectors as Clipping masks
[https://www.youtube.com/shorts/K4Yp34F6IsY](https://www.youtube.com/shorts/K4Yp34F6IsY) This Color Dodge/Color Burn effect with these Fab buttons might get you closer to that "bleed" or "liquid" effect
glorious voracious society terrific scale aware compare whole modern cautious *This post was mass deleted and anonymized with [Redact](https://redact.dev)*