Building an illustration system in Figma
SemiHuman is a minimalist illustration product that can be easily customized with more than 140+ components at Figma
Introduction
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 creating an illustration system for my design team, designed to streamline customization in Figma with over 140 customizable components.
Defining Customizable Assets
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.
Creating Base Illustrations
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.
Component Creation in Figma
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.
Integration and Organization
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.
Customization and Duplication
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.
