Skip to main content

For designers

Documentation and resources​

Working with the design system​

The VA Mobile Design System is the VA Mobile App’s front-end framework. Before getting started, we recommend that you get familiar with the VA Mobile Design System and how you can use it as part of your design process. Each section includes some helpful information:

  • Components. Components are the building blocks of the user interfaces. For example, accordions and buttons. Some of these have strict usage guidelines, so please become familiar with them.

Referencing the VA.gov design system​

The VA Mobile Design System is an extension of the VA.gov Design System. Additional guidance can be found in each section:

  • Content. Our house style guide for VA.gov. Follow the guidelines to help you create a consistent, helpful experience for Veterans.
  • Foundation. This section explains VA.gov’s base styles and visual language.
  • Patterns. Patterns define how components, content strategy, information architecture, accessibility, and visual design work in tandem to solve Veterans’ needs. Here you will find patterns to ask users for specific pieces of information and how to help a user to complete a task or interaction.
  • Templates. Templates, or page layouts, are composed of components within a single page. A layout can contain multiple variations of a component depending on the context.

Design resources​

The website displays examples of the various components and patterns in use in the VA Mobile App. You can use your browser’s web inspector to view the specs for each component.

The Design System team also provides a complete Figma library of core components.

Design libraries​

The Design System team provides Figma libraries for use by teams.

Add a library to your project​

Use libraries to access all design tokens, icons, and components. In Figma, libraries live in the cloud. Thus you do not need to download a library. The Design System team updates the libraries in order to keep it in sync with the va-mobile-library code which contains our React Native web components.

To access and enable the Design Tokens, Icon Library, or Component Library, follow these steps:

  1. In the Figma menu bar, navigate to Figma > Libraries to open the Libraries modal
  2. In the modal, find the library file
  3. Click the “Add to file” button to add the library to your file

Once you’ve loaded the library, you should be able to access everything in it by navigating to Assets > "library file" or Resources > Components > "library file". Note that you cannot edit a library directly. The Design System team manages libraries.

Figma​

VA mobile app design teams use Figma to view, share, and collaborate on our work. Currently, only designers at Ad Hoc can be added as Editors to the Mobile App team's Figma account. If you're working on an external Experience Team and need access to our files, you can follow the steps below to be added as a Viewer.

Get added to Figma​

  1. Go to figma.com and create a Figma account
  2. In the #va-mobile-app-shared-systems channel in Slack, ping a Figma admin (currently Kelly Lein, Jessica Woodin, and Holly Collier) requesting to be added.
  3. Receive the invite via email and accept the invitation.
  4. Boom, you’re in!

Using Figma​

Figma contains a few important features that help teams work together:

  • Files (including libraries) live in the cloud, rather than locally on your machine
  • You receive library updates automatically (a big advantage of using Figma)
  • You can see what everyone else is working on in the VA workspace
  • Developers can inspect any element on a page
  • You can create a branch of your file at any time

Designers on Experience Teams​

Currently, designers on Experience Teams can only be added as Viewers in the VA Mobile App's Figma account. In order to use the Mobile App libraries in the VA.gov Platform team's Figma account, designers should follow the steps below.

  1. In the VA Mobile App team's Figma account, open the Component Library and/or Flagship Library.
  2. Find the component you need.
  3. Copy the component.
  4. In the VA.gov Platform team's Figma account, open your working file.
  5. Paste the component into your working file.

If you have questions or need assistance, reach out in the #va-mobile-app-shared-systems channel.