Building an Illustration System in Figma

While working on a design system for an application, a collaboration with an illustrator sparked an idea: why not build a design system for illustrations? This led to the creation of an Illustration System at SUB1 Studio, designed to streamline customization in Figma with over 140 customizable components.

We identified core customizable assets for character creation, including Facial Hair, Expressions, Accessories, Head Models, and Body. These elements were structured to make customization accessible, even for users with minimal Figma experience.

To lay the foundation, we designed a complete set of illustrations as a base for customizable assets. Each asset was inserted into a frame of consistent size, serving as a reference for different component dimensions.

Assets were converted into Figma components using a clear naming convention: [Component Type]/[Component Name]. Instead of variants, individual components were used to ensure thumbnail visibility in Figma properties, making selection more intuitive.

All components were integrated into a single frame, forming a cohesive set. Instance swap properties were applied, enabling users to switch between assets effortlessly while keeping names consistent for easy navigation.

The final system allowed users to duplicate the component set and directly customize illustrations in Figma. This intuitive approach enabled seamless modifications tailored to individual needs.

Muchtarruddin (Rudi) · Design System
Taqyuddin Amri · Product Illustrator
Dani Irawan · Project Manager