This is the kind of content we're missing - advanced, in-depth, with actionable examples. Would be great to see a code-focused tutorial on how to translate these techniques into CSS
I enjoyed this video, I'm seeing mask in a new light and definitely going to try them out especially the patterns. Thanks for sharing, I look forward to seeing more from you.
You guys are pros in your niche, and I’m often amazed at how your designs turn out. I have two questions: where do you find inspiration for your niche-specific illustrations and graphics? And do you happen to have any texture packs you’d be willing to share?
Thank you very much! >where do you find inspiration for your niche-specific illustrations and graphics? Our niche is dev-oriented products. For me personally, it's not hard to come up with ideas since I've spent 12+ years in software engineering and understand quite well what our clients build. When you understand how a feature works, it's much easier to come up with a design for it. However, ChatGPT solves this very well for our designers who are less familiar with development. You ask ChatGPT to explain what the feature means and to come up with ideas for graphics. It works quite well too. >And do you happen to have any texture packs you’d be willing to share? We have one; I'm thinking about a dedicated video about textures where I might share our Figma collection.
@@pixelpoint-io great, thanks! Waiting for the textures episode. In the inspiration part I more meant like a... hmmm... the actual stuff visually speaking; like I know that I have to design a speaker for example, but do you try to make it from pictures, or do you use any specific tactics to make it work with your specific style?
Awesome video and we need more examples about Masks. Maybe one more video with step by step tutorial, because what i saw in this video is incredible and cool
pleaseeee plaseee plaseeee Make more videos! Wow, this quality is extraordinary-the content, the video editing, and the animations. Did you use After Effects (AE)?
Great! It's a typical thing; that's why it's important to learn the fundamentals, like understanding what alpha masks mean in that case. Because if you know that math, it becomes clear what will work and what won't.
Thank you for the feedback! I will try to find a perfect balance of speed and engagement, let me know after the next video whether it becomes better or not.
Great tutorial! I have a question thoughat 05:36 you applied a layer blur, but it didn't affect the center part and only smoothed the edges. How did you achieve that?
Thank you! Layer blur changes the transparency of the content layer. When you apply it to a generic layer, it actually blurs. Blur is a combination of transparency changes and pixels dissolving. So when blur is applied to a mask, it does not matter what colors or pixels will be on that mask; only the alpha channel (transparency) of a pixel matters.
Hi, Thank you! it depends on the graphic. You can check a source code of real landing pages from the examples we use - neon.tech, huly.io. - If it's a static graphic, then we just use modern image formats and lazy loading. - If it's animated with simple effects, we use Rive.app, which can easily be added to the site/app/game. - If the graphic has quite complex VFX (often made in AE/Blender), then we add it using modern video formats like h265/vp9/av1. - Simpler graphics can be natively implemented and animated, but I don't personally consider it a very cost-efficient or time-efficient option, since in Rive you can do it faster.
Thank you for the support! Took quite a lot of time to produce and animate this one, will pick something more simple for the next video, so hopefully it will be released next week.
It depends on the use case - If it's a static graphic, then we just use modern image formats and lazy loading. - If it's animated with simple effects, we use Rive.app, which can easily be added to the site/app/game. - If the graphic has quite complex VFX (often made in AE/Blender), then we add it using modern video formats like h265/vp9/av1. - Simpler graphics can be natively implemented and animated, but I don't personally consider it a very cost-efficient or time-efficient option, since in Rive you can do it faster. Also, keep in mind that browsers support masks in both CSS and SVGs, so some simple tasks can be done completely natively without a headache.
complex graphic does not mean it's hard to implement. you can add it to the code as an image, or if it has animations with rive.app or video, adding graphic natively is the last thing you have to think about. you can find examples from the video on neon.tech or huly.io
Thank you! I'm still trying to find a balance between speed and boredom. Am I right you talking about parts with actual Figma screen captures? Do you feel that the rest is good in terms of the speed?
This is the kind of content we're missing - advanced, in-depth, with actionable examples.
Would be great to see a code-focused tutorial on how to translate these techniques into CSS
Thank you! There are plans to start another channel next year that will be more focused on dev content.
NGL this is one of the best tutorials for advanced Figma designers! Thank you Alex 🔥
your video, your editing, your motion graphic, your audio, your video value are totally 100%
Thank you very much!
0:41 that animation showing mask shapes is craazzyy!!
As another Figma creator, you are a legend my friend, really happy to see you here and looking to learn more from you!
The storytelling, the editing, the explanation everything was amazing. We need more videos on advanced topics.
Thank you very much! More to come!
OMG, the way you used masks to create dynamic lighting effects on the illustrations is pure gold. Amazing work, perfect editing and explanations!
Thank you ver much for the support!
this is god tier tutorial - the perfect explanation, lovely editing and great lesson. thanks a lot for creating thisn
Amazing techniques have blown my mind😃✨- advanced, in-depth, with actionable examples.
Thank you very much!
Love to see tutorials like this. Now I want to give mask a try.
Thank you! Give it a try; they will change the way you design forever.
alex this is amazing, the video editing, the tutorial explanation, are all so good! and all of that wrapped up in 6 mins!
please do some more
thank you very much!
the quality and substance of this tutorial are no joke, thanks a bunch
Thank you very much! I'm very happy that people love it.
wowww this video is so freaking amazing! Please continue producing content like that!
great explanation 10/10 👌🏻👌🏻
I enjoyed this video, I'm seeing mask in a new light and definitely going to try them out especially the patterns. Thanks for sharing, I look forward to seeing more from you.
Thank you very much!
You guys are pros in your niche, and I’m often amazed at how your designs turn out.
I have two questions: where do you find inspiration for your niche-specific illustrations and graphics? And do you happen to have any texture packs you’d be willing to share?
Thank you very much!
>where do you find inspiration for your niche-specific illustrations and graphics?
Our niche is dev-oriented products. For me personally, it's not hard to come up with ideas since I've spent 12+ years in software engineering and understand quite well what our clients build. When you understand how a feature works, it's much easier to come up with a design for it. However, ChatGPT solves this very well for our designers who are less familiar with development. You ask ChatGPT to explain what the feature means and to come up with ideas for graphics. It works quite well too.
>And do you happen to have any texture packs you’d be willing to share?
We have one; I'm thinking about a dedicated video about textures where I might share our Figma collection.
@@pixelpoint-io great, thanks! Waiting for the textures episode.
In the inspiration part I more meant like a... hmmm... the actual stuff visually speaking; like I know that I have to design a speaker for example, but do you try to make it from pictures, or do you use any specific tactics to make it work with your specific style?
Awesome video and we need more examples about Masks. Maybe one more video with step by step tutorial, because what i saw in this video is incredible and cool
Thank you!
Great tutorial! 💥
I believe you will become the best channel for teaching design, keep it going!
Thank you very much for the support! We will try to aim for this!
pleaseeee plaseee plaseeee Make more videos! Wow, this quality is extraordinary-the content, the video editing, and the animations. Did you use After Effects (AE)?
Thank you very much! Most of the animations are done in AE, while some simple ones are created in DaVinci Resolve, along with the final editing.
Você me inspira, obrigado! abraço do Brasil
love your content!! can't wait for the next video
Thank you very much!
Absolute gold thank you! It is moving rather fast however
Good Job, Bro and big thanks.
Keep the greatness Up 👍💪
Until now, I have only rarely used masks, but I am going to use them more and more in my next projects. Thank you.
Thank you! Glad that it helped!
I have learned a new thing today - didn't realized before that layer blur works with Mask. Thanks man 👌
Great! It's a typical thing; that's why it's important to learn the fundamentals, like understanding what alpha masks mean in that case. Because if you know that math, it becomes clear what will work and what won't.
Love you guys work at Pixel Point! Great content
Great resource. Thanks. want more
Thank you very much!
Absolute gem ♥. Please more in-depth explanations like this just slow it down a bit 😅
Thank you for the feedback! I will try to find a perfect balance of speed and engagement, let me know after the next video whether it becomes better or not.
@@pixelpoint-io Sure. Also if you can add the instructions on the screen that'll be helpful
I was wondering who was responsible for that amazing Huly landing page design and now I know. Awesome job!
Ha, thank you very much!
Very very thanks, Man.
Next video would be on lightning, if possible.
Thank you very much! We have some plans for dedicated video on lightning definitely.
Lovely! Thanks much for sharing it! Would love to see videos on gradients as well !
Your explanation is awesome. Thank you.
Thank you very much!
Great tutorials guys, especially since you have a unique style :) Keep it going!
thank you very much for the support!
This is really useful
Amazing!
Thank you for a fantastic video!!!
Thank you for making this AMAZING video!
Thank you very much for the support!
You guys are amazing. Big thanks! Can't wait for the next video.
More to come! Thank you!
Masks were so hard before this video 😵😵😵😵
I hope so :) Thank you!
This is awesome! Thank you so much for making these videos Alex. Keep them coming!
Glad you like them!
Learnt something new. You are 🔥 thanks you, make more videos ❤
Thank you! There are more coming!
very high quality content
Big thanks man, awesome video! I gonna use mask instead of gradient for text, really don't know this technique )
Cool stuff!
Next please do a tutorial of the project file bento cards!
Thank you!
Amazing
Very nice. Please keep speed slower for better understanding.
RUclips speed control can help
Thank you
Great tutorial! I have a question thoughat 05:36 you applied a layer blur, but it didn't affect the center part and only smoothed the edges. How did you achieve that?
Thank you! Layer blur changes the transparency of the content layer. When you apply it to a generic layer, it actually blurs. Blur is a combination of transparency changes and pixels dissolving. So when blur is applied to a mask, it does not matter what colors or pixels will be on that mask; only the alpha channel (transparency) of a pixel matters.
masks in figma gave me anxiety until this vid dropped :p
Please making more and bring tutorial on. complex graphic
Thank you for the support! We will try to to make more and more videos.
Interesting! How do convert these elements from graphics in Figma to elements on a website - while keeping in mind performance and accessibility?
Hi, Thank you! it depends on the graphic. You can check a source code of real landing pages from the examples we use - neon.tech, huly.io.
- If it's a static graphic, then we just use modern image formats and lazy loading.
- If it's animated with simple effects, we use Rive.app, which can easily be added to the site/app/game.
- If the graphic has quite complex VFX (often made in AE/Blender), then we add it using modern video formats like h265/vp9/av1.
- Simpler graphics can be natively implemented and animated, but I don't personally consider it a very cost-efficient or time-efficient option, since in Rive you can do it faster.
@pixelpoint-io thanks for the insight! Much appreciated ⭐️
More More More More!!!!!
Thank you for the support! Took quite a lot of time to produce and animate this one, will pick something more simple for the next video, so hopefully it will be released next week.
@ you’re welcome, yeah the production quality was outstanding.
I have been using figma for almost 2 years and you make me feel dumb after seeing your videos 😢
the probelem is how do we code this in css?
😮😮 never saw that in my Life, what about intégration for the tech team ?
It depends on the use case
- If it's a static graphic, then we just use modern image formats and lazy loading.
- If it's animated with simple effects, we use Rive.app, which can easily be added to the site/app/game.
- If the graphic has quite complex VFX (often made in AE/Blender), then we add it using modern video formats like h265/vp9/av1.
- Simpler graphics can be natively implemented and animated, but I don't personally consider it a very cost-efficient or time-efficient option, since in Rive you can do it faster.
Also, keep in mind that browsers support masks in both CSS and SVGs, so some simple tasks can be done completely natively without a headache.
@ Thank you for this clear and comprehensive answer! A crash course on Rive app in web design would be really amazing with all this experience.
how you edit video like this?
AE + Davinci Resolve
when you deliver such complex ui graphics with multiple layers to Dev, how is he able to replicate them with Code ? isnt it too much ?
complex graphic does not mean it's hard to implement. you can add it to the code as an image, or if it has animations with rive.app or video, adding graphic natively is the last thing you have to think about. you can find examples from the video on neon.tech or huly.io
А как это верстать-то?)
Pls so down a bit. 🙏
Thank you! I'm still trying to find a balance between speed and boredom. Am I right you talking about parts with actual Figma screen captures? Do you feel that the rest is good in terms of the speed?
@ yes you are right