- 209
- 36 347
Design with Mitch
United Kingdom
เข้าร่วมเมื่อ 18 ก.ค. 2016
Every Wednesday, I drop videos covering everything I'm passionate about, from UI design, UX design and hopefully some VLOGs/Photography in the future as well!
Design from Scratch Ep. 5: Sketching Ideas | #Figma #UIUX #DesignFromScratch #Sketching #Design
Image credit Pexels.com - Kévin Dorg
Website: designwithmitch.com
Video Chapters:
0:00 Intro
0:11 Project Overview Check-In
0:25 Finding Inspiration: Landing Page Top Section
1:31 Sketching the Top Section Layout
2:00 Finding Inspiration: Benefits & About Us Section
3:29 Sketching Benefits & About Us Section
4:54 Finding Inspiration: Courses Section
5:33 Sketching the Courses Section
6:52 Finding Inspiration: FAQs Section
7:33 Sketching the FAQs Section
8:13 Finding Inspiration: Reviews Section
8:48 Sketching the Reviews Section
10:29 Final Sketch: It Doesn’t need to be perfect
11:02 Refining the Sitemap
12:32 Sketch Review: Home/Landing Page
12:58 Sketch Review: About Page
13:36 Sketch Review: Course/Merchandise Page
14:24 Sketch Review: Contact Page
14:44 Sketch Review: Checkout Page
15:33 Project Check-in & next steps
16:33 Outro
Website: designwithmitch.com
Video Chapters:
0:00 Intro
0:11 Project Overview Check-In
0:25 Finding Inspiration: Landing Page Top Section
1:31 Sketching the Top Section Layout
2:00 Finding Inspiration: Benefits & About Us Section
3:29 Sketching Benefits & About Us Section
4:54 Finding Inspiration: Courses Section
5:33 Sketching the Courses Section
6:52 Finding Inspiration: FAQs Section
7:33 Sketching the FAQs Section
8:13 Finding Inspiration: Reviews Section
8:48 Sketching the Reviews Section
10:29 Final Sketch: It Doesn’t need to be perfect
11:02 Refining the Sitemap
12:32 Sketch Review: Home/Landing Page
12:58 Sketch Review: About Page
13:36 Sketch Review: Course/Merchandise Page
14:24 Sketch Review: Contact Page
14:44 Sketch Review: Checkout Page
15:33 Project Check-in & next steps
16:33 Outro
มุมมอง: 52
วีดีโอ
Design from Scratch Ep. 4: Moodboard analysis | #Figma #UIUX #DesignFromScratch #Design #moodboard
มุมมอง 87วันที่ผ่านมา
Image credit Pexels.com - Kévin Dorg Website: designwithmitch.com Video Chapters: 0:00 Intro 0:18 Jumping back into our project to revisit the moodboard. 1:24 Organising our moodboard by creating subcategories. 4:26 Check-in - Reviewing our progress so far. 6:43 Applying subcategories to the remaining sections. 10:16 Final review 12:40 What’s coming in the next video. 13:00 Outro
Design from Scratch Ep. 3: Creating a Moodboard | #Figma #UIUX #DesignFromScratch #Moodboard #Design
มุมมอง 25714 วันที่ผ่านมา
Image credit Pexels.com - Kévin Dorg Website: designwithmitch.com Video Chapters: 0:00 Intro. 0:12 Let’s dive back into our project file and start building a moodboard. 1:14 Let’s browse Behance to see what’s trending in landing page design. 3:59 Check-in: Let’s pause to see what we’ve gathered. 4:59 Time to head over to Pinterest to discover more unique ideas for our project. 6:19 Let’s explor...
Design from Scratch Ep. 2: Research Phase | #Figma #UIUX #DesignFromScratch #ProjectResearch #Design
มุมมอง 8821 วันที่ผ่านมา
Image credit Pexels.com - Kévin Dorg Website: designwithmitch.com
Design from Scratch Ep. 1: The Project Brief | #Figma #UIUX #DesignFromScratch #ProjectBrief #Design
มุมมอง 44หลายเดือนก่อน
Image credit Pexels.com - Kévin Dorg Website: designwithmitch.com
Figma setting a custom nudge amount #figma #nudge #custom #efficiency
มุมมอง 32หลายเดือนก่อน
Image credit Pexels.com - Zaksheuskaya Website: designwithmitch.com
Rotate & duplicate feature Figma #figma #rotate #duplicate #feature
มุมมอง 82หลายเดือนก่อน
*REVIEW* Image credit Pexels.com - Patrick Nizan Website: designwithmitch.com
How to skew things in Figma | Frames, shapes, text #figma #Skew #frames #shapes #text
มุมมอง 196หลายเดือนก่อน
Image credit Pexels.com - Curioso Photography Website: designwithmitch.com
Figma editable text measurements #editable #text #measurements #devmode #figma
มุมมอง 22หลายเดือนก่อน
Image credit Pexels.com - Anni Roenkae Website: designwithmitch.com
Figma export image quality settings (JPG/PDF) #figma #export #settings #quality
มุมมอง 952 หลายเดือนก่อน
Image credit Pexels.com - Anni Roenkae Website: designwithmitch.com
Create a refresh icon in Figma #create #refresh #icon #figma
มุมมอง 402 หลายเดือนก่อน
Image credit Pexels.com - Johannes Plenio Website: designwithmitch.com
Make prototypes more interactive #figma #plugins #variables #prototype
มุมมอง 472 หลายเดือนก่อน
Image credit Pexels.com - Luis Quintero Website: designwithmitch.com
This tip WILL make your life easier in Figma! #figma #hacks #tags
มุมมอง 412 หลายเดือนก่อน
Image credit Pexels.com - cottonbro studio Website: designwithmitch.com
Figma plugin - Auto documentation #figma #plugins #documentation
มุมมอง 1743 หลายเดือนก่อน
Image credit Pexels.com - Pixabay Website: designwithmitch.com
Create a palette quickly from an image #figma #plugins #image #palette
มุมมอง 713 หลายเดือนก่อน
Create a palette quickly from an image using this Figma plugin. Image credit Pexels.com - Deeana Arts Website: designwithmitch.com
Animations for prototypes - Figma plugin LottieFiles #animation #prototype #figma #plugins
มุมมอง 1723 หลายเดือนก่อน
Animations for prototypes - Figma plugin LottieFiles #animation #prototype #figma #plugins
10 Typography rules to follow #typography #rules
มุมมอง 103 หลายเดือนก่อน
10 Typography rules to follow #typography #rules
PenPot the free design tool (like Figma but free) #penpot #free #design #tools #figma
มุมมอง 1654 หลายเดือนก่อน
PenPot the free design tool (like Figma but free) #penpot #free #design #tools #figma
PhotoPea just like Photoshop! #figmaplugin #figma #plugins #photoshop
มุมมอง 1414 หลายเดือนก่อน
PhotoPea just like Photoshop! #figmaplugin #figma #plugins #photoshop
UI faces #ui #faces #avatars #figma #plugins
มุมมอง 324 หลายเดือนก่อน
UI faces #ui #faces #avatars #figma #plugins
The new beta UI3 Figma #figma #ui3 #beta
มุมมอง 1314 หลายเดือนก่อน
The new beta UI3 Figma #figma #ui3 #beta
PRD template FigJam #prd #document #template #figjam #figma
มุมมอง 494 หลายเดือนก่อน
PRD template FigJam #prd #document #template #figjam #figma
Figma shadows plugin #figma #shadow #plugins
มุมมอง 1125 หลายเดือนก่อน
Figma shadows plugin #figma #shadow #plugins
Figma updates June 2024 #figma #updates #june #2024
มุมมอง 715 หลายเดือนก่อน
Figma updates June 2024 #figma #updates #june #2024
Garage overhaul & storage improvements #diy #organise #budget #storage #garage #overhaul #timelapse
มุมมอง 825 หลายเดือนก่อน
Garage overhaul & storage improvements #diy #organise #budget #storage #garage #overhaul #timelapse
Organise your Figma pages #organise #figma #pages
มุมมอง 1275 หลายเดือนก่อน
Organise your Figma pages #organise #figma #pages
5 Whys #5 #whys #problemsolving #process
มุมมอง 66 หลายเดือนก่อน
5 Whys #5 #whys #problemsolving #process
Figma - Color styles to variables #figma #colour #styles #variables
มุมมอง 2396 หลายเดือนก่อน
Figma - Color styles to variables #figma #colour #styles #variables
Material design - component states #figma #components #states #material #design #designsystems
มุมมอง 516 หลายเดือนก่อน
Material design - component states #figma #components #states #material #design #designsystems
I really loved that take us through each step you do in your process, cant wait for the next video!!
Thanks! More videos coming soon!
Hello, I'm watching your videos of design from scratch and your doing a great job, keep going!
Glad you like them!
Great video, any links to the template in Figma?
Link is here 👍 www.figma.com/community/file/1108838632250762265/prd-product-requirement-doc
Thanks Its Works
@@AshNew2-v1m nice 👍
hey man, my text box locked after using this plugin. do you know solution?? I am not able to edit and write new texts in figma
Hey, thanks for the comment 👍 Very strange, tested my side and the plugin is still working for me. I am using the Figma desktop app, are you? I see some of the comments on the plugins page are saying a similar thing www.figma.com/community/plugin/739825414752646970/typescales
@@DesignwithMitch Thank you for your reply man. This morning I again checked, and it again working like previous. I think it happend due to bug...I think
@@aj-lan284 Hopefully the bugs 🐞🐛 get fixed soon
why dont you build your own moodboard so we can understand and see your struggling to create a moodboard
Hey 👋 Thanks for your feedback! Could you clarify what you'd like to see more of? Are you looking for a step-by-step breakdown of the moodboard process, specific tools I used, or something else? Let me know what would be most helpful, and I'll try to incorporate it in future content!
How you can do decent usability testing without audio, video or screen interaction recording is beyond me. This is just a tool to analyse text. Text you have to type in yourself.
Hey thanks for the comment 👍 This is a qualitative research tool, something you could use during/after to analyse observations. Optimal workshops tools have recently had a rebrand/refresh. Probably worth checking out the website for all the updates: www.optimalworkshop.com/blog
Awesome!!
Thanks!
I saw your TH-cam channel. Your videos are really awesome. One this time that surprised me is that your views are very less than your subscribers. This is because your videos are not SEO friendly. so you are not getting more views on your videos. SEO of your channel will increase channel growth, channel views will increase, subscribers will increase. Can I contact you to discuss this further..?.
This is not free anymore, can you show a free to use one?
Hey 👋 Thanks for your comment! Unfortunately I don't manage this plugin, so I can't control the changes. I'll look into alternatives and hope to share them in a future video.
Thanks for the video!
You're welcome!
i don`t know how someone amazing like you not popular i really like ur old videos and now i`m study from that
Flex layout, CSS grid, components and more...🎉
Penpot 🔥🔥🔥
Great video. It was very straightforward and informative 🎉
Glad you enjoyed it!
Literally exactly what I was hoping to see!! Thank you SO much, I have a massive webpage designed on figma and manually clicking through dozens and dozens of containers all day long was driving me insane 😅
Nice! Glad this helps 👍
I was searching for figma local colors edit it is now dissappeard from the front and your video helped me to edit my saved local colors :D
Thanks for the comment. Glad it helped!
Do you know any plugins that will show the design token name rather than the pixel value?
This was really helpful. Thank you!
Glad it helped 👍
Aye take it the the council tip laad and get a real bike
Cool video for a cool camera.
Very useful video. I knew some of this but great to get the comprehensive coverage. FWIW, I came here because I forgot the keyboard shortcut for moving a layer up and down in the list which wasn't covered so perhaps another video.
Thanks for the comment! Yes, that would have been a good one to include 👍 On a Mac moving an item up and down in the layers panel: Up = CMD + [ Down = CMD + ]
Does this need switching on, I don't see this on any component 😶
Hey 👋Check out this video I released Sunday "New Figma features - Multi edit" Link: th-cam.com/video/xjfCmJtcXZk/w-d-xo.htmlsi=tcSGZo5XtS-jU-QK Probably best to watch the whole video or skip to 5:56 for multi edit text. Let me know if this works for you 👍
Nice one. Thanks 👍
Sir... keep continuing you explain such a great, make tutorial i learn alot from you!
Thanks
Great sir
Thanks alot
No problem thanks for watching 👍
@DesignwithMitch Hello sir, can I have your email address because there is one circle type of design on a landing page so I want to send you that can you design it on figma?
Hey 👋 I don’t have an email to give out at the moment. Feel free to add some information in the comments on the designs thanks 👍
Figma balls
Thanks, very helpful!
Thanks for this 😊
No problem! Thanks for the comment! 👍
Great share. Is your button built from a label with autolayout added? Or is it made from a separate label and icon pluss shape. The variation in space varies between typefaces ever so slightly, but even if I have zero line-height the space variation you demonstrate is there. This has been an nuance from day one and I've always wondered about it. The difference is 6px on average for the typefaces I've tried and it's always on topside of the text box, never underneath for the baseline. Vertical trim will be called leading-trim in CSS from what I can see, so dunno why Figma has chosen another non compliant name for it. Let's hope it get's accepted in the markup standard some day, or else it's just gonna be a Figma thing. There's heaps of interesting stuff happening in CSS with type these days, variable fonts is now supported. developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide
Thanks for commenting. Yes the button is built with autolayout applied 👍. Thanks for the useful link 🙏
I use this almost everytime.
Nice!
This feature is great, but as I heard from the coder, I shouldn't use it because it complicates the coders' work, and the CSS is not prepared for it... I'm doing research, but maybe you have a ready-made solution?
Thanks for the comment. There is a related Figma thread here that could be of use to you: forum.figma.com/t/vertical-trim-is-nice-but-without-css-support-its-kind-of-useless-what-am-i-missing/41605
Still unusable / in very early development in css for layout designer or frontend dev
Amazing resource helpful, good explanation 👌🙏
People be asking: what is Figma? 😂
Let’s hope Figma stays Figma
Hello there! It seems that you have good content but the volume is very low. If you can fix that you will retain your audience.
Hey 👋 Thanks for the feedback 👍 it’s something I am aware of and should be fixed soon. Thanks again 😀
Hey just want to say that your videos are really useful for me as I practice my design skills. Keep up the good work!
Glad you like them!
This channel is lowkey a gem
Thanks Mitch
Any time!
In my preview the page wont scroll up/down? Please help!
Hey! Hard to say when I am unable to see the design. Make sure you have applied 'fixed position when scrolling' to the correct elements and check your design is long enough to scroll. Hope this helps :-)
@@DesignwithMitch I kinda love you and hate you at the same time. I've been searching all over trying to figure out how to scroll in Sketch prototyping and this video gave me the answer half way... Not the clearest explanation BUT now I get it. Figured it out :-)