Perfect Typography Scale for UI Design (Exact Blueprint) | Figma Tutorial

Поделиться
HTML-код

Комментарии • 68

  • @Mizko
    @Mizko  6 месяцев назад +6

    If you want to download Shipfaster UI - BASE:
    www.thedesignership.com/shipfaster-ui-base
    👉 TUTORIAL100 👈 Use the coupon to get the file for FREE!

  • @SzabatDesign
    @SzabatDesign 6 месяцев назад +5

    I have the Design system from Designership and I regularly work with it on projects for my clients ;) Sooo good!

    • @Mizko
      @Mizko  6 месяцев назад +3

      🫶 2.7 will be launching soon!

    • @SzabatDesign
      @SzabatDesign 6 месяцев назад

      ufff can't wait :D@@Mizko

  • @seriouslybruhhh
    @seriouslybruhhh 4 месяца назад +2

    It is so similar to Uber's Base Design system. Great explanation there !

  • @MrLohkaa
    @MrLohkaa 6 месяцев назад +1

    Thank you Mizko for the explanation and the free UI kit. What's best practice if I would like to use a different font for my type-scale? Detach all font styles > select new font > attach new font?

    • @Mizko
      @Mizko  6 месяцев назад

      Hey Lohka,
      You can use the Figma plugin, Batch Styler. You can select all fonts > select new font > tada!!

  • @arunkumarrathod5514
    @arunkumarrathod5514 6 месяцев назад +4

    Hey Mizko can you please make a video on how to build a typescale from scratch. like what sizes to choose for different platforms etc.
    I believe many people dont know how to make a typescale according to project requirements.
    It is a sincere request. Please do consider this... Thanks!

    • @Mizko
      @Mizko  6 месяцев назад +2

      Hey Arun, watch this video from start to finish… that’s what this video is about 👌

    • @arunkumarrathod5514
      @arunkumarrathod5514 6 месяцев назад +2

      @@Mizko Hey Mizko thanks for the reply but let me elaborate a little more. I was asking to make a detailed video on the thought process behind picking the size, line height, and other parameters according to the project and understanding why are we using these specifics for these specific purpose's.
      I want you to teach me that given any situation i should be able to pick the right specifics and give reasoning behind the decision.
      I hope that clears my question a little more.
      looking forward to your reply. Thanks!

    • @Fabian-fk8qs
      @Fabian-fk8qs 6 месяцев назад

      @@arunkumarrathod5514 also interested in that

    • @Fabian-fk8qs
      @Fabian-fk8qs 6 месяцев назад +4

      ​@@MizkoI was also missing a lot about the reasoning. Felt more like an advertisement for your UI kit. Why don't you use scales like minor fourth etc. anymore you suggested in your curse and videos? And what about different fonts? This one is for Inter - how to match letter-spacing to a font e.g. (totally different with other fonts than Inter) or what about fonts that seem like Inter but 1px smaller or larger at the same font size (or in between). Etc.

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

    @mizko the coupon for the download is not working on my end - could you check the code?

  • @SzabatDesign
    @SzabatDesign 6 месяцев назад +2

    One fast question, what about button? Soo in that case main CTA is as well Label typography?

    • @Mizko
      @Mizko  6 месяцев назад +2

      Exactly! Button labels are labels not paragraphs :)

  • @snorose3458
    @snorose3458 6 месяцев назад +4

    How would you suggest to work with this typescale best between the breakpoints? From what i can see the Large, Medium, Small etc is not connected to the size of device and will be mixed heavily through out layouts and further shuffled in different combinations for different breakpoints?

    • @Mizko
      @Mizko  6 месяцев назад

      That would be dependent on what you would like to do for each breakpoint.
      There’s no one size fits all solution.
      I personally prefer 14px as a base and you can increment by 2.
      There are also Mobile versions of the headings.

    • @vadim_sharapov
      @vadim_sharapov 6 месяцев назад

      Hi, in my experience, even though a lot of designers are using 'Large, Medium, Small', it is better to go from '3x, 2x, 1x', because that naming will abstract you from thinking that it is directly connected to the physical size of devices-Large (Desktop), Medium (Tablet), and Small (Mobile) size. This abstraction helps maintain scalability and flexibility across various screen sizes and resolutions. The second thing, based on my experience, is to document the specific use cases or contexts in which each size variant should be used. For instance, '3x' might be used for primary headings, '2x' for secondary headings, and '1x' for body text, irrespective of the device size.
      Further, it's crucial to integrate responsive design principles with these size variants. You can utilize CSS media queries to adjust the font size, spacing, and other related properties of each variant (3x, 2x, 1x) based on the viewport width. This approach ensures that your typography scales appropriately across different breakpoints.
      At this moment the problem is that Figma do not support variables for typography and that will create some confusion and extra documentation from the designer.
      Hope that is helpfull :)
      PS
      You can use (or communicate to developers or they will tell it to you) techniques such as fluid typography, like calc(), along with viewport units (vw, vh, vmin, vmax), to create type sizes that scale smoothly between specific breakpoints.

  • @wajeeharehman4268
    @wajeeharehman4268 6 месяцев назад +1

    This is so so helpful 😊

    • @Mizko
      @Mizko  6 месяцев назад

      Thank you!!!

  • @mzaidhayat
    @mzaidhayat 6 месяцев назад +1

    I'm looking for a Master Design System course based on new figma updates, can someone please suggest

    • @Mizko
      @Mizko  6 месяцев назад +1

      I’m working on one as well speak :)

    • @mzaidhayat
      @mzaidhayat 6 месяцев назад

      @@Mizko Awesome! Would love to master Design System from you, how you explained the Typography.

  • @gamehubby
    @gamehubby 6 месяцев назад +1

    I'm new here, do you offer discount to get everything? Wanna check it out

    • @Mizko
      @Mizko  6 месяцев назад

      If you want to buy everything… I can organize a deal for you :) email support@thedesignership.com

    • @Mizko
      @Mizko  6 месяцев назад

      If you want to buy everything… I can organize a deal for you :) email support@thedesignership.com

  • @edigunawan3194
    @edigunawan3194 6 месяцев назад +1

    Thank you so much mr. mizko design system download free

    • @Mizko
      @Mizko  6 месяцев назад

      :)

  • @bl7937
    @bl7937 6 месяцев назад +2

    Perhaps I'm missing something, but how do you manage updating ALL typography if the font changes? Do you have a typeface component that you can update that updates ALL typography styles?

    • @Mizko
      @Mizko  6 месяцев назад

      Figma plugin, Batch Styler

  • @adarogu
    @adarogu 6 месяцев назад +5

    Thank you for this Mizko, appreciate what you are doing man.

    • @Mizko
      @Mizko  6 месяцев назад

      🙏

  • @morshlab
    @morshlab 6 месяцев назад +2

    One Question where did you find the ideal typography scale? you used here, or any source or rules from design professional? or you just used your own will and thought that your scale is the best?

    • @Mizko
      @Mizko  6 месяцев назад

      From 14 years of design :)

    • @morshlab
      @morshlab 6 месяцев назад +2

      @@Mizko Thanks for your reply. However, just citing years of experience doesn't provide much insight into the reasoning behind your typography scale choices. There are well-established principles and guidelines around readable typography that designers follow.

  • @uifry
    @uifry 6 месяцев назад +1

    SO helpful Tutorial :)

  • @MrLohkaa
    @MrLohkaa 6 месяцев назад +6

    Hi Mizko, I see that you are using a width of 1136 for the large layout grid, what is the reason behind this? I always use 1440px myself, thanks in advance!

    • @vadim_sharapov
      @vadim_sharapov 6 месяцев назад +3

      In my experience, it's better not to start with the desktop design but with the mobile version and then scale it up. So, maybe he uses a narrower size so that it's easier to adjust for tablets and mobile devices, or it could just be a typo :))))

    • @MrLohkaa
      @MrLohkaa 6 месяцев назад

      @Mizko Can you please explain?

  • @bvs455
    @bvs455 6 месяцев назад +1

    Hey Mizko!
    Any idea when the Shipfaster UI 2.7 will be available?
    Excited for the next update!

    • @Mizko
      @Mizko  6 месяцев назад +1

      No locked in date, but soon :)

  • @RLNDcaST
    @RLNDcaST 6 месяцев назад +1

    I have Shipfaster 2.3v and would like to know how can I update that to newest version? 🙂

    • @Mizko
      @Mizko  6 месяцев назад +1

      Drop us a message on support [at] thedesignership.com with your receipt and we can sort you out.

  • @yusufkhalidmuhammad4948
    @yusufkhalidmuhammad4948 3 месяца назад

    HI Mizko, Thank you so much for this! Tried out the Base Shipfast UI kept showing "Unsupported file format"

  • @megzi___9398
    @megzi___9398 5 месяцев назад

    The description for the line height does for labels does not match

  • @abdulrahmaniliyas5691
    @abdulrahmaniliyas5691 4 месяца назад

    Invalid coupon, thats what i got as feedback. or am i doing it wrong somehow?

  • @MuratKarakus-to4tr
    @MuratKarakus-to4tr 6 месяцев назад +1

    sir, god bless you! will there be a figma 2024 ux ui design course as well?

    • @Geriya
      @Geriya 6 месяцев назад +1

      Dude don’t expect from him 😂 learn it by yourself. It’s a free world 🎉

    • @Mizko
      @Mizko  6 месяцев назад +1

      Yep! This will be launching once I’m back from my holiday

    • @MuratKarakus-to4tr
      @MuratKarakus-to4tr 6 месяцев назад

      @@Geriya and youtube is not a part of free world? looking for a video in youtube, finding a passionate person and learning from him or her, is this not mean learning by myself? Think before writing your comment my friend...

    • @MuratKarakus-to4tr
      @MuratKarakus-to4tr 6 месяцев назад

      @@Mizko oh happy holidays sir, than you so much!

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

    Thank you for this Mizko!

  • @samuelshowunmi1579
    @samuelshowunmi1579 5 месяцев назад

    So helpful and thanks for the great explanation

  • @RGKRAJA
    @RGKRAJA 5 месяцев назад

    This is so helpful ❤❤

  • @alpmobs
    @alpmobs 6 месяцев назад

    Thank you!

  • @iriza133
    @iriza133 6 месяцев назад

    actually it is not working (I mean after applying the cupon code, I can't pass the download option)

    • @Mizko
      @Mizko  6 месяцев назад +1

      Did you input an email?

  • @Underhills
    @Underhills 6 месяцев назад

    Where's the link to the type sizes? All I see is links to the purchase of the whole system itself.

    • @Mizko
      @Mizko  6 месяцев назад

      First link in the video description and first link in the comments.

    • @Mizko
      @Mizko  6 месяцев назад

      First link in the video description and first link in the comments.

    • @Underhills
      @Underhills 6 месяцев назад +1

      That link doesn't lead to any downloading interaction, instead it goes to a transaction form.@@Mizko

  • @bartpas12
    @bartpas12 6 месяцев назад

    File download is not working after the checkout, could You please fix it?

    • @Mizko
      @Mizko  6 месяцев назад

      I just checked and it's working fine? What do you see?

    • @simonlarragy9376
      @simonlarragy9376 6 месяцев назад +2

      Same problem. I'm getting this@@Mizko . A dialogue box with "Shipfaster UI 2.6 - Base.fig" importing but all I'm getting is a twirly wheel that doesn't stop

    • @Katiedoan88
      @Katiedoan88 6 месяцев назад

      @@simonlarragy9376 I'm also unable to open the file on my MacBook :/ I tried to open in Figma, but it doesn't recognize it

  • @HasnatAhmed-jn4di
    @HasnatAhmed-jn4di 6 месяцев назад +1

    Love you for Shipfaster 😍 Thank you so much @mizko ❤

    • @Mizko
      @Mizko  6 месяцев назад +1

      Anytime!