Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Design

Guideline

How to use legion in design project

banner-Guideline

UI Kits Setup

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.

Connect your foundation

Begin by connecting your design foundation to start utilizing UI Kits in your product design. This section will guide you through the initial steps required to integrate design foundations with UI kits, ensuring that your product has a solid groundwork before proceeding further in design development.

1. Color Harmony for Foundation

The first step in integrating your design with the brand or product identity is by changing the colors on your foundation with the predefined color palette. By doing this, you can ensure that your design remains consistent with the brand image and product goals that have been established previously.

2. Typography Consistency with Foundation

After updating the colors, the next step is to rearrange the typography by adopting the predefined font styles for your brand or product. By using consistent typography, you can strengthen the brand identity and enhance the visual impression of your product.

3. Integrating Other Foundation Properties

In addition to colors and typography, don’t forget to implement other properties of your design foundation. These include properties such as size, padding, margin, and others that can ensure the alignment and consistency of your product design with the UI kits used.

4. Final Review and Publication

Before publishing, conduct a final check to ensure all elements adhere to established standards. Once confirmed, proceed to publish the design, making it available for users to utilize.

Connect to design token with asset code

To integrate your design effectively, connect your prepared foundation and UI kits with design tokens using asset code. This ensures that every design element is directly linked to your established design system, providing flexibility and consistency in your product’s development.

1. Request workshop implementation

Request a workshop for more effective design implementation. Here, you can collaborate with the team to plan and conduct workshops tailored to your project needs, ensuring a deep understanding of the design system and its implementation steps.

2. Import color and typography

Import predefined color palettes and font styles. By importing pre-configured color and typography settings, you can quickly start using the design system in your project, enhancing consistency and efficiency in the design process.

3. Push and see realtime updates

Push your design changes and see updates in real-time. With this feature, you can quickly implement changes into your design and see the result instantly, facilitating more effective team collaboration and quick decision-making.

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

  • Supa Palette: Palette editor/generator for quickly beautiful, harmonious, and accessible palettes in a short time.
  • Batch Styler: 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 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.