masha
masha
  • Видео 70
  • Просмотров 149 635
Improve your typography with these keyboard shortcuts
subtle ways to make your work stand out.
00:08 quotation marks
01:17 hyphens and dashes
02:40 ellipses
03:14 nonbreaking space
03:56 book recs
referenced 📖
practical typography practicaltypography.com/
typography best practices www.smashingmagazine.com/ebooks/typography-best-practices/
used in this video 🫶
icons heroicons.com/
mac keyboard www.figma.com/community/file/928718868144749467/keyboard-keys-with-variants
pc keyboard www.figma.com/community/file/1298637835669954280/simple-pc-keyboard-layout
#uidesign #typography
Просмотров: 163

Видео

Set variable mode / Figma prototyping for beginners
Просмотров 2752 месяца назад
00:20 example 1, simple color themes switch 04:07 example 2, day/night switch with a toggle component figma file: www.figma.com/community/file/1403155633934929649/example-set-variable-mode-in-prototyping related vids ruclips.net/video/Z1xHiii-6Xg/видео.html ruclips.net/video/5XgiwDiiHyY/видео.html ruclips.net/video/OzJ9YH7Sqf8/видео.html ruclips.net/video/KvyJHhn_5FY/видео.html ruclips.net/vide...
Conditional prototyping with variables in Figma
Просмотров 5752 месяца назад
In this tutorial, we'll use the if/else logic to check whether we have something in our shopping cart 🛍️ If we do, we'll enable the decrease and checkout buttons and add navigation to the next screen. If we don't, we'll keep (or change) the buttons to disabled state. Duplicate this worksheet to follow along: www.figma.com/design/GzVIJFtTlAQkNNYTxRuOdH/Conditional-prototyping-worksheet?node-id=0...
How to set line heights for different languages, in CSS
Просмотров 522 месяца назад
(you can obviously do this for any styles.) 00:50 lang html attribute 02:19 adding styles in css 04:14 enhancing with css variables codepen example codepen.io/masha312/pen/qBzZwJO great article i came across while researching for this chenhuijing.com/blog/css-for-i18n/#🚲 #css #frontend my newsletter 💌 world.hey.com/mash my website 🤍 www.mash.haus
How to export Rive as GIF or video
Просмотров 8853 месяца назад
as of july 2024! #rive #animation
Add spaces to layer names in Figma
Просмотров 2183 месяца назад
it's easy to remove spaces from layer names in Figma, but adding them is a different challenge... hopefully this plugin will help! www.figma.com/community/plugin/1382104414652559056/word-breaker 00:53 demo starts here #designsystems #figma #figmaplugins my newsletter: world.hey.com/mash
NEW plugins for editing code syntax in Figma
Просмотров 3174 месяца назад
add, update, or remove code syntax for ALL variables in a collection. code syntax editor: www.figma.com/community/plugin/1381403283977874287/code-syntax-editor code syntax eraser: www.figma.com/community/plugin/1378079558111259057/code-syntax-eraser 00:42 add or update code syntax 03:16 delete code syntax #figma #designsystems #frontend my newsletter: world.hey.com/mash
buttons in code don’t match design? this could be why.
Просмотров 2,3 тыс.4 месяца назад
"every designer should watch this." -my bf play with box-sizing: codepen.io/masha312/pen/gOJwejo?editors=1100 mdn docs: developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 01:05 box-sizing css property 02:59 regular buttons vs. link buttons 04:02 regular buttons 06:28 links disguised as buttons 08:50 wrapping up #css #uidesign #frontend my newsletter: world.hey.com/mash
5 favorite Figma plugins
Просмотров 2555 месяцев назад
that i haven't mentioned yet :) figma file: www.figma.com/file/ChWoozsyYOARnCuOedebTd/5-fave-plugins?type=design&node-id=0:1&mode=design&t=AXkEIvH1Gxs2v3C8-1 to path: www.figma.com/community/plugin/751576264585242935/to-path?searchSessionId=lvs9ml0n-tzv0mjsiom&fuid=769647587273028980 pattern creator: www.figma.com/community/plugin/1062828640232861563/pattern-creator image tracer: www.figma.com/...
Donut charts / Figma tutorial
Просмотров 5495 месяцев назад
technical and ux tips for making a donut (or pie!) chart in figma. 00:23 creating a chart structure with ellipses 02:50 picking accessible colors 05:17 adding patterns to chart styles 07:29 wrapping up figma file: www.figma.com/community/file/1368568320352304600/donut-chart-tutorial tool for generating colors: vrl.cs.brown.edu/color tool for testing colors: projects.susielu.com/viz-palette donu...
One click to create typography variables / Figma
Просмотров 4535 месяцев назад
For your existing text styles. plugin: www.figma.com/community/plugin/1363237082311305172/variablize-text-styles related: ruclips.net/video/dcphKnvDHgM/видео.html #figma #designsystems #uidesign
Create a text review plugin in Figma
Просмотров 2637 месяцев назад
it’s like a spell check for your own copy guidelines. code: github.com/masha312/text-review-tutorial related tutorials: ruclips.net/video/pA4n712h1Vc/видео.htmlsi=7Hhp3LYi0P9ynRs9 ruclips.net/video/i1k6lLPC4LY/видео.htmlsi=CrTNngtBTz53DX_w 01:31 Basic plugin setup 02:28 Adding code for text review 05:21 More examples (case sensitive or not) 08:34 Note about publishing your plugin 💌 newsletter -...
Add real dates to calendars in Figma
Просмотров 4,5 тыс.9 месяцев назад
no more adding days to calendars manually :) plugin - www.figma.com/community/plugin/1329228807242129260 code - github.com/masha312/calendar-plugin Related vids calendar tutorial in figma - ruclips.net/video/YdpZcHHMvuY/видео.html intro to plugins in figma - ruclips.net/video/pA4n712h1Vc/видео.html 💌 newsletter - world.hey.com/mash #designsystems #figma #uidesign
Scroll animations with just CSS
Просмотров 1799 месяцев назад
in this tutorial we’ll make a progress bar on scroll, using css only :) 00:57 Adding html and styles for the progress bar 04:18 Making scroll animation codepen (final): codepen.io/masha312/pen/ExMYZBm codepen (blank): codepen.io/masha312/pen/KKEVzgO #css #csstips #frontend ✉️ get in my head: world.hey.com/mash
Recreating Stripe's button animation in CSS
Просмотров 65310 месяцев назад
Recreating Stripe's button animation in CSS
How to add focus state to components / Figma
Просмотров 2,6 тыс.10 месяцев назад
How to add focus state to components / Figma
Collapsible side navigation bar in Figma
Просмотров 1,3 тыс.10 месяцев назад
Collapsible side navigation bar in Figma
Design System best practices / Figma
Просмотров 84211 месяцев назад
Design System best practices / Figma
Turn layer fills into color variables / Figma
Просмотров 83311 месяцев назад
Turn layer fills into color variables / Figma
Add colors, radii, and spacer presets to your Figma file
Просмотров 65911 месяцев назад
Add colors, radii, and spacer presets to your Figma file
Dynamic prototyping with variables / Figma tutorial
Просмотров 1,7 тыс.Год назад
Dynamic prototyping with variables / Figma tutorial
How to track workouts (or anything else) in Notion
Просмотров 168Год назад
How to track workouts (or anything else) in Notion
Light/dark mode and theming with variables in Figma
Просмотров 2,3 тыс.Год назад
Light/dark mode and theming with variables in Figma
How to instantly add code syntax to variables / Figma
Просмотров 1,7 тыс.Год назад
How to instantly add code syntax to variables / Figma
Sweetgreen / Mobile app design in Figma
Просмотров 337Год назад
Sweetgreen / Mobile app design in Figma
Fixed and sticky scroll / Prototyping in Figma for beginners
Просмотров 3,3 тыс.Год назад
Fixed and sticky scroll / Prototyping in Figma for beginners
5 books for (design) system thinkers
Просмотров 186Год назад
5 books for (design) system thinkers
Creating a responsive component with boolean variables / Figma
Просмотров 13 тыс.Год назад
Creating a responsive component with boolean variables / Figma
Intro to making plugins in Figma
Просмотров 282Год назад
Intro to making plugins in Figma
A faster way to apply Figma's variables
Просмотров 1,9 тыс.Год назад
A faster way to apply Figma's variables

Комментарии

  • @Junction2Coworking
    @Junction2Coworking 3 дня назад

    Thank you for creating a video that covers all of my same 'pet peeves' and has really logical recommendations - and presented clearly with no coloured lights and time-wasting fanfare 🙌🏼

    • @mash312
      @mash312 День назад

      “no coloured lights and time-wasting fanfare” is my goal! thank you :)

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

    Thank you for an excellent, clear, and practical video.

    • @mash312
      @mash312 День назад

      thank you! :)

  • @CHANDRASEKHARPUPPALA-b9z
    @CHANDRASEKHARPUPPALA-b9z 7 дней назад

    Excellent Video! You are the best when it comes to FIGMA and I mean it. I have seen several videos on topics related to FIGMA and no one has demonstrated that well as you did. Thanks for sharing videos and teaching us the best techniques. Keep it going high!

    • @mash312
      @mash312 7 дней назад

      that’s very kind, thanks so much :) happy it’s helpful.

  • @CHANDRASEKHARPUPPALA-b9z
    @CHANDRASEKHARPUPPALA-b9z 7 дней назад

    Excellent demonstration. Very informative and easy to understand 👍

    • @mash312
      @mash312 7 дней назад

      thank you :)

  • @MorganFeeney
    @MorganFeeney 13 дней назад

    Now imagine a "Depeche Modal" component...

    • @mash312
      @mash312 12 дней назад

      that would be my favorite component!

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

    Thank you, great video!!!

    • @mash312
      @mash312 13 дней назад

      thank you :)

  • @gianniche
    @gianniche 15 дней назад

    I had the same problem - didn't work because of the missing font. Otherwise great plugin that helped me a lot Thanks, Masha!

    • @mash312
      @mash312 13 дней назад

      happy it worked in the end, thank you :)

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

    great help thanks

    • @mash312
      @mash312 21 день назад

      thank you :)

  • @aznboi7v
    @aznboi7v 24 дня назад

    Thanks for breaking down conditionals! I couldn't wrap my head around when to use logic and you laid it out so easily.

    • @mash312
      @mash312 21 день назад

      amazing! thank you :)

  • @ricardovessaro1337
    @ricardovessaro1337 28 дней назад

    Thanks for your help!!!!

  • @HemanthKumar-vh3sy
    @HemanthKumar-vh3sy Месяц назад

    I miss the "Preserve Scroll" Feature. Auto preserve scroll doesn't work well with large number of layers and with minor differences between frames

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

      hopefully it’ll get ironed out in the future 🙏

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

    hey thanks for your concise and precise explanation 👏❤

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

      thank you :)

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

    Thank you, Masha! I think this is a great approach! I appreciate your time and sharing this with us!

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

      thank you so much! :)

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

    Thanks for this super helpful video! You describe the steps very well, keep up the good work and making our lives easier :')

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

      thank you so much! happy it's helpful :)

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

    Thank you so much Masha. It didn't work me before but when I read the comment and you suggested to change font and finally it works for me. Please share more Figma videos. Your videos are very helpful for beginners like me :)

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

      happy to hear it worked! I wonder why the other font didn’t load :( and thank you, let me know if you have any suggestions! :)

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

    very useful, it helped me a lot to practice :) greetings from argentina

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

      thank you! :) cheers from Providence

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

    The subtle changes are super helpful, thank you!

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

      thank you Leland! love your username btw

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

    why you use percentages (150%) for line height value?

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

      Percentages are more manageable (for example, if font size changes, you don’t have to worry about updating the line height)

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

    Masha, thank you for sharing this plugin with us. I watched the step by step video, but it didn't work completely for me, only the month YYYY. The days and days of the week didn't change.

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

      emailed you! 👀

  • @hackur-g
    @hackur-g 2 месяца назад

    Thank you

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

    Great video. Thanks

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

    Variable starter plugin ❤

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

    Thank you! This is a great tutorial!

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

      thank you! :)

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

    Hey masha, its really flexible using variables but have you tried on prototype. For example in mobile menu how do you solve drop down with one component variant (sure we can give an boolean for expanded version but things getting messy)

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

      hi! yeah i haven’t applied this to prototyping, totally agree it could get more messy

  • @Q-Phreak
    @Q-Phreak 2 месяца назад

    What a hack - but it works! Thank you so much

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

      thank you! :) i was surprised too haha

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

    This is exactly what I'm looking for! Thank you.

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

      awesome! 🙌

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

    Nice, great tutorial info.. thankyou so much Masha.

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

      thank you :)

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

    I love it!!!

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

      ❤️❤️❤️

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

    I love it❤❤❤ ..thanks alot , please make more videos about css

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

      thank you ❤ lmk if there's anything specific about css that you'd like :)

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

    by the way, Rive has a great video going over all the export options: ruclips.net/video/WucdFfTI2yw/видео.htmlsi=xXsu3i57gdx3vRsH (the UI is previous version though, which is what tripped me up)

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

    Очень полезное видео! Поделилась с коллегами. Они тоже в восторге :) Спасибо большое, Маша!

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

      спасибо вам!! :) очень рада что видео оказалось полезным)

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

    ❤ Thank you.

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

    Hi Masha! Why do you convert all px measures to rem? Is there a reasoning behind it or you are more used to it? Thank you for a great video!

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

      hi! thank you :) rems tend to be better for accessibility, here's a great article if you'd like to learn more: www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ (the only reason we use px in figma is because there's no other way currently)

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

    Thanks for showing the trick about layer ordering for absolute position. Was going nuts with a text input I’ve made and this solved it.

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

      amazing, happy this helped!

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

    This is really what I've been looking for. Thank you 💙

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

      thank you :)

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

    6:34 … please how did you bring those frames together to form a 3rd frame. I’m having trouble with that and can’t get over that hurdle :(((

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

      hey! have the two frames selected and then click Shift+A to add auto layout (you can also add auto layout from the properties panel on the right) here are Figma docs if helpful: help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design

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

      Thank you so much! It worked! I can’t get my auto layout like yours tho… at 6:55… I am not seeing any toggle saying “fixed height / fill container” when I click on the rectangle (top left part of chat bubble). It just shows me “rectangle 11” highlighted. Cus of this my chat bubble works until I try to type a long message and the bottom left of the chat bubble is not expanding with the rest bubble. Hope this makes sense! Pls help 🥺

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

    fantastic niche tool. great idea

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

      thank you :)

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

    A really cool plugin except it doesn't work. I have the calendar frame selected, all of the cells are named .calendar-day, the whole thing.

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

      sorry about that, feel free to share the file with me if you’d like - mash at hey dot com (maybe it’s the font loading thing or something)

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

    tq. for this. vdeo big fan

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

      thank you very much :)

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

      @@mash312 Since i am b_end dev. i shared ur video to my fend team. they are using this design as ref. u saved lots of time. t.y. :)

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

      @@saileshshiwakoti2160 that’s so cool, thank you for sharing that with me :)

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

    Your video is the first sensible approach to Figma slots that I've come across, and it mimics how web developers actually use them! Many videos show the body area having multiple slots... unfortunately, when users see multiple slots they naturally have a 1-to-1 component swap mindset, which becomes inflexible and limiting. But container components like modals and cards can have an infinite amount of UI scenarios inside the body area that won't work with the 1-to-1 component swap. But by having just 1 slot, hopefully users start thinking deeper and realize to wrap their varied content as a private component and slot that in. With all that said, do you use slots like this? Or do you just detach still? Seems more intuitive for users to detach, I don't know if users can make the jump in their head to create a component ahead of clicking on the slot drop zone. It also just feels a little strange/untidy to have the guts of the master content component hanging outside of the modal.

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

      hey, thank you so much! :) yeah having multiple component slots seems useful in theory and rarely applicable in practice… And I use slots this slot approach about 40% of the time, especially if I know that a less experienced designer will be working with my files later on. I think detaching is okay-ish as long as there are sub components (modal header/footer)

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

    super useful! great as always, thanks.

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

      thank you :)

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

    UPDATE: this is now available as a plugin in Figma :) www.figma.com/community/plugin/1381403283977874287/code-syntax-editor

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

    Классное видео! Здорово объясняешь! Ты молодец :)

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

      ❤️ спасибо)

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

    This is something that I wouldn't know if I haven't randomly found your video. Thank you!

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

      yeah it’s much better to know about these things BEFORE they happen vs wasting time debugging later (speaking from experience :)

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

    ❤❤❤❤❤❤

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

    I tried it but it`s not responding after I click CREATE CALENDAR

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

      just confirming: are you using the playground file? couple other things to check: have the calendar frame selected + making sure the day frame is called “.calendar-day”

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

    Great video. Another thing that influences the look of the button/link is the line height of the text inside.

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

      thank you :) and great point!

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

    Thanks man. I was searching exactly this video (video on box-sizing) about 2,3 weeks earlier, but I didn't find any good explanation. It may be because I didn't know about box-sizing and I searched with random keywords. I also had the same issue as yours. I'm saving this to my playlist.😂😂

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

      thank you :) so happy it was helpful

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

    Hey Masha, thanks for this article. This is exactly what I was looking for. But it was hard to find as this is actually the only "date range picker" video I could find. And this is so much better than another calendar tutorial. Maybe you could put that in the title so it's easier to find.

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

      so glad it was helpful! and thank you for the suggestion, i added it to the title :)

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

    great content love it

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

      thank you :)