DesignWithArash
DesignWithArash
  • 70
  • 5 295 090
This Figma Trick Will Make Your Buttons 100x Better | Figma Tutorial
The first 500 people to use my link will receive a one-month free trial of Skillshare: skl.sh/designwitharash06241
In this video, I'm going to show you how to create an animated glowing button in Figma using interactive components.
👉 Become a Pro UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
📸 Instagram: uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 10+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 40,000 students become UI/UX designers from scratch worldwide.
Переглядів: 576

Відео

Create Animated Bento Cards in 9 Minutes | Figma Tutorial (+ Practice File)
Переглядів 3,5 тис.14 днів тому
Bring your design visions to life: www.protopie.io/plans Use the ARASH coupon to get 10% OFF. In this video, I'll walk you through animating bento grid cards using Figma interactive components. Download the practice file from here: (copy the frames and paste them into a new file)👇 bit.ly/3ySruBY 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📸 Instagram: ins...
This Technique Will Make Your Figma Animations 100x Better | Figma Tutorial
Переглядів 8 тис.Місяць тому
The first 500 people to use my link will receive a one-month free trial of Skillshare: skl.sh/designwitharash05241 In this video, I'll show you how to quickly turn your Figma card animations into advanced, smooth animations. 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer...
Figma Tutorial: 3D Isometric Animation in 6 Minutes
Переглядів 7 тис.Місяць тому
Convert your design into code here: www.pixelfreestudio.com Use the AR10 coupon to get 10% OFF. In this video, I'm going to show you how to create a 3D animation in Figma using interactive components. 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instru...
Responsive Typography With Variables | Figma Tutorial
Переглядів 16 тис.2 місяці тому
In this video, I'm going to show you how to make your typography responsive using Figma variables. 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 10 years of experience, and I teach people how to design great user interfaces and experienc...
Full Page Scroll Animation in 10 Minutes | Figma Tutorial
Переглядів 15 тис.2 місяці тому
Sign up to Milanote for free with no time limit: milanote.com/designwitharash In today's video, I'm going to show you how to create a full-page scroll animation in Figma without a Scroll trigger. You can get a copy of the practice file from here👇: bit.ly/4cS1iHb 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📸 Instagram: uiux.arash Who is Arash...
Animated Dropdown Menu in Figma With Variables | Figma Tutorial
Переглядів 9 тис.2 місяці тому
Check Out BeamJobs and Create your UI/UX Design Resume: www.beamjobs.com/resumes/ui-ux-designer-resume-examples?via=arash In this video, I'm going to show you how to create an animated dropdown menu in Figma using Figma variables. You can get the flags from here: bit.ly/3PMo74R 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📸 Instagram: uiux.ar...
Multi-edit: New Figma Update (2024) | Figma Tutorial
Переглядів 30 тис.3 місяці тому
In this video, I'm going to walk you through the newest Figma feature called multi-edit. 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX You can get a copy of the practice file from here👇: bit.ly/3T9T1oV 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 10 years of experience, and I teach...
Figma to Wix Studio: Build a Responsive Website Step-by-Step
Переглядів 13 тис.3 місяці тому
In this video, I'm going to show you how to convert your Figma design to a fully responsive website using Wix Studio. Check out Wix Studio👇: www.wix.com/studio You can download the assets from here👇: bit.ly/3Tc9km6 @WixStudio 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 10 years of experience, and I teach people how to...
Create a Responsive Bento Grid for Web & UI Design | Figma Tutorial
Переглядів 28 тис.4 місяці тому
In this video, I'm going to walk you through creating a responsive Bento Grid in Figma. 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7 years of experience, and I teach people how to design great user interfaces and experiences. I've hel...
Top 10 Figma Plugins for UI/UX Designers in 2024
Переглядів 40 тис.5 місяців тому
In this video, I'm going to show you the top 10 Figma plugins that will 10X your workflow. 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📘 Get my FREE UI/UX Design e-book here👇: bit.ly/3xeJ6qw 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 10 years of design experience, and I teach p...
If I started UI/UX Design in 2024, I'd Do This!
Переглядів 202 тис.6 місяців тому
In this video, I'm going to share with you a complete guide to becoming a UI/UX designer in 2024. 👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX 📘 Get my FREE UI/UX Design e-book here👇: bit.ly/3UXpcsz 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 8 years of experience, and I teach pe...
Figma Tutorial: Advanced Prototyping With Variables (+ Practice File)
Переглядів 43 тис.7 місяців тому
👉 Become a Pro UI Designer with my UI Design & Figma Mastery course: bit.ly/43v79vX In this crash course, I'll show you how to create advanced prototypes in Figma using variables. Get a copy of the practice file from here: bit.ly/47GZz3L 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7 years of experience, and I teach pe...
Master Wix Studio Animations and Interactions
Переглядів 5 тис.7 місяців тому
In this video, I'm going to show you how to create five different types of animation in Wix Studio super fast. Wix Studio is an end-to-end web creation platform for agencies and freelancers. Check out Wix Studio👇: www.wix.com/studio 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7 years of experience, and I teach people ...
Horizontal and Vertical Scroll in Figma | Figma Tutorial
Переглядів 32 тис.8 місяців тому
In this video, I'm going to show you how to create horizontal and vertical scrollable sections in Figma. Check out Wix Studio👇: www.wix.com/studio 📸 Instagram: uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7 years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students ...
Wix Studio Crash Course for Beginners 2024
Переглядів 66 тис.8 місяців тому
Wix Studio Crash Course for Beginners 2024
4 Figma Variables Updates You Probably Overlooked | Figma Tutorial
Переглядів 8 тис.9 місяців тому
4 Figma Variables Updates You Probably Overlooked | Figma Tutorial
Figma Tutorial: Master Figma Dev Mode in 8 Minutes
Переглядів 31 тис.9 місяців тому
Figma Tutorial: Master Figma Dev Mode in 8 Minutes
Make Your Web Design Responsive Using Variables | Figma Tutorial
Переглядів 53 тис.9 місяців тому
Make Your Web Design Responsive Using Variables | Figma Tutorial
Export Figma Animations with a Single Click | Figma Tutorial
Переглядів 51 тис.9 місяців тому
Export Figma Animations with a Single Click | Figma Tutorial
New Course: UI Design & Figma Mastery
Переглядів 28 тис.11 місяців тому
New Course: UI Design & Figma Mastery
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
Переглядів 271 тис.11 місяців тому
Figma Tutorial: Use Figma Variables Like a Pro ( Practice File)
Figma Auto Layout Updates (2023) | Figma Tutorial
Переглядів 107 тис.Рік тому
Figma Auto Layout Updates (2023) | Figma Tutorial
Animate Charts in Figma Like a Pro | Figma Tutorial
Переглядів 21 тис.Рік тому
Animate Charts in Figma Like a Pro | Figma Tutorial
State Management in Figma (New Prototyping Feature) | Figma Tutorial
Переглядів 13 тис.Рік тому
State Management in Figma (New Prototyping Feature) | Figma Tutorial
Figma Carousel Animation in 8 Minutes
Переглядів 73 тис.Рік тому
Figma Carousel Animation in 8 Minutes
I Animated a 3D Render in Figma in 10 Minutes (Step-by-Step Tutorial)
Переглядів 35 тис.Рік тому
I Animated a 3D Render in Figma in 10 Minutes (Step-by-Step Tutorial)
Figma Tutorial: Master The Figma Pen Tool (2024)
Переглядів 56 тис.Рік тому
Figma Tutorial: Master The Figma Pen Tool (2024)
Design a Responsive Table in Figma Using Auto Layout (2024)
Переглядів 80 тис.Рік тому
Design a Responsive Table in Figma Using Auto Layout (2024)
AirPods Pro Animation in Figma | Beginner Tutorial
Переглядів 37 тис.Рік тому
AirPods Pro Animation in Figma | Beginner Tutorial

КОМЕНТАРІ

  • @DigiDriftZone
    @DigiDriftZone 4 години тому

    Can you do the same in Sketch app?

  • @abhinavprabhakar455
    @abhinavprabhakar455 4 години тому

    hmmmmm cool

  • @electriknostalgia
    @electriknostalgia 4 години тому

    what kind of scroll animation work flow would you recommend for a portfolio grid image layout that has a continuous motion video background?

  • @loveyahqueen
    @loveyahqueen 5 годин тому

    I tried to use this html.to.design plugin, but I got the message that it's restricted from my region, so sad. Do you have any idea on what to do? Thank you.

  • @jimenadiazguzman2045
    @jimenadiazguzman2045 5 годин тому

    how do you make the horizontal navigation?

  • @neeluverma21
    @neeluverma21 5 годин тому

    wonderful class

  • @michellewu3256
    @michellewu3256 7 годин тому

    Hi Arash, great videos with clear explanations! If our background is a gradient, is it still possible to switch between dark and light modes? Thanks!

  • @soufiane_allali
    @soufiane_allali 9 годин тому

    Please try making a complete tutorial building a website from scratch.

  • @tvabin5831
    @tvabin5831 9 годин тому

    Very clear tutorial. Thank you. Excellent. Now do one with anchor points in a on page long scroll type of website with tabs in the header for quick navigation if you don't scroll.

  • @473_Pexler
    @473_Pexler 9 годин тому

    Arash I want to use the free one month of skill share to learn UI but I'm just 16, I don't have a credit card so I can't access it and only 170 have watched the video so far, I just missed the opportunity.

    • @DesignWithArash
      @DesignWithArash 9 годин тому

      You can ask your parents to sign up on behalf of you.

  • @Cinderella107
    @Cinderella107 10 годин тому

    I tried!!!! it's awesome thanks Arash 💜✨

  • @Dark_ehmma
    @Dark_ehmma 11 годин тому

    I tried it. The animation didn’t work 😭 I don’t know what I’m doing wrong 😫😫

    • @DesignWithArash
      @DesignWithArash 9 годин тому

      Please check the proper positioning of your gradient nodes and also make sure your prototype setting is set to Smart Animate and Linear.

    • @Dark_ehmma
      @Dark_ehmma 9 годин тому

      @@DesignWithArash I wish I could send you a photo. I’ll try it again.

    • @ryanchase9414
      @ryanchase9414 5 годин тому

      I'm with you also I tried it and the animation isn't workig for me either...ugg but good tutorial...

  • @lilou8711
    @lilou8711 11 годин тому

    👏👏👏

  • @SaadAlShiekhAli-sg4dl
    @SaadAlShiekhAli-sg4dl 11 годин тому

    bro this type of tips and tricks videos is as helpful as it can be, keep them up, at least in the shorts if not in official videos

  • @michellewu3256
    @michellewu3256 12 годин тому

    Hi Arash, thank you so much for the clear tutorial! One question... I know that you had home + icon into a variant of the main "home" button component. What if the text was different, for instance Sign up and Sign in. Would I need to make Sign up and Sign up into separate components with their respective variants that shows different modes of interaction (hover/pressed etc). Hope that question makes sense haha

  • @william2603
    @william2603 16 годин тому

    Hi Arash! How do I export the file with the size of the card? Thank you!

  • @Lacybrown1999
    @Lacybrown1999 22 години тому

    Thank you so much I really enjoyed your video, and it was helpful to me ❤

  • @v_malyovana
    @v_malyovana 22 години тому

    Thanks a lot, Arash!

  • @DesignWithArash
    @DesignWithArash 23 години тому

    👉Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX

  • @emeraldezy9675
    @emeraldezy9675 День тому

    You teach so well. Well done. How do you set the margin between elements? What shortcut key are you using?

    • @DesignWithArash
      @DesignWithArash День тому

      Thank you so much. To check the padding, you can hold down the Alt/Option key on your keyboard and hover your mouse over elements. To move elements around just use the arrow keys.

  • @mandasesay
    @mandasesay День тому

    Thanks very much for the information. When dragging the pen which will stop the line between?

  • @sparkleteam8977
    @sparkleteam8977 2 дні тому

    Super!!! Thank you!

  • @TheMotivationMatrix21
    @TheMotivationMatrix21 2 дні тому

    Great tutorial, straight to the point...❤

  • @electriknostalgia
    @electriknostalgia 2 дні тому

    this was so helpful! Do you have info on how to make the text animation responsive for web? So the text doesn't wrap and shrinks proportionally for mobile vs desktop.

    • @DesignWithArash
      @DesignWithArash День тому

      Glad to hear that. Did you try using Auto Layout and Constraints?

    • @electriknostalgia
      @electriknostalgia 4 години тому

      @@DesignWithArash thank you for the reply! I tried using auto layout and constraints but it's been pretty finnicky to work with as I am new to all of this. I just decreased the overall font size for desktop so that it can be responsive to smaller frames. I'm working on a custom portfolio website and may need some help with a few bugs before applying the Figma to Webflow plugin. Are you available to hire for freelance projects?

  • @sitedata-sf1vw
    @sitedata-sf1vw 2 дні тому

    Please share html code and link

  • @overflowid0
    @overflowid0 3 дні тому

    i liked even the native ads

  • @_Mr.Zx_
    @_Mr.Zx_ 3 дні тому

    'human computer interaction degree' usefull for ui/ux designer? plz give me a reply🙂

  • @analinalino
    @analinalino 3 дні тому

    Bro, this video is insane, thank you so much

  • @user-nu5xy6hn2i
    @user-nu5xy6hn2i 4 дні тому

    Wow dude, in minutes!😍 and yes, please make a video on airpods moving animation☺💝

    • @DesignWithArash
      @DesignWithArash День тому

      Glad you liked it. I already did. Check out the channel please.

  • @landesigraph
    @landesigraph 4 дні тому

    I have one question tho I've understand everything but when we make it responsive and use the hamburger menu ...do we have to set an interaction to go from the navigation bar to the hamburger ...I don't know if I'm clear enough 😅

    • @DesignWithArash
      @DesignWithArash День тому

      No, you don't need to do that. You can use the Breakpoints plugin to create a responsive prototype but it's not mandatory.

  • @Designwithjavid
    @Designwithjavid 4 дні тому

    arash dadash vaqean khodayi to amozeshe ui ux va az tarafe ye community irani azat tashakor mikonam "wrote in Persian"

  • @jennifercampbell5622
    @jennifercampbell5622 5 днів тому

    Hi Arash! This tutorial is incredibly helpful! Thank you so much for putting it together. When I put the dropdown box into my frame with auto formatting, it seems like the dropdown menu becomes transparent. I've tried fixing it in multiple ways, but nothing seems to work. Have you run into this issue? If so, how did you fix it? THANKS!

    • @jennifercampbell5622
      @jennifercampbell5622 5 днів тому

      Nevermind! I think the solution is to perhaps make the dropdown menu hold an absolute position, and group the auto-formatted items around it.

  • @ShailPM
    @ShailPM 5 днів тому

    why do you have a turkish accent werido

  • @Leochuks456
    @Leochuks456 5 днів тому

    Bro am done with my ui ux design course but don't know where to start what should i do

    • @DesignWithArash
      @DesignWithArash День тому

      Please check out this video. ua-cam.com/video/YqkyasAg00I/v-deo.html

  • @catchingthelight
    @catchingthelight 5 днів тому

    What is the advantage of doing this with variables instead of using the breakpoint plugin? If you make it with variables then your design is not truly responsive right?

  • @rimamousavi6734
    @rimamousavi6734 6 днів тому

    your videos are full of energy and passion, and It helps me to be eager to this new and challenging path.

  • @esthernwaogu592
    @esthernwaogu592 6 днів тому

    wonderful animation

  • @rimamousavi6734
    @rimamousavi6734 6 днів тому

    Your videos are always full of important and useful tips.. Thank you Arash.

  • @lancelegoff8770
    @lancelegoff8770 6 днів тому

    Hi there im following your video but when trying to do the advanced settings on Auto Layout to space the $ and Buy now cta I don't see the spacing option for space between or packed which I assume Figma have changed since your post?

  • @hikmatoteniya
    @hikmatoteniya 6 днів тому

    contrast and typography.

  • @elinaoikonomou381
    @elinaoikonomou381 6 днів тому

    I love this! Any idea how to develop this using React?

  • @SaadAlShiekhAli-sg4dl
    @SaadAlShiekhAli-sg4dl 7 днів тому

    helpful? that was massive bro thank you

  • @GaneshKumatole7
    @GaneshKumatole7 7 днів тому

    Yes. Create a more detailed video on Auto-layout. And Thank-You for this.

    • @DesignWithArash
      @DesignWithArash День тому

      No problem. Please check out this video. ua-cam.com/video/42uQGucQA9o/v-deo.html

    • @GaneshKumatole7
      @GaneshKumatole7 23 години тому

      @@DesignWithArash Yeah, I've seen it. Actually I didn't knew that you'd already created one. Thanks.

  • @SweSwe-pq8bt
    @SweSwe-pq8bt 7 днів тому

    Thank you so much, bro.

  • @BrandSolve
    @BrandSolve 8 днів тому

    You are awesome. This was really helpful guide for Figma. Thanks a lot.

  • @BharathiChodavarapu-gf1kh
    @BharathiChodavarapu-gf1kh 8 днів тому

    This video is so helpfull for me...Thank you..please do some auto layout videos ...

    • @DesignWithArash
      @DesignWithArash День тому

      Glad it helped. Please check out this video. ua-cam.com/video/42uQGucQA9o/v-deo.html

  • @HamsterKombatMastery
    @HamsterKombatMastery 8 днів тому

    Nothing related to Apple's website animation. Apple uses image sequence. Your video in the beginning and in the end result is very different.

  • @shi_ap
    @shi_ap 8 днів тому

    اومدم به انگلیسی فیگما یاد بگیرم قلبم اکلیلی شد دیدم یه ایرانی به انگلیسی آموزش داده 🎉🎉باعث افتخاری❤❤❤❤❤

    • @DesignWithArash
      @DesignWithArash День тому

      خیلی لطف داری شما. ممنونم از پیام پر مهرت. منم با دیدن پیام شما قلبم اکلیلی شد🌹🌹🌹🌹

  • @favourokoye3767
    @favourokoye3767 8 днів тому

    There definitely has to be a “multiple likes” button! This video was so simple and straightforward

  • @ChayonShaahOfficial
    @ChayonShaahOfficial 8 днів тому

    Bro can you make a complete case study of any UX project with details ?