UI Adrian
UI Adrian
  • Видео 22
  • Просмотров 1 021 770
Parallax Scroll Effect - Figma Tutorial
Join 2,500+ students and master the foundations of UI design for $9 with my new ebook!
👉 howtodesignbetter.com/ebook
Guys, I'm sorry to say but the Prototyping Masterclass is discontinued. I will be working on a new Framer program instead! More details soon :)
In this tutorial, we'll take a closer look at how to create parallax scroll effects in Figma. At the time, the only way to mimic this effect is by adding a number of drag triggers or adding a scroll bar. In the following episode, we'll discuss the first use case.
Here's a chapter breakdown:
00:00 - Intro
00:31 - Adding your designs
02:40 - Adding mockups
05:15 - Adding remaining frames
11:30 - Connecting frames
12:03 - Prototype Preview & F...
Просмотров: 85 037

Видео

Creating a Color System in Figma | 3 Easy Methods
Просмотров 44 тыс.Год назад
Join 2,500 students and master the foundations of UI design for $9 with my new ebook! 👉 howtodesignbetter.com/ebook In this video, I'm going to show you 3 easy ways to create color palettes and generate color systems in Figma. Enjoy! Grab my product bundles below 👇 howtodesignbetter.com/bundles Timestamps: 00:00 - Intro 01:00 - First Method 06:10 - Adding Global Styles 08:05 - Color Palette Exa...
Create Responsive Website Designs | Figma Tutorial
Просмотров 60 тыс.Год назад
Join 2,500 students and master the foundations of UI design for $9 with my new ebook! 👉 howtodesignbetter.com/ebook Learn how to create 100% responsive web designs in Figma, using Auto Layout ONLY, without Plugins or Constraints. Enjoy! If you're ready to learn more - check out the Figma Mastery course👇 howtodesignbetter.com/figma-mastery Timestamps: 00:00 - Intro 00:30 - Getting started 01:51 ...
Figma Responsive Design for Development (Box Model + Auto Layout)
Просмотров 35 тыс.Год назад
Join 2,500 students and master the foundations of UI design for $9 with my new ebook! 👉 howtodesignbetter.com/ebook In this video, I'm going to show you how to design in Figma with web development in mind and get you prepared for a seamless developer handoff using Auto Layout and the Box Model 📝 Download the free files here👇 www.figma.com/community/file/1230850200547605128 Feel free to check ou...
Figma Tutorial: 3D Carousel Slider (+ free files 🎁)
Просмотров 519 тыс.Год назад
Join 2,500 students and master the foundations of UI design for $9 with my new ebook! 👉 howtodesignbetter.com/ebook Learn how to create amazing 3D carousel sliders with rotating effects in Figma, with no plugins, videos, and no Lottie files, just simple techniques! And don't forget to grab the free Figma files to test this animation yourself! uiadrian.gumroad.com/l/prototyping-pack Timestamps: ...
Create Animated Mesh Gradients in Figma (Tutorial + Files)
Просмотров 19 тыс.Год назад
Join 2,500 students and master the foundations of UI design for $9 with my new ebook! 👉 howtodesignbetter.com/ebook Learn how to create awesome animated Mesh gradients in Figma, in less than 10 minutes. And don't forget to grab the Prototyping Pack and collect your free Figma files to test this animation yourself! uiadrian.gumroad.com/l/prototyping-pack Timestamps: 00:00 - Intro 00:21 - Getting...
Create Responsive Grid System - Figma Tutorial (FREE TEMPLATE)
Просмотров 22 тыс.Год назад
Join 2,500 students and master the foundations of UI design for $9 with my new ebook! 👉 howtodesignbetter.com/ebook In this video, we're going to create Responsive Layout Grids in Figma. We'll talk about everything you need to know about creating desktop, tablet, and mobile layouts in less than 15 minutes! P.S. Make sure to grab the free layout grid template from the Figma Community below👇 www....
Spinning Carousel Animation in Figma - Full Tutorial + Free Files! 🎁
Просмотров 57 тыс.Год назад
Join 2,500 students and master the foundations of UI design for $9 with my new ebook! 👉 howtodesignbetter.com/ebook In this quick video, I'll walk you through all steps to recreate this awesome Spinning Carousel Animation with a cool Intro trigger in Figma. Make sure to download the free source files from this link👇 uiadrian.gumroad.com/l/prototyping-pack Play around with the design yourself an...
The Secret to Learning Good UX/UI Design Fast (and for FREE)
Просмотров 15 тыс.Год назад
The Secret to Learning Good UX/UI Design Fast (and for FREE)
Mechanical Engineer to UI/UX Design Lead - My Full Story
Просмотров 17 тыс.Год назад
Mechanical Engineer to UI/UX Design Lead - My Full Story
Figma Parallax Effect - Full Tutorial + Free Figma Files 🎁
Просмотров 79 тыс.Год назад
Figma Parallax Effect - Full Tutorial Free Figma Files 🎁

Комментарии

  • @AtharvaPatil-ck2uf
    @AtharvaPatil-ck2uf День назад

    Bro how do you show the shortcuts on the screen? The keys we type are also shown but I am unable to see it. Is there any shortcut for that??

  • @fudium34
    @fudium34 2 дня назад

    Bro amazing ty

  • @Shuu98
    @Shuu98 5 дней назад

    Cool one to test out but I got my Change to option is not avaible. It is fade grey. Can anyone help me with the issue ?

  • @kingsleyezedike7647
    @kingsleyezedike7647 6 дней назад

    im so lost 😂

  • @nishantrastogicravemonger7126
    @nishantrastogicravemonger7126 6 дней назад

    worst tutorial ever

  • @arvzgarcia.agency
    @arvzgarcia.agency 7 дней назад

    Godbless you. Thank you

  • @joseerildo2654
    @joseerildo2654 8 дней назад

    does someone know how to apply this in css?

  • @speedykiller619
    @speedykiller619 8 дней назад

    What is that microphone you're using, bro?

  • @user-ko9fu9hv1k
    @user-ko9fu9hv1k 8 дней назад

    7:20 THIS ONE NOT WORKING

  • @user-ru4wo6ht3k
    @user-ru4wo6ht3k 12 дней назад

    Need more tutorials

  • @Junaidali-hw7lw
    @Junaidali-hw7lw 13 дней назад

    Amazing

  • @Junaidali-hw7lw
    @Junaidali-hw7lw 13 дней назад

    Amazing

  • @0nejah
    @0nejah 13 дней назад

    looks cool

  • @richa_xo446
    @richa_xo446 14 дней назад

    Hi sir, I am unable to get the ai layers of the labels even after using convertify plug in, also I tried seperating every layer before droping them on figma too, still its coming as jpg image, what to do ?? Please help

  • @wiseux5481
    @wiseux5481 14 дней назад

    Why you gave 30 padding both side? I want to understand the reasons.

  • @Watch505
    @Watch505 18 дней назад

    Very informative

  • @oksanakarpenko7751
    @oksanakarpenko7751 22 дня назад

    Cool!111

  • @sibipoulose5531
    @sibipoulose5531 22 дня назад

    when u copy the image o the fruit cedar ssoda from the adobe illustrator to the figma, it copies and paste successfully but in my case the image is not copying to the clipboard itself it says object not supported on this device why

  • @yehjames23
    @yehjames23 26 дней назад

    May I know what kind of software to achieve desktop magnifier effect at 7:30? Thanks

  • @chalbe178
    @chalbe178 29 дней назад

    ❤❤❤❤❤❤

  • @apoorvadas3218
    @apoorvadas3218 29 дней назад

    This was amazing. But how did you export the animated prototype??

  • @andreflores6866
    @andreflores6866 Месяц назад

    What if you dont have Photoshop and Illustrator? is there another way to edit the texts for the labels?

  • @MyCozySounds
    @MyCozySounds Месяц назад

    i dont have the option, controle buttons cause i got windows. Is there any other way ???

  • @dickydryan
    @dickydryan Месяц назад

    I'll be right back 6:50

  • @user-zt9yw6uj9o
    @user-zt9yw6uj9o Месяц назад

    amazing

  • @NagapraveenkumarKosanam
    @NagapraveenkumarKosanam Месяц назад

    How to select individual flavours of soda from picture

  • @irinavadan8604
    @irinavadan8604 Месяц назад

    Hi Adrian. I would need your advice please :) I finally became good at copying good designs , but I fail when it comes to develop my own design style. Do you have any advice on how should I develop my own design style? Thank you for your videos.

  • @jothish-tl7ki
    @jothish-tl7ki Месяц назад

    Nice

  • @anonymous-sz8jq
    @anonymous-sz8jq Месяц назад

    heyy how did get that header from? please help

  • @avimakwana4346
    @avimakwana4346 Месяц назад

    give me your file lik

  • @yanayana3206
    @yanayana3206 Месяц назад

    Thank you very much for help me out to the hell . Appreciate your teaching.

  • @zizou215
    @zizou215 Месяц назад

    Just wow its the perfect video about creating a color design thank you, sir

  • @hirublacky8317
    @hirublacky8317 Месяц назад

    Wow

  • @semazenArt
    @semazenArt Месяц назад

    But what can we do after animate this in figma? Can we use that animation in a website? How do we do that?

  • @technologyworkingaa7390
    @technologyworkingaa7390 Месяц назад

    Lovely boss❤❤

  • @RimshaMaqsood-fh1ti
    @RimshaMaqsood-fh1ti Месяц назад

    I can't buy adobe illustrator, what are the best ways for free download???

  • @SarahC-bd1cw
    @SarahC-bd1cw Месяц назад

    When I select multiply to get that realistic can effect, nothing changes. What am I doing wrong?

  • @KG-db1kg
    @KG-db1kg Месяц назад

    Brilliant teacher! bg music was a bit loud, but your quality of teaching process cut through it, would love to see the box model video

  • @hisas8271
    @hisas8271 2 месяца назад

    First timer here, where can I click the command? Does it have on my keyboard?

  • @sookie843
    @sookie843 2 месяца назад

    cant find the free files in description :/

  • @AdamVigas
    @AdamVigas 2 месяца назад

    Its very nice design but... how can i transfer it into a website ? Do i need to hardcore it? wwhat about smart animation etc....

  • @user-ku2wn7on4e
    @user-ku2wn7on4e 2 месяца назад

    Um tutorial muito bom!!! Foi passado mais de uma solução para a criação de paletas e bem explicadas, muito bom!

  • @prasanths674
    @prasanths674 2 месяца назад

    You can group that in esp file using illustrator and convert it to svg it will be easy

  • @radhynesh
    @radhynesh 2 месяца назад

    Positive: Great content! Not positive: Sound only comes from left side in this video.

  • @stevebryan8
    @stevebryan8 2 месяца назад

    So wouldn't you have to tell the developer at what pixel width the layout changes? Spacing/text sizes/image sizes get weird at certain pixel widths making the design look funky.

  • @user-ic9oy2uw5m
    @user-ic9oy2uw5m 2 месяца назад

    can I have the file link? pleaz

  • @hy.lee97
    @hy.lee97 2 месяца назад

    I just found this video, I’m also a mechE who wants to pivot to UI/UX for the same exact reasons - thank you for sharing your story, it’s not a common pivot so your video was really inspiring to me! 🤩🥰

  • @israelaguirre7250
    @israelaguirre7250 2 месяца назад

    Hey adrian nice tutorial appreciate it!

  • @inspired.success1
    @inspired.success1 2 месяца назад

    What camera are you using?

  • @inspired.success1
    @inspired.success1 2 месяца назад

    I want to be like you period 😂