SemiHuman is a minimalist illustration product that can be easily customized with more than 140+ components at Figma

Introduction

As a digital product designer, I encountered the challenge of creating a comprehensive design system for an application. Simultaneously, collaborating with an illustrator sparked an idea: Why not develop a design system for illustrations as well? This led to the initiation of a project to build an Illustration System at SUB1 Studio.

Defining Customizable Assets

Our primary objective was to streamline the customization process for illustrations using Figma properties, even for those unfamiliar with the platform. We began by identifying the customizable assets for character creation, including Facial Hair, Expressions, Accessories, Head Model, and Body.

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

Next, we transformed each illustration asset into a Figma component using the naming format [Component Type]/[Component Name]. Unlike variants, we opted to maintain individual components to ensure thumbnail visibility within Figma properties, facilitating visual selection.

Integration and Organization

All component assets were combined into a single frame, forming a cohesive set of illustration components. Within each component asset type, we applied the instance swap property and assigned names corresponding to the illustration asset type.

Customization and Duplication

The final step involved duplicating the illustration component set, enabling direct customization within Figma. With this system in place, users could effortlessly modify illustrations to suit their preferences.

Team

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