Wait, this was made ONLY in Figma?

Рет қаралды 9,608

Күн бұрын

Пікірлер: 30

@DesignCourse 10 ай бұрын

Absolutely sick examples! Remember to check the description to clone the figma community file for each of these examples.

@PeterMusaManchester 10 ай бұрын

Fantastic animations. Please can you make a video teaching this type of animations. It would be a phenomenal video

@PhantomHarlock78 10 ай бұрын

If I prototype something like this the front end dev will burn my first born.

@r-i-ch 10 ай бұрын

😂

@solid3451 10 ай бұрын

So how do you transfer this to web page? Is there a way to just embed it, like for example you would do with Spline? Or you need to code it up from scratch?

@DesignCourse 10 ай бұрын

Spline wouldn't be the tool for this job, as nothing here is actual 3D, but rather elements that are being modified with Shaders within Three.js. I don't believe spline has shader support like this? So, these examples would have to be hand coded.

@MaxShirshovMusic 10 ай бұрын

Example 5 is amazing. My question is, if you sent this to a developer would he be able to recreate it? Or would he have to play with the values to get something close (eyeball it)? Because my devs usually can't bother with the second. They want it documented and plug and play style. Would love to hear your thoughts on this 😅

@SkArifHossain 10 ай бұрын

I am in awe of the design made by Halevi especially the fifth example, ❤ it, thanks for sharing :)

@s.bailey7008 10 ай бұрын

NIce. Love to see you break these down a little more

@cp3onmtv963 10 ай бұрын

I saw this posted and straight up saved it for later lol. Way to stay on top of stuff thats cool and not the same ole same ole!! I WOULD like to see how to implement something like this in your Framer course too...

@StanStanson 10 ай бұрын

These are pretty impressive. Here's a stupid question for you.... If we can figure out how to create these in Figma, what do we do with them afterwards if we are a solopreneur? Is there a tool or add-on that can turn these into compatible code for web animations? If so, please make a video process on creating and converting these beautiful animations.

@DesignCourse 10 ай бұрын

With these examples, there's no "low code/no code" solution that will tackle what you want to a T. If you wanted to recreate these, you'd need to know GSAP/Three.js (javascript). With low/no code tools like Framer/Webflow/Wix Studio, they don't have threejs built into them. You can extend them by including threejs though, but that'll require adding actual code.

@arpitshrmah 10 ай бұрын

@@DesignCourse What about wordpress? Can this be done in wordpress without knowing javascript?

@_heric 10 ай бұрын

@@arpitshrmah absolutely not, you need to code everything from scratch, even if you use webflow or other editors you need to code everything from CSS to JS

@arpitshrmah 10 ай бұрын

@@_heric I'm mainly a designer & I work with wordpress. I've added few CSS queries in my page builder & that's about it. Don't know much about code. How long would it take me to learn full front end development & is it worth it?

@Gigusx 10 ай бұрын

I like the first one the most, I think. That mask effect is very cool!

@glagraphy6533 8 ай бұрын

can you implement this into framer?

@digwillhachi 10 ай бұрын

is there a point to doing this in Figma? How about on an actually website. That would be useful.

@bimalpariyar3732 10 ай бұрын

4:25

@iGaMerZ 10 ай бұрын

we wanna how can we do this !

@deepak8586 10 ай бұрын

OR Halevi is GOAT!

@terapeutstesti 10 ай бұрын

If I convert these animations to Framer, will they work?

@JedHurricane 10 ай бұрын

It wont

@terapeutstesti 10 ай бұрын

@@JedHurricane I'm trying to understand why people do web design in Figma and then convert it to Webflow or Framer.

@JedHurricane 10 ай бұрын

@@terapeutstestiYou can transfer designs to framer, but not animations like these. For example if you want the effect of number 1 most likely you will have to attempt to recreate it in framer, but framer doesn't have masking capabilities like figma does. You could make simple svg animations in figma though and use the lottie plugin to convert the animations into a lottie file.