Design

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. Turn on Library

Start with Get a Copy match file template from File Structure and drag the file from draft to your folder in project file. Then open team library modals from tab assets, serach the [Tribe / Project Name] foundation & component spesific platform you need and switch the toogle to turn on both of library.

2. Create Screen

If you was activated library, then start with create screen / frame for spesific screen size platform or with shortcut Click [A], after that don't forget to used the grid style with match screen size from foundation in your frame.

3. Usage UI Kit Components

To start usage component from UI Kit, you can select ressource 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.

4. Usage UI Kit Foundation

After used the components, you can continue designing the screen with usage all properties brand from foundation (Logo, Colors, Typography, etc). And for consistency you can usage the Autolayout for section content with implement properties value from Spacer, Elevation & Radius.

5. Craft more Design Screen

Finished your design backlog with combine usage foundation, components library and Plugin Recomendation. But if you need annotation or GUI component you can activated Helpers Components Library, and for not available component you can contact Design Maintaner Team to create request componens. Or for common flow you can usage 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.

Template & Others Library

Our others Library & Template from legion design library you can activated if you’re was invited to legion figma project. make sure was invited to access file bellow.

Helper Components Library

All collection of all component outside main component in screen (for help design file or flow more informative) and components with have mandatory design from operating system or visual component GUI like (Browser, Cursor, CAPTCHA, Android or IOS Keyboard, etc).

Pattern Library

Collection assets of references for some common flows that are often encountered in various platform, you can access it from legion figma library or for sepsific case can access it from image in Pattern Page, for usage you just copy the pattern flow you needed and paste to your design file.

Pluggin Recomendation

Here are some pluggins that we recommend you use to simplify your workflow, task, accessibility cheking, and design quality

Color Shades : Palette editor / generator for easily create beautiful, harmonious and accessible palettes in no time.
Batch Styler : Need to change values of multiple (text and color) styles at once but don’t want to go through the process of changing each text style.
Adee Accessibility : Test color contrast, simulate 8 color blind simulations, test touch target sized to make sure they meet the various device standards.
Stark : 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.

Do you have feedback?

Please let us know to make it better

Send Feedback