Set Up for Designers

Important Figma libraries and files to get you started designing UIs.

Get familiar with our principles

Our principles encapsulate our shared standards for design and collaboration. Explore the following principles to get a better understanding of what we commit to:

Guiding Principles: how we approach the design system.

Product Design Principles: what we consider when doing product design.

Accessibility Principles: how we ensure Octopus is accessible to everyone.

Get familiar with Figma

Access

Figma is our design tool of choice at Octopus. If you need access, follow the steps outlined in Figma at Octopus Confluence guide.

Important libraries, files and folders

We use a combination of Figma libraries, files and folders to organise design system-related resources. Familiarise yourself with the files below and favourite them for easy access.

By default, the design system libraries (Components and Foundations) you’ll need are available in any new or existing Figma file. You can find them by clicking Assets Panel on the left-hand side of the sidebar. If you’d like a refresher, check the Guide to libraries in Figma.

	Folder or file name	What’s included
	Design System → Component Library	Reusable UI Components and starter layouts we use to build interfaces. The contents of this file map to an npm package consumed by engineers.
	Design System → Foundations Library	Design Tokens implemented as Figma variables. The Frontend Foundations Team manages our design tokens with Tokens Studio, which helps publish them into an npm package consumed by engineers.
	Design System → Illustration Library	Visual assets we use in Octopus UI, including illustration usage guidelines.
	Design System → Covers and Helpers	Utilities that make it easier to collaborate in Figma, such as: file thumbnail covers, component documentation sections, component annotation tools, laws of UX, usability heuristics, and more.
	Design System → User Personas	Octopus’ ideal customer and personas profiles, which are helpful in informing design decisions. Find more information about our personas in Who We Want to Delight Confluence document.
	Component Proposals	Work-in-progress files where we consider evolving existing UI Components or proposing new ones using Component - (Template) file.

Set up favourites

To make sure you have easy access to vital resources, star the above files and folders for quick reference:

Connect with us

If you have questions about setting up and working with the design system, the Frontend Foundations Team will guide you. Connect with us in the #team-frontend-foundations-requests Slack channel.

Ask a question or submit a request

Find us in #team-frontend-foundations-requests Slack channel