Not how as in how to use figma, but how as in how to create a neat looking, easy to understand UI.
Whether if it’s manually drawn, made in figma or written in code, how do I make things look good?
These tips seem good too: https://lobau.io/design-tips/
A lot of UI design is about spacing elements properly and consistently. Humans subconsciously notice when spacing is off. This video does a decent job showing examples: https://youtube.com/watch?v=9ElrcTtAxzA
Here's a good tool for making spacing and sizing scales in CSS: https://utopia.fyi/
https://every-layout.dev/ will show you the right CSS for common web layouts. They have a few free examples.
Try practicing by coding some single page HTML/CSS experiments, or sketching some wireframes, or redesigning someone else's webpage.
Use color palette generators unless you want to study color theory.
Use other people's design systems if you want to ship something instead of just practice. Material Design, Pico CSS, component libraries, whatever looks good with minimal fuss.
Example 1: Google has "Material Design". Here are some key resources:
1. Material Design Components (MDC):
- For Android: MDC-Android
- For iOS: MDC-iOS
- For Web: MDC-Web
2. Material Design for Flutter: A set of widgets implementing Material Design for Flutter apps.
3. Material-UI (MUI): While not created by Google, it's a popular React library that implements Material Design.
4. Material Theme Editor: A tool for creating and customizing Material themes.
5. Material Icons: Official Material Design icons.
6. Material Design Guidelines: Comprehensive documentation on implementing Material Design.
You can find these resources and more on the official Material Design website (material.io) or Google's developer documentation.
Example 2: Microsoft has "Fluent 2". Google it.
Example 3: The UK Government has the "GOV.UK Design System". See https://design-system.service.gov.uk/
Example 4: Adobe's official design system is called "Adobe Spectrum." Google it.