- 71
- 181 849
masha
United States
เข้าร่วมเมื่อ 21 ส.ค. 2022
☆ code + design ☆
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
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
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
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
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
Fixed and sticky scroll / Prototyping in Figma for beginners
มุมมอง 4.6Kปีที่แล้ว
Fixed and sticky scroll / Prototyping in Figma for beginners
Creating a responsive component with boolean variables / Figma
มุมมอง 14Kปีที่แล้ว
Creating a responsive component with boolean variables / Figma
Great video! I appreciate this
good
Ive watched all videos in this awesome playlist, thank u so much ❤
💓 thank you for all your kind comments!!! so happy that these were useful.
super easy to understand, tysm!
thank you Masha, your videos are very informative
Im totally in love with this series, tysm Masha
great video! thank u so much for this
thank you so much for this video, helped me a lot
happy it was helpful and thank you :)
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!
glad it was helpful, thank you :)
Great tutorial! Thanks for sharing!
thank you!!
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 🙌
yes, you could create a variant for each icon individually (it's one extra step but it's definitely possible)! and thank you :)
Thank you so much 😭😭😭😭
you’re welcome! 🙏
mashing it up like a boss masha! thanks for building this soooo well thought out and saved me so much time 🙌
thank you ☺️
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.
you can detach the component and delete the extra weeks for good :)
@ 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
@ ahh I see, you might need to set “hug contents” or change the layout alignment
pretty straight forward <3
thank you :)
@@mash312 keep going
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?
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???
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
This was very clear and to the point. Thank you Masha
glad it helped, thank you :)
That plugin is absolute gold 🏆😎🏆
thank you :)
lovely, thanks for your help
of course and thank you! :)
Exactly what I needed. Thank you
glad it helped, thank you :)
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?
if you don't need the stroke, then yeah, adding absolute positioning + setting proper constraints (left / bottom) should work
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 :(
Gotta set the width to fill container
hi! in that example i'm just using the absolute positioning for the tail
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!
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 :)
Do you like the new Figma's UI design
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 :)
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.
huge shout out to Gui (www.figma.com/@guigadourado) for sharing this problem 🙏
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 🙌🏼
“no coloured lights and time-wasting fanfare” is my goal! thank you :)
Thank you for an excellent, clear, and practical video.
thank you! :)
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!
that’s very kind, thanks so much :) happy it’s helpful.
Excellent demonstration. Very informative and easy to understand 👍
thank you :)
Now imagine a "Depeche Modal" component...
that would be my favorite component!
Thank you, great video!!!
thank you :)
I had the same problem - didn't work because of the missing font. Otherwise great plugin that helped me a lot Thanks, Masha!
happy it worked in the end, thank you :)
great help thanks
thank you :)
Thanks for breaking down conditionals! I couldn't wrap my head around when to use logic and you laid it out so easily.
amazing! thank you :)
Thanks for your help!!!!
I miss the "Preserve Scroll" Feature. Auto preserve scroll doesn't work well with large number of layers and with minor differences between frames
hopefully it’ll get ironed out in the future 🙏
hey thanks for your concise and precise explanation 👏❤
thank you :)
Thank you, Masha! I think this is a great approach! I appreciate your time and sharing this with us!
thank you so much! :)
Thanks for this super helpful video! You describe the steps very well, keep up the good work and making our lives easier :')
thank you so much! happy it's helpful :)
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 :)
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! :)
very useful, it helped me a lot to practice :) greetings from argentina
thank you! :) cheers from Providence
The subtle changes are super helpful, thank you!
thank you Leland! love your username btw
why you use percentages (150%) for line height value?
Percentages are more manageable (for example, if font size changes, you don’t have to worry about updating the line height)
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.
emailed you! 👀
Thank you
Great video. Thanks
Variable starter plugin ❤
Thank you! This is a great tutorial!
thank you! :)