This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Introduction

Designing

Version: 0.136.0

Designing

Use the resources in Admin UI to create excellent experiences for merchants.

Why use Admin UI​

Think big, not small​

Delightful interfaces with great usability are delivered faster when designers leverage Admin UI. Styling decisions and the most common interactions already have tested solutions in the design system, so designers can quickly assemble a prototype. This frees up time in the design process so they can define and validate conceptual decisions that carry the most risk, such as the information architecture of the interface.

Reach unity, not uniformity​

The VTEX Admin becomes coherent when designers leverage Admin UI. Sharing patterns between interfaces doesn't make them dull and uniform but instead creates a common thread that connects products and simplifies the daily tasks of merchants. The design system never intends to block designers from delivering the best experience, so we always leave room for intentional experimentation by creating composable resources and documenting foundations.

recommended videos

Design collaboratively, not isolatedly​

Knowledge is shared with a more significant impact when designers leverage Admin UI. Ideas originating from a user interview or a prototyping session can make their way into the design system and improve the quality of multiple products in the Admin. Feedback makes the design system more mature and the application of its patterns more robust, so both the Admin UI team and product teams openly present their work since early-stage solutions.

How to use Admin UI​

Explore and align​

  • When designing a new module or feature for the VTEX Admin, it's not necessary to limit ideas to fit into the system since the early stages. Explore the best solution and then align it with the Admin UI.
  • One of the goals of the Admin UI team is to support other teams while they are designing their products, since the early design stages. This partnership makes the design system more mature and the application of its patterns more robust. Learn more about working with the Admin UI team and start scheduling meetings with the team.
  • Connect with the Admin UI team. Use the support resources, report issues, and give feedback. This communication will help the Admin UI team fix bugs quicker and plan possible updates.

Use the Figma resources​

Projects​

Join the Admin team in Figma to access the following projects:

  • Libraries – Patterns to consistently design high-quality prototypes.
  • Other resources – Templates that work as examples or starting points for the most common pages; Processes that can guide or support you while designing; Team Components that can be used for other teams until it becomes a core component.
  • Studies – What the Admin UI team is currently working on.
  • Presentations – Content that has been shared internally in past events.

Libraries​

Activate the following libraries in your file when using the system:

  • Components – Interface elements that standardize interactions and make the Admin efficient.
  • Foundations – Styles and icons that express a personality and make the Admin pleasant.
  • File Organization – Support elements that lead to realistic designs and better documentation.

Color space​

Set the Figma desktop app to the sRGB color space instead of P3:

  • Most displays don't support P3, so design with sRGB to match how the merchant will likely see the interface.
  • To change the color space, download the Figma desktop app and click on the macOS menu bar in Figma > Preferences > Color Space > sRGB.

Use the documentation website​

  • The Admin UI documentation website provides design guidelines for foundations and components. We are always documenting answers to the most common questions about these resources. If you still can't find what you are looking for, contact the Admin UI team.
  • Templates can serve as references or starting points for the most common pages. The Listing Page and Form Page templates are currently available. They include patterns such as all the states, interactions, and messages, as well as examples of the template applied to real scenarios.

Stay updated​

  • Update libraries when there are new versions, since they include Figma fixes or improvements to the resources. Ideally, changes in implemented resources will already have been released in code or will be released soon.
  • Read the changelog. It's important to understand the most recent changes and how they will impact your file and benefit your design.
  • Join the #admin-ui Slack channel and follow the announcements.