Guideline

How to use legion in design project

Usage Library

Legion design Library are separated in multiple project, the first step is you can make sure was invited to you project file from Request Form, then chek the available library for used from table of list library or the project you assigned. And this is step to select and used the design library before you started to designing.

1. Create Screen

Once the library is activated, start by creating a screen/frame for the specific platform screen size or by using the shortcut Click [A]. After that, don't forget to apply the grid style that matches the screen size from the variables in your frame.

2. Usage UI Kit Components

To start usage component from UI Kit, you can select resource menu and find components or from assets tab, then usage your component needed with drag and drop component to your screen, and don't miss it to view guideline component usage in [Components Page](/components/overview)

3. Usage UI Variables

After utilizing the components, proceed with designing the screen by applying all branding properties from variables (such as Logo, Colors, Typography, etc). For consistency, ensure to use Autolayout for section content and implements values from variables like Spacing, Elevation, and Radius.

4. Craft more Design Screen

Finished your design backlog with combined usage foundation, components library and [Recommended Plugin Recommendations](#recommended-figma-plugins). But if you need annotation or GUI component you can activate Helpers Components Library, and for not available component you can contact Design Maintainer Team to create request components. Or for common flow you can use Pattern Library.

Create new Library: If your tribe / squad assigned not available design library, you can create and publish your tribe / squad theme in Following Steps with usage Legion UI Library - Internal. For website platform if you want to create themes for development you can contact core team for assess your foundation before register to legion multi theme.

Recommended Figma Plugins

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

Legion Tokens Manager: A tool to manage design tokens like colors and fonts, ensuring consistency across projects.
Color Shades: A tool to createa and adjust color shades for a consistent and harmonious design.
Local Print: A feature to quickly print design assets for reviews or presentations.
Adee Comprehensive Accessibility Tool: Test color contrast, simulate 8 color blind simulations, and test touch target sizes to ensure they meet the various device standards.
Stark - Contrast & Accessibility Tools: Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more, all in one place.
Ditto: Single source of truth for everyone touching copy, from writers to designers to engineers.