Getting started

Designing

If you’re just starting out designing, you’re in the right place. Here’s a checklist of everything you need to get up and running.

Learn about the Jack Henry Design System

By adopting the Jack Henry Design System, designers gain a collection of reusable assets to design user interfaces quickly and efficiently. Our design system translates the design language into code for building digital experiences.

This is accomplished through elements such as color tokens, type tokens, and spacing tokens that are meant to be applied to all sorts of digital experiences through guidance and components.

Get the Figma design kit

Upon hire, designers at Jack Henry should get a license for Figma, our primary design tool. This gives you access to the design kits that enable you to start designing with the system. These kits are actively maintained by the design system team and are made up of a series of Figma libraries that include design tokens, components, wireframes, and samples available for use in your product and web experiences. Using these kits provides a number of benefits:

Automatically receive updates made to the libraries, ensuring your designs stay up-to-date with the latest releases
Promote a common language regarding style and functionality between designer and developer throughout the development cycle
Ensure consistency and efficiency when working with common components and patterns, affording you more opportunity to focus on solving specific and complex user tasks

Reach out for support

The design system team has several ways you can reach out to us with questions or feedback. Visit our support page to learn more about how to contact us as well as stay up-to-date with the latest design system news.

Developing

If you’re just starting out developing, you’re in the right place. Here’s a checklist of everything you need to get up and running.

Install

The design system comprises three NPM packages, which are currently only available to internal Jack Henry employees via our Artifactory registry. Head over to our install instructions for all the information you need to get started.

Check out developer resources

Learn some basic concepts of how to work with the packages and components.