Guideline

Legion design Libraries are separated into multiple projects. The first step, make sure you were invited to project file from the Request Form, then check the available library for use in the table of list library or the project you assigned, and select the design library before you start designing.

This section will guide you to begin by creating your brand or product logo as the first step in establishing your identity, followed by defining primary, secondary, tertiary, and accent colors. This ensures a cohesive visual identity across all brand touchpoint.

Bein by importing your logo into Figma. This logo will represent your brand’s identity, so it’s important to have it ready for customization. By importing it into Figma, you can make adjustments that help align it with your overall vision for the brand.

Use a plugin like Color Shades to create a color palette for your brand. A color palette is a collection of colors that will be used across your designs. You can customize the colors that the plugin generates by changing the labels or adjusting the shades. This step helps you define the main colors that represent your brand’s look and feel.

Understand the difference between primary and secondary colors within your color palette. Primary colors serve as the fundamental building blocks, while secondary colors add depth and dimension to your palette.

Dive into tertiary and accent colors to enrich your palette. Tertiary colors introduce subtle variations, enhancing the depth and complexity of your design. Accent colors, on the other hand, highlight key elements, drawing attention to essential aspects of your product design.

Once you have your color palette ready, the next step is to save these colors as local variables in Figma. Local variables help you keep track of your colors and make sure you use them consistently across your design. By setting them as variables, you also make it easier to update or change the colors in the future without needing to edit each desig nelement individually.

This section meticulously defines the appropriate font families and types to ensure a cohesive visual identity across all brand touchpoint. By selecting the right typography, including font families and types, we empower your brand to communicate effectively and leave a lasting impression on your audience.

Start by using the components provided by Legion V3. You can easily customize these components to meet your needs by using available assets and adjusting the local variables.

Using Legion V3, you can easily adjust key typography elements like font size, weight, and line height. These changes are instantly applied to the components, ensuring everything updates automatically and stays visually consistent.

Legion V3 provides flexibility to continuously refine your typography by adjusting variables. If custom text styles are already provided by the base variables in Legion, which follow UI principles, customization becomes even easier. This helps you keep your design consistent across platforms and easily adapt to new branding or design needs.

In this section we establish a unified icon system and illustration style that seamlessly aligns with your brand identity. By defining icons and illustrations that reflect your brand’s personality and values, we ensure consistency and impactful visual communication across all channels.

Start by using the components provided by Legion V3. You can easily customize these components to meet your needs by using available assets and adjusting the local variables.

Access the local variables in Legion V3 t ochange key elements like button icons. For example, modify the primary color through settings like solidDefaultLabel to match your design requirements.

You can quickly update and adjust the icons using Legion’s built-in library. Legion V3 allows you to change icons automatically, ensuring consistency across all your components.

Keep your icons and illustrations consistent by following Legion’s system. Set guidelines for styles, colors, and sizes to ensure your brand visuals stay unified across all platforms.

This section finalizes the establishment of foundational elements, by ensuring all components are meticulously configured, your brand’s design system achieves cohesion and consistency across all aspects.

Design a customized thumbnail that effectively represents your content and captures viewers’ attention. Consider using compelling imagery, clear text, and vibrant colors to make your thumbnail stand out and entice clicks.

Check your content for accuracy, clarity, and consistency. Look for spelling and grammar mistakes, make sure all links work, and confirm that the thumbnail matches your content. When everything’s good to go, publish your content across platforms for your audience.

Some recommended plugins to simplify your workflow, task, accessibility checking, and design quality: