- Видео 70
- Просмотров 149 635
masha
США
Добавлен 21 авг 2022
merging code and design one tutorial at a time.
~
this channel is for designers who:
→ want to make lean and elegant components in figma
→ want to understand component architecture from a developer point of view
→ want to learn or get more experience with html/css
this channel is also for developers who:
→ want to learn figma
→ want to dive deeper into visual design
→ want to learn ux principles
~
questions or suggestions? Send me a note mash at hey dot com
happy to have you here :)
~
this channel is for designers who:
→ want to make lean and elegant components in figma
→ want to understand component architecture from a developer point of view
→ want to learn or get more experience with html/css
this channel is also for developers who:
→ want to learn figma
→ want to dive deeper into visual design
→ want to learn ux principles
~
questions or suggestions? Send me a note mash at hey dot com
happy to have you here :)
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
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
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
Creating a responsive component with boolean variables / Figma
Просмотров 13 тыс.Год назад
Creating a responsive component with boolean variables / Figma
A faster way to apply Figma's variables
Просмотров 1,9 тыс.Год назад
A faster way to apply Figma's variables
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! :)
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)
hi! yeah i haven’t applied this to prototyping, totally agree it could get more messy
What a hack - but it works! Thank you so much
thank you! :) i was surprised too haha
This is exactly what I'm looking for! Thank you.
awesome! 🙌
Nice, great tutorial info.. thankyou so much Masha.
thank you :)
I love it!!!
❤️❤️❤️
I love it❤❤❤ ..thanks alot , please make more videos about css
thank you ❤ lmk if there's anything specific about css that you'd like :)
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)
Очень полезное видео! Поделилась с коллегами. Они тоже в восторге :) Спасибо большое, Маша!
спасибо вам!! :) очень рада что видео оказалось полезным)
❤ Thank you.
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!
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)
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.
amazing, happy this helped!
This is really what I've been looking for. Thank you 💙
thank you :)
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 :(((
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
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 🥺
fantastic niche tool. great idea
thank you :)
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.
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)
tq. for this. vdeo big fan
thank you very much :)
@@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. :)
@@saileshshiwakoti2160 that’s so cool, thank you for sharing that with me :)
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.
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)
super useful! great as always, thanks.
thank you :)
UPDATE: this is now available as a plugin in Figma :) www.figma.com/community/plugin/1381403283977874287/code-syntax-editor
Классное видео! Здорово объясняешь! Ты молодец :)
❤️ спасибо)
This is something that I wouldn't know if I haven't randomly found your video. Thank you!
yeah it’s much better to know about these things BEFORE they happen vs wasting time debugging later (speaking from experience :)
❤❤❤❤❤❤
I tried it but it`s not responding after I click CREATE CALENDAR
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”
Great video. Another thing that influences the look of the button/link is the line height of the text inside.
thank you :) and great point!
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.😂😂
thank you :) so happy it was helpful
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.
so glad it was helpful! and thank you for the suggestion, i added it to the title :)
great content love it
thank you :)