masha
masha
  • 71
  • 181 849
Create logic for selecting max items in Figma
learn how to disable other list items once the max is reached!
01:02 create and link prototype variables
02:15 add prototype interactions
05:40 can't stress this part enough
blank file: www.figma.com/design/mBqOREBIhTRqkwu5Quva6W/Example%3A-select-max-items-(worksheet)?node-id=0-1&node-type=canvas&t=VFyBSxfISMVqpJ8C-0
finished file: www.figma.com/community/file/1431367938963649660/prototyping-select-max-items
related vids
th-cam.com/video/yKpi4jkxE74/w-d-xo.htmlsi=ZrqHrtDmJ9azoeG9
th-cam.com/video/Z1xHiii-6Xg/w-d-xo.htmlsi=Acn6HMnZ5iy73SYY
th-cam.com/video/5XgiwDiiHyY/w-d-xo.htmlsi=1TX561IIfAXyz80h
#figma #prototyping
มุมมอง: 311

วีดีโอ

Improve your typography with these keyboard shortcuts
มุมมอง 2105 หลายเดือนก่อน
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/keyboar...
Set variable mode / Figma prototyping for beginners
มุมมอง 5915 หลายเดือนก่อน
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 th-cam.com/video/Z1xHiii-6Xg/w-d-xo.html th-cam.com/video/5XgiwDiiHyY/w-d-xo.html th-cam.com/video/OzJ9YH7Sqf8/w-d-xo.html th-cam.com/video/KvyJHhn_5FY/w-d-xo.html th-cam.com/video...
Conditional prototyping with variables in Figma
มุมมอง 1.8K6 หลายเดือนก่อน
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
มุมมอง 606 หลายเดือนก่อน
(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
มุมมอง 2.5K6 หลายเดือนก่อน
as of july 2024! #rive #animation
Add spaces to layer names in Figma
มุมมอง 2457 หลายเดือนก่อน
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
มุมมอง 4637 หลายเดือนก่อน
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.3K8 หลายเดือนก่อน
"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
มุมมอง 2918 หลายเดือนก่อน
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
มุมมอง 1.4K9 หลายเดือนก่อน
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
มุมมอง 4989 หลายเดือนก่อน
For your existing text styles. plugin: www.figma.com/community/plugin/1363237082311305172/variablize-text-styles related: th-cam.com/video/dcphKnvDHgM/w-d-xo.html #figma #designsystems #uidesign
Create a text review plugin in Figma
มุมมอง 31811 หลายเดือนก่อน
it’s like a spell check for your own copy guidelines. code: github.com/masha312/text-review-tutorial related tutorials: th-cam.com/video/pA4n712h1Vc/w-d-xo.htmlsi=7Hhp3LYi0P9ynRs9 th-cam.com/video/i1k6lLPC4LY/w-d-xo.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
มุมมอง 7Kปีที่แล้ว
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 - th-cam.com/video/YdpZcHHMvuY/w-d-xo.html intro to plugins in figma - th-cam.com/video/pA4n712h1Vc/w-d-xo.html 💌 newsletter - world.hey.com/mash #designsystems #figma #uidesign
Scroll animations with just CSS
มุมมอง 213ปีที่แล้ว
Scroll animations with just CSS
Recreating Stripe's button animation in CSS
มุมมอง 776ปีที่แล้ว
Recreating Stripe's button animation in CSS
How to add focus state to components / Figma
มุมมอง 3.7Kปีที่แล้ว
How to add focus state to components / Figma
Collapsible side navigation bar in Figma
มุมมอง 1.8Kปีที่แล้ว
Collapsible side navigation bar in Figma
Design System best practices / Figma
มุมมอง 1.2Kปีที่แล้ว
Design System best practices / Figma
Turn layer fills into color variables / Figma
มุมมอง 1Kปีที่แล้ว
Turn layer fills into color variables / Figma
Add colors, radii, and spacer presets to your Figma file
มุมมอง 743ปีที่แล้ว
Add colors, radii, and spacer presets to your Figma file
Dynamic prototyping with variables / Figma tutorial
มุมมอง 2.1Kปีที่แล้ว
Dynamic prototyping with variables / Figma tutorial
How to track workouts (or anything else) in Notion
มุมมอง 188ปีที่แล้ว
How to track workouts (or anything else) in Notion
Light/dark mode and theming with variables in Figma
มุมมอง 2.7Kปีที่แล้ว
Light/dark mode and theming with variables in Figma
How to instantly add code syntax to variables / Figma
มุมมอง 2Kปีที่แล้ว
How to instantly add code syntax to variables / Figma
Sweetgreen / Mobile app design in Figma
มุมมอง 368ปีที่แล้ว
Sweetgreen / Mobile app design in Figma
Fixed and sticky scroll / Prototyping in Figma for beginners
มุมมอง 4.6Kปีที่แล้ว
Fixed and sticky scroll / Prototyping in Figma for beginners
5 books for (design) system thinkers
มุมมอง 251ปีที่แล้ว
5 books for (design) system thinkers
Creating a responsive component with boolean variables / Figma
มุมมอง 14Kปีที่แล้ว
Creating a responsive component with boolean variables / Figma
Intro to making plugins in Figma
มุมมอง 337ปีที่แล้ว
Intro to making plugins in Figma

ความคิดเห็น

  • @justmalhar
    @justmalhar 13 วันที่ผ่านมา

    Great video! I appreciate this

  • @HASSSADEGHI-q2t
    @HASSSADEGHI-q2t 24 วันที่ผ่านมา

    good

  • @jerry_pham
    @jerry_pham 27 วันที่ผ่านมา

    Ive watched all videos in this awesome playlist, thank u so much ❤

    • @mash312
      @mash312 23 วันที่ผ่านมา

      💓 thank you for all your kind comments!!! so happy that these were useful.

  • @jerry_pham
    @jerry_pham 27 วันที่ผ่านมา

    super easy to understand, tysm!

  • @jerry_pham
    @jerry_pham 27 วันที่ผ่านมา

    thank you Masha, your videos are very informative

  • @jerry_pham
    @jerry_pham 28 วันที่ผ่านมา

    Im totally in love with this series, tysm Masha

  • @jerry_pham
    @jerry_pham 28 วันที่ผ่านมา

    great video! thank u so much for this

  • @jerry_pham
    @jerry_pham 28 วันที่ผ่านมา

    thank you so much for this video, helped me a lot

    • @mash312
      @mash312 23 วันที่ผ่านมา

      happy it was helpful and thank you :)

  • @brunoIsmyname
    @brunoIsmyname 28 วันที่ผ่านมา

    I watched another guy talking about this same exemple of add/remove items from cart, but you've made it more simple and straight to the point imo. Thank you for your content!

    • @mash312
      @mash312 23 วันที่ผ่านมา

      glad it was helpful, thank you :)

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

    Great tutorial! Thanks for sharing!

    • @mash312
      @mash312 29 วันที่ผ่านมา

      thank you!!

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

    Does this work with icons where, the selected state uses filled icons and the non-selected state uses the line ones!! Would love get some inputs here! Thank you for the video though 🙌

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

      yes, you could create a variant for each icon individually (it's one extra step but it's definitely possible)! and thank you :)

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

    Thank you so much 😭😭😭😭

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

      you’re welcome! 🙏

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

    mashing it up like a boss masha! thanks for building this soooo well thought out and saved me so much time 🙌

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

      thank you ☺️

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

    do you have any tips on getting rid of extra weeks? when i try to delete the 6th weeks for months that dont need it, the layer just becomes hidden. it's messing with my spacing for vertical layout.

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

      you can detach the component and delete the extra weeks for good :)

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

      @ hm I think I tried detaching the component but the overall group would still include space for the extra week, even if it’s deleted

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

      @ ahh I see, you might need to set “hug contents” or change the layout alignment

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

    pretty straight forward <3

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

      thank you :)

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

      @@mash312 keep going

  • @NathanVanHaver-y9t
    @NathanVanHaver-y9t 2 หลายเดือนก่อน

    Hi thanks for the great tutorial! I have just one question: when clicking the accordion, the icon now flips up and downwards. In my accordion, I have a an arrow within a circle which I want to rotate by 180° instead of just flipping it upside down. Any suggestion on how I can make this work?

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

    Hi, did you try the new Figma component property 2024? It is so confusing if you want to build base components. Text property is showing only with "hovering" and Layer panels is now Appearance . Why Figma complicate so much???

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

      hi! I have and it did take me a bit to get used to the new ui 😅 maybe it’s time to re-record some of these videos

  • @AlexSchwartz-ec4px
    @AlexSchwartz-ec4px 2 หลายเดือนก่อน

    This was very clear and to the point. Thank you Masha

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

      glad it helped, thank you :)

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

    That plugin is absolute gold 🏆😎🏆

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

      thank you :)

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

    lovely, thanks for your help

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

      of course and thank you! :)

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

    Exactly what I needed. Thank you

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

      glad it helped, thank you :)

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

    If we directly add tail to the bubble without the stroke and create a union selection and then add a auto layout, will that work?

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

      if you don't need the stroke, then yeah, adding absolute positioning + setting proper constraints (left / bottom) should work

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

    Hi, at 4:14, where you are showing how to add tail without the stroke bubble, so I tried doing that, but in that auto layout is not working, as in the tail part is not coming down as it should :(

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

      Gotta set the width to fill container

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

      hi! in that example i'm just using the absolute positioning for the tail

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

    I was about to give up on this tool because all of them want to charge me to export my own creations. What other motion graphics software do you recommend that is free or open source? Thanks for the video!

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

      if you have some coding experience (or want to learn), Processing is a great tool! it’s definitely not a 1:1 Rive replacement but could be quite useful, depending on your use case. Tim Rodebröker has a lot of inspiring tutorials: timrodenbroeker.de And thank you :)

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

    Do you like the new Figma's UI design

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

      i do! it did take me a bit to get used to where things are in the properties panel though (tbh, i also liked the floating panels :)

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

    Thanks a lot for the help with this Masha! I'm happy that we were able to figure it out and even create some content from it.

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

    huge shout out to Gui (www.figma.com/@guigadourado) for sharing this problem 🙏

  • @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 3 หลายเดือนก่อน

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

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

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

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

      thank you! :)

  • @CHANDRASEKHARPUPPALA-b9z
    @CHANDRASEKHARPUPPALA-b9z 3 หลายเดือนก่อน

    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 3 หลายเดือนก่อน

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

  • @CHANDRASEKHARPUPPALA-b9z
    @CHANDRASEKHARPUPPALA-b9z 3 หลายเดือนก่อน

    Excellent demonstration. Very informative and easy to understand 👍

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

      thank you :)

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

    Now imagine a "Depeche Modal" component...

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

      that would be my favorite component!

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

    Thank you, great video!!!

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

      thank you :)

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

    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 4 หลายเดือนก่อน

      happy it worked in the end, thank you :)

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

    great help thanks

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

      thank you :)

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

    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 4 หลายเดือนก่อน

      amazing! thank you :)

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

    Thanks for your help!!!!

  • @HemanthKumar-vh3sy
    @HemanthKumar-vh3sy 4 หลายเดือนก่อน

    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 4 หลายเดือนก่อน

      hopefully it’ll get ironed out in the future 🙏

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

    hey thanks for your concise and precise explanation 👏❤

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

      thank you :)

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

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

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

      thank you so much! :)

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

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

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

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

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

    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 5 หลายเดือนก่อน

      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 5 หลายเดือนก่อน

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

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

      thank you! :) cheers from Providence

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

    The subtle changes are super helpful, thank you!

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

      thank you Leland! love your username btw

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

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

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

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

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

    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 5 หลายเดือนก่อน

      emailed you! 👀

  • @hackur-g
    @hackur-g 5 หลายเดือนก่อน

    Thank you

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

    Great video. Thanks

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

    Variable starter plugin ❤

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

    Thank you! This is a great tutorial!

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

      thank you! :)