Responsive Typography With Variables | Figma Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ก.ย. 2024
  • 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 experiences. I've helped over 40,000 students become UI/UX designers from scratch worldwide.

ความคิดเห็น • 61

  • @DesignWithArash
    @DesignWithArash  5 หลายเดือนก่อน +3

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

    • @jeandavidabeelack
      @jeandavidabeelack 4 หลายเดือนก่อน

      Hello Arash thanks for your educative and very helpful content. I have a question, can we add a navigation/GPS map to figma?

  • @cmarkovich
    @cmarkovich 2 หลายเดือนก่อน +5

    You are by far the best Figma teacher I've come across, all your lessons are on point. Thanks you!

  • @aribee723
    @aribee723 5 หลายเดือนก่อน +4

    Another invredible video Arash! Some time ago I asked you about responsive text ... and here it is! Thank you for spreading your knowledge & light! 😊💫🌟

    • @DesignWithArash
      @DesignWithArash  5 หลายเดือนก่อน

      My pleasure! Thank you so much.

  • @tatyanavervekina8262
    @tatyanavervekina8262 4 หลายเดือนก่อน +2

    It seems to be a nice tool to make the process easier. I watched the video multiple times but it seems for me to be very confusing as well, tried to apply to mine but still didn't get it...

  • @Underhills
    @Underhills หลายเดือนก่อน

    Super clear and concise demo as always 🥇

  • @robin_designs
    @robin_designs 2 หลายเดือนก่อน

    I see this as a problem if you want to also have dark-mode. You can only choose one type of mode per frame. I don't know which one is more time consuming, changing colors or changing fonts.

  • @opeyemiajagbe
    @opeyemiajagbe 2 หลายเดือนก่อน

    Amazing tutorial. Thank you for this🎉❤

  • @PaulPalade
    @PaulPalade 2 หลายเดือนก่อน

    Hey Arash, this is such a great and straightforward tutorial! Do you think one could link these variables to trigger during prototype preview? Figma recently introduced responsive mode for prototypes so I was thinking this could be achieved via. hard code syntaxing. What do you think?

  • @mischugo
    @mischugo 4 หลายเดือนก่อน +1

    Thanks a lot here. Surely there is no way to add an underline to a specific text passage if the text already has a text style, is there?

  • @stanislovasm.7313
    @stanislovasm.7313 5 หลายเดือนก่อน +1

    Thanks for the video 🙏 You have a talent for teaching 👍 👏

    • @DesignWithArash
      @DesignWithArash  5 หลายเดือนก่อน

      No problem. Thank you so much.

  • @AppuRiddle
    @AppuRiddle 4 หลายเดือนก่อน

    Great Video Arash can you create a video on how you create mood board for ui design then how to create beautiful perfect color shade for each color derived from the moodboard.

  • @soul_xplore
    @soul_xplore 3 หลายเดือนก่อน

    Thank you! Your channel is amazing, very useful ❤‍🔥

    • @DesignWithArash
      @DesignWithArash  2 หลายเดือนก่อน

      No problem. Thanks a lot.

  • @KaliLamyx
    @KaliLamyx หลายเดือนก่อน

    Whouahhh ! Thanks so much !

  • @JamesTenniswood
    @JamesTenniswood 4 หลายเดือนก่อน

    Great run through, thanks for sharing

  • @trade24x7
    @trade24x7 4 หลายเดือนก่อน

    Thank you Arash helpful as always 🤩

  • @bigsmoke5258
    @bigsmoke5258 หลายเดือนก่อน

    insightful! Is it possible to copy a variable into a new design file ? If i already set it up on another file, can I bring it all into a new file ?

  • @petermichael3490
    @petermichael3490 5 หลายเดือนก่อน +1

    thankyou sir Arash!!

  • @suniljadhav1889
    @suniljadhav1889 5 หลายเดือนก่อน

    Really getting updated knowledge ...Thanks

  • @AshutoshVashishtha-g3q
    @AshutoshVashishtha-g3q หลายเดือนก่อน

    AMAZING!

  • @javadsaberi_afroo
    @javadsaberi_afroo 2 หลายเดือนก่อน

    Thank you for your good video.
    a question. Is it necessary for typography to create the colors once in primitives and choose a alias for them in semantic?
    I think there is no need to create a separator in primitives for typography and spacing ...

  • @AndersonSilvaart
    @AndersonSilvaart 5 หลายเดือนก่อน

    Super cool Arash. I have your course on your platform. Will we have any news about this there?

    • @DesignWithArash
      @DesignWithArash  4 หลายเดือนก่อน +1

      Thanks. Yes, once Figma releases its major updates in June, you will find many updated videos on the platform.

  • @wolfoxnitido6369
    @wolfoxnitido6369 5 หลายเดือนก่อน +2

    Hellooo, i like figma and your videos

    • @DesignWithArash
      @DesignWithArash  5 หลายเดือนก่อน +1

      Hi. Thank you. Glad to hear that.

  • @godsonpro9462
    @godsonpro9462 5 หลายเดือนก่อน +1

    Thank you👍

  • @pakaradeek
    @pakaradeek 3 หลายเดือนก่อน

    but whats the use of this? we can do with older fashion using text styles generator with desktop and mobile

  • @tommyKal22
    @tommyKal22 5 หลายเดือนก่อน

    Hey mate thanks so much for your spreading light! Great videos!! Is that on free plan of figma also? Cause i can't seem to find it.

    • @DesignWithArash
      @DesignWithArash  4 หลายเดือนก่อน +1

      Hey. No problem. Yes and no. You can use typography variables using the Free account but if you want to use responsive font sizes then you should use Modes which is available to paid users.

    • @tommyKal22
      @tommyKal22 4 หลายเดือนก่อน

      @@DesignWithArash Thanks!

  • @roniahmed9802
    @roniahmed9802 4 หลายเดือนก่อน

    is it for paid version?
    in my figma there is no setting button available.

  • @gagging5156
    @gagging5156 5 หลายเดือนก่อน

    Are you planning to give a discount for your class soon?😢 I really want to take your online class, but I can’t afford it.

    • @DesignWithArash
      @DesignWithArash  4 หลายเดือนก่อน

      No, there will be no promotion in the near future.

  • @studyuiux
    @studyuiux 3 หลายเดือนก่อน

    Thank you
    😊

  • @perliva
    @perliva 5 หลายเดือนก่อน

    Thanks. Now percentages for line height, please figma!

    • @DesignWithArash
      @DesignWithArash  4 หลายเดือนก่อน

      No problem. Yeah, tell me about it😀

  • @saratrh3339
    @saratrh3339 5 หลายเดือนก่อน

    It's helpful ❤❤

  • @Leochuks456
    @Leochuks456 3 หลายเดือนก่อน

    Bro please my only problem is how to master pages in ui ux like for e-commerce websites i dont know how many pages maybe one page or two likewise other please can you help me out

    • @mw9968
      @mw9968 3 หลายเดือนก่อน

      Sorry bro. What do you mean?

    • @Leochuks456
      @Leochuks456 3 หลายเดือนก่อน

      @@mw9968 like the sidemap and the footer section

  • @wayofMANI
    @wayofMANI 5 หลายเดือนก่อน

    tnx

  • @EtherealInsights07
    @EtherealInsights07 3 หลายเดือนก่อน

    indian hai to indian accent bol na ! bada aaya american banne .

  • @znkdev
    @znkdev 5 หลายเดือนก่อน +1

    that's sad when people teach stuff for only pro users 😪😮‍💨

    • @axeloord8741
      @axeloord8741 4 หลายเดือนก่อน

      How else are we supposed to learn this information?

    • @JamesTenniswood
      @JamesTenniswood 4 หลายเดือนก่อน +1

      It's ok to have different content for different levels of experience

    • @znkdev
      @znkdev 4 หลายเดือนก่อน

      I meant pro, figma paid, users. =], not the knowledge

    • @fanovaohsmuts
      @fanovaohsmuts 3 หลายเดือนก่อน +1

      There’s plenty of tutorials already on how to use text styles to set up a type scale. This video exists because variables are the new feature and there aren’t as many tutorials on it.

  • @prithviphoenix2
    @prithviphoenix2 5 หลายเดือนก่อน

    Thank you boss.