Design kits
Prototype quickly with VPDS design kits, equipped with everything you need to create user-friendly experiences.
Internal users
Step 1: Sign into Figma using Visa SSO
Visa employees should be added to our Figma organization automatically. Once signed in, there’s no need to join or request to join any specific team to access the Nova Figma libraries.
Step 2: Ensure VPDS libraries are enabled
In your design file, navigate to the left-side navigation panel and select Libraries. A modal will pop up.
The Nova: Components and Nova: Icons libraries will be enabled automatically and indicated by a checkmark. Additional libraries such as Data Experience: Charts can also be enabled from this modal using the search field or by navigating to Your organization and then selecting the Visa Product Design System (VPDS).
External users
Step 1: Sign into Figma
Use your credentials to access the Figma platform. If you don’t have an account, you can create one for free.
Step 2: Get the libraries
Navigate to the Visa Product Design System within the Figma community.
Step 3: Duplicate the file to your workspace
Explore the Visa Product Design System files and select one to duplicate in your own workspace.
Start designing
Find and place components
The Visa Product Design System includes more than 50 components, patterns, and their variants. Navigate to or search for components from the Assets tab in the left-side navigation panel, and drag and drop them to the stage. Use the Application layouts to start your designs from preset examples.
For more help on how to use Figma, visit Figma Learn
Adjust component properties
Drag the component you wish to use onto canvas. The component will be selected, allowing you to view the name of the component in the right-side properties panel until deselected. If the component has variants, you’ll see fields underneath the component name to configure the properties and values of that component set.
Need to customize a component beyond the properties provided in the panel? Find out more about theming and customization in Design tokens for designers.
Apply color and text styles
Visa Product Design System color and typography design tokens are surfaced in Figma using styles. As you design, you can use these styles to ensure consistency as you add your own elements. Access these styles in the right-side properties panel under Appearance.
Learn more about using color, typography, and more in Base elements.
For more help on how using variables in Figma, visit Figma Learn