[Figma] Dark Theme UI Tutorial
HTML-код
- Опубликовано: 12 июн 2024
- Email: jpdesignacademy@gmail.com
In this video, I share how I approach designing dark themed UI's that can scale. For the most part I usually adhere to Google's Material design guidelines for dark theme. In this video, I am using Figma, but these principles can be applied in any design tool. I hope you find these tips valuable!
Material Design Dark Theme Guidelines: material.io/design/color/dark...
Mapbox: studio.mapbox.com/ 
Хобби
I was expecting some boring figma timelapse. man, I just learned a lot just from this one video. Thank you for explaining all the details. Your explanation is interesting and easy to understand. Hoping more Tutorial videos❤
This video and your channel, in general, is hands down one of the better resources I've found to learn about design. You explain the details that most others neglect. Cheers!
Thank you for the kind words! I’m glad you find the videos helpful - sometimes I wonder if I’m spending TOO much time talking about the details haha
Hey everyone! I hope you enjoyed this video and learned a few things...here are some timestamps for your convenience:
0:45 Finding inspiration
5:30 Google's Material Design guidelines for dark UI's
8:20 Wireframe
11:45 High-fidelity design
Very nice tutorial... I love it, thanks for sharing
Hey, Jake Thanks a lot this tutorial was really helpful
This video is just perfect! It helped me a lot throughout my case study, thanks a lot!
I loved your documentation proccess. That' will help me to get things organized while designing. Thanks for the inspiration :)
Glad to hear it man!! Hope it helps your work flow
Really great vid! Learned a lot of interesting tips
Insightful tutorial
Thanks! Very helpful!
Просто Даниил you’re welcome, glad you found it helpful!
Amazing video!!! Congratulation, your channel rocks!!!
Henrique Portela thank you!
You, sir, got a sub!
🙌 appreciate it
Amazing video - would love a video on your workflow in general as well as a video on how to create good design design documentation/style guide in Figma as shown in this video ! :)
Thank you!! Stay tuned for the design system series 🙌
The level of Information details is insane. Loved it. I have been looking for a video of a design system for a while that I can follow on my projects as well. Most interesting is the way you have picked out the colors. I have never known this way to choose a dark color scheme. Can you make a video on a "Non-Dark themed design system"? Also, can you share the screenshot of that asset panel/documentation? I would love to have a bit of detail about the naming scheme plus the hierarchy of those asset organization. Once again Great video.
Thanks for your kind words and video suggestions. I’ll add these to the list. Look out for the figma design system series, coming soon 🤟
Jake
I've said this before but you are so handsome. The fact that I'm also learning stuff is an added bonus.
Would starting with hex #121212 and then using the brand color to build out variations from there also be good to use for iOS?
Great stuff, nice research bro, really helps out.
Please brother, will you mind doing a video similiar to this one on light theme design?
Thank you, glad it was helpful! Good idea, will add it to the list!
Wonderful tutorial thanks for this. Quick question do you create your design system before designing your UI?
Thanks man! Usually I will design in high fidelity before documenting/systematizing my styles and treatments. Otherwise, I find that I limit my creativity. However it often will depend on the scenario...sometimes I need to map very closely to brand guidelines, and I need to use a predefined design system provided by a client. Typically, design systems will (and should) evolve as new pages/solutions are designed.
Thanks for your question!
Jake
I just got tasked with turning our Geolocation based website's dark UI to a light UI, and for some reason i'm struggling to work backwards. I literally don't know where to start.
You stole the atlassian logo lol
Ha yeah I made this video a while ago and just did a Google search for “logo” not realizing it was Atlassian’s 😂