Designing

The Odyssey Design Kit includes the building blocks needed to design Workforce experiences at Okta. It includes the most up-to-date version of Odyssey available.

Install the Figma Design Kit

Odyssey’s Figma Design Kit is the source of truth for our components. It matches the components available to engineers in the Odyssey React Library.

Enabling Odyssey libraries

If you’re a designer at Okta, you already have access to Odyssey in Figma. To start using the Odyssey libraries:

  1. Sign in to Figma using Okta SSO.
  2. Open a design file.
  3. Open the Figma menu in the toolbar then select Libraries.
  4. In Libraries, find Odyssey Design System and toggle on the three libraries.

Odyssey libraries

The Odyssey Design Kit is divided into three libraries:

Odyssey Foundations

The Foundations library includes token style elements for type, colors, spacing, and more. To apply styles, select an object from the Layers panel and use the Design panel to change fills, strokes, effects, and text.

Odyssey Components

The components library has all the available components and variants. To insert components use the Assets panel ( + 2) or search from the Resources menu ( + I).

When a component has variants or properties you'll see them displayed in the Design panel.

Odyssey Icons

The icons library includes all approved icons. To insert Icons you can also use the Assets panel ( + 2) or search from the Resources menu ( + I).

Odyssey Design Kits

Change or add to a component

If you want to add to or modify an existing Odyssey component, work with the Design System team ahead of your deadlines.

  • Bring your need to Odyssey Office Hours as soon as you can. The Design System team will work with you to either find a solution using existing components or help you contribute your solution using Odyssey Labs.

Request a new component

If you need a component that's not included in our libraries, work with the Design System team ahead of your deadlines.

  • Check work-in-progress components in Odyssey Labs. If your component isn't there, you can propose the new component in Labs.
  • If you need something more quickly, the Design System team can work with you and your engineers to assemble a solution using Odyssey components.

Have questions or need support?

Oktanauts can use the following resources when designing with Odyssey:

  • Check the Odyssey 1.0 FAQs.
  • Join #odyssey in Slack to ask questions and stay up to date about the design system.
  • Attend Odyssey Office Hours on Monday and Wednesdays from 1-1:30 p.m. PT / 4-4:30 p.m. ET.
  • Submit bug reports and feature requests to the Odyssey Jira board.