Dribbble ui style guide

1. What is style guide UI?
2. What is the difference between a style guide and a design system?
3. What is style guide in Figma?

What is style guide UI?

UI Style Guides are a design and development tool that brings cohesion to a digital product's user interface and experience. At their core, they: Record all of the design elements and interactions that occur within a product. List crucial UI components such as buttons, typography, color, navigation menus, etc.

What is the difference between a style guide and a design system?

A style guide is a “subclass” in an overarching design system. It exists as a set of branding rules that guide how products should look and feel, details about typography, use cases for UI patterns, and more. It's the most accessible form of a set of design rules for a company.

What is style guide in Figma?

Your style guide should include typefaces, font sizes and font weights. Limit your design to 2-3 type faces in order for your design to look neat and professional. Remember to choose typefaces that complement each other.