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. 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.
  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.

Design Critique Overview & Sign-Up​

Design Critique is a collaborative session for sharing in-progress work, exploring ideas, and gathering peer feedback to strengthen design direction, make sure we’re asking and answering the right questions, and ensure usability early on.

When to Attend​

Go to a Design Critique when...

  • You’re exploring multiple design directions or…
  • You’re testing early hypotheses or low-fidelity wireframes…
  • You want to identify risks, gaps, or alternative ideas early.

Tip: One critique leading to one review is the ideal agile flow. When in doubt default to attending critique more often than not and bringing a design multiple times, Design Reviews on the other hand should be a “close to final” step only.

Meeting schedule​

Meetings are held up to three times a week. If you’re a member of #va-mobile-app-design, you should receive an automated reminder 15 minutes before each session. A MS Teams join link is included in the reminder.

  • Mondays at 08:05AM PT
  • Thursdays at 08:05AM PT
  • Fridays, biweekly, at 10:05AM PT (For 2025, ISO weeks ending in an even number have a session, i.e. W44, W46, etc.)

How to Prepare​

  • Provide context...
    • Be ready to share the problem, user goals, and your hypotheses
  • Bring design artifacts...
    • Share lo-fi designs or prototypes, don’t over-polish. Overall experience and content should be taken care of before interface decisions are made.
  • Be ready to answer questions...
    • What do users need to do, what the core function of your new or updated feature(s), what is the full workflow?
    • Where will your feature lives in the app? How does this impact navigation, how did you make this decision?
    • How will the feature work in dark mode or offline, have you considered mobile constraints or differences?
  • Be ready to ask focused questions...
    • “Does this flow make sense given in a Mobile context, are there any constraints?”
    • “What might we need to change to make this pattern accessible in React Native?”

Desired Outcomes​

  • Constructive peer and PO level feedback to improve design quality.
  • Identified next steps or experiments to validate direction.

Follow up​

  • Capture feedback—Record notes, decisions, and key insights (async for those who missed it). For critique you can do this via Slack, FigJam, Figma, etc—this is informal and the modality is up to you to decide.
  • Prioritize next steps—Not all feedback is equal. Align on what to implement, once aligned Product should post updates to GitHub and update issues, AC and/or Reqs, as needed. For critiques this means talking with your Development and Product team, building context, and aligning on what to do next.
  • Close the loop—Designer should make and share updates back to the team in the next session or async post to Slack or GitHub based on your teams communication norms.

Sign-up​

You can find a the signup sheet for regularly scheduled sessions in our #va-mobile-app-design Slack canavas. Please book via the link above and also add your details to the signup sheet.

Ad-Hoc Sign-up​

If you need an unplanned, impromptu, ad-hoc session you can book a Design Critique directly with our PO, Ryan Thurwelll. These invites are fully self-service, you can adjust timing or cancel via the booking link, as well as forward to team mates as needed.