Available starting with Guidewire Digital 11, Jutro is an adaptable system of meta-data driven UI components and interactions that support best practices in user interface design. By using Jutro to build digital products for the insurance industry, designers, developers, and product owners can streamline the effort it takes to create beautiful and compelling products. Jutro includes:
- Component library: Jutro offers developers a library of pre-built components. These speed up design while also promoting consistency across consumer applications. Developers will be able to accelerate the building of their applications, leveraging component level capabilities such as analytics, localization, theming, and accessibility.
- Codeless UI composition: Each of the UI components is easily configured via presentation metadata, such as labels or pages, thus building a metadata-driven application that can be easily modified without writing code.
- Design guidelines and patterns: We offer a set of UI assets, made for designers, that have been designed around a consistent paradigm. These UI assets include highly repeatable pre-designed UI components, standardized application layouts, and themes.
Conceptualize and design with Jutro
Gain an overview of design systems and how Jutro brings added value with its focus on the P&C industry. See how to use business patterns as building blocks to jumpstart your experience development.
Related Info
Design and Develop with Jutro
Equip yourself with the foundational skills that you need to design and develop using the Jutro Design System.
These short videos provide an introduction to what Jutro is and how it works, reducing the amount of time it takes for you to get up and running with your designs.
What are Jutro Floorplans?
Learn the fundamentals of working with Jutro floorplans, and how they contribute to consistent and responsive UI design.
Design with Jutro Using Figma
Preview how the Jutro component library is organized in Figma, and the key steps that are involved in designing with Jutro assets. In addition, learn how teams can use theming to adapt Jutro to their own visual requirements.
How to Configure Jutro Floorplans
Take a look at how to configure the properties of Jutro floorplans, including navigation, notifications, side panels and scrolling behavior.
Build and Configure with Jutro
This video demonstrates how to start building your application in code using the Jutro starter app. Learn how to retrieve metadata from components in Storybook, customize it, and add it to your code.
Ready to Build?
Read the documentation to get started creating amazing digital experiences with Guidewire Jutro.
The Jutro UI component explorer (also called Jutro Storybook) is not an editor. Instead it’s an explorer of Jutro components (currently based on Storybookjs) where you can explore the Jutro components available off the shelf (GA and lab preview) and their properties, play with the component configuration, and obtain Presentation Metadata for use in your application code. It’s the #1 resource used by teams during the implementation of Jutro based applications, and it’s also a good resource for designers to understand what’s available in Jutro.
{
"component" : "badge"
"componentProps" : {
"maxValue" : 10
"size" : "medium"
}
"id" : "badge"
"type" : "element"
}
import { Badge } from '@jutro/components';
<Badge
id="badge"
maxValue={10}
size="medium"
type="notification"
value={9}
/>