Onboarding Origami 3

The following three recorded sessions aim to introduce you to Origami 3. The first session is aimed at anyone in product and tech, with later sessions building on this with more details for designers and engineers.

See also what’s new, design guide, and technical guide.

Principles, Purpose, and Impact

We covered what’s new in Origami 3 (o3), why it matters, and what’s next. Video recording chapters for quick access:

1. Introduction
2. Origami 3 (o3)
3. Design Language
4. Iconography Optimisation
5. Mobile Typography Optimisation
6. Mobile Button Alignment
7. Rollout
8. Q&A Time

Bridging Design & Code

We covered what’s new with Origami 3 (o3) in Figma and how to use it in collaboration with code. Video recording chapters for quick access:

1. Introduction
2. Basic Principles
3. Components
4. Type
5. Icons
6. Collaboration Demo
7. Q&A

Engineers’ Deep Dive

We covered the engineering part of what’s new in Origami 3 (o3). Video recording chapters for quick access:

1. Introduction
2. Cascading Style Sheets
3. Brands & Themes
4. JSX Templates
5. Applying Typography
6. Applying Icons
7. Customisation
8. Takeaway

Designer’s Deep Dive

For product designers we also ran a Figma and design guideline deep dive and Q&A. This builds on the earlier “Bridging Design & Code, How to Work with Origami 3” session:

Designer’s Deep Dive Recording