Wait, this was made ONLY in Figma?

Подписаться 1,1 млн

Просмотров 9 тыс.

50% 1

bit.ly/4bTD5zu 👈 Design & code like me. Use "UI2024" for 25% Off!
-- Today, I'm going to show you 5 amazing, interactive Figma prototypes created by Or Halevi. Or has made these Figma documents available for you to see exactly how he achieved some of these next-level Figma prototypes.
Or Halevi:
/ orhalevi
www.makethecut.studio/
The first example from the intro (and Example 5):
www.figma.com/community/file/...
Example 1:
www.figma.com/community/file/...
Example 2:
www.figma.com/community/file/...
Example 3:
www.figma.com/community/file/...
Example 4:
www.figma.com/community/file/...
0:00 - Intro
1:03 - Example 1
2:29 - Example 2
3:35 - Example 3
4:42 - Example 4
5:05 - Example 5 & Analysis
7:58 - Final Thoughts
Let's get started!
#figma #uiux #uidesign
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 30

@DesignCourse 4 месяца назад

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

@harlockmbb 4 месяца назад

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

@r-i-ch 4 месяца назад

😂

@PeterMusaManchester 4 месяца назад

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

@SkArifHossain 4 месяца назад

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

@MaxShirshovMusic 4 месяца назад

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 😅

@cp3onmtv963 4 месяца назад

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...

@s.bailey7008 4 месяца назад

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

@solid3451 4 месяца назад

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 4 месяца назад

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.

@Gigusx 4 месяца назад

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

@StanStanson 4 месяца назад

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 4 месяца назад

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 4 месяца назад

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

@_heric 4 месяца назад

@@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 4 месяца назад

@@_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?

@digwillhachi 4 месяца назад

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

@bimalpariyar3732 4 месяца назад

4:25

@glagraphy6533 2 месяца назад

can you implement this into framer?

@iGaMerZ 4 месяца назад

we wanna how can we do this !

@JedHurricane 4 месяца назад

Just because you can, doesn't mean you should Lol

@deepak8586 4 месяца назад

OR Halevi is GOAT!

@marshelblackmon984 4 месяца назад

What?! Awesome!!!!

@user-fr6tb6ic8f 4 месяца назад

So cool🤩

@terapeutstesti 4 месяца назад

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

@JedHurricane 4 месяца назад

It wont

@terapeutstesti 4 месяца назад

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

@JedHurricane 4 месяца назад

@@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.