Style Guide Generator - Pixelyo

About this plugin

Style Guide Generator is designed to simplify the creation of a comprehensive style guide for design projects in Figma. It allows you to generate a complete style guide that includes typography, color schemes, and effects in a structured and easy-to-use manner.

Key Features of the Plugin:

Design Type Selection:

You can select the type of design you are working on, either for web or mobile applications. This allows you to customize options based on project requirements.

Font Selection:

Includes a list of ready-made fonts for selection, with an additional option for manually entering a custom font if the desired one is not available.

Primary and Accent Colors:

Defines the main colors, such as brand colors, accent colors, neutral colors, and specific colors for error, warning, and success states.

Users can easily view and edit these colors through a user-friendly interface with both a color picker and a manual hex input.

Point System Control:

Choose a point system (e.g., 4-Point Grid) to set the sizing system, helping in organizing and structuring the user interface more efficiently.

Customization Based on Design Type:

If the design is for a web project & Mobile, additional options like base font size and font scale ratio are available. These options help in setting consistent typography across the interface.

Interactive Style Guide Generation:

Once the desired properties are selected, you can press the "Generate Style Guide" button to create the style guide instantly.

Intended Use:

This plugin is particularly useful for designers who want to create a consistent style guide quickly and easily. It helps you compile all design properties, such as text styles, colors, and layout configurations in one place, making it easier to document your work and maintain consistency across the project.

If you need any adjustments or further details, feel free to let me know!