SemiHuman
SemiHuman
Building an Illustration System in Figma
Building an Illustration System in Figma
Speciality
Speciality
Design system
Release
Release
May 2023
SemiHuman Cover
SemiHuman Cover
SemiHuman is a minimalist illustration product that can be easily customized with more than 140+ components at Figma
SemiHuman is a minimalist illustration product that can be easily customized with more than 140+ components at Figma
Introduction
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.
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.
Identifying Assets
Identifying Assets
Defining Customizable Assets
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.
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.
Base Illustrations
Base Illustrations
Creating Base Illustrations
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.
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
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.
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
Creating Properties
Creating Properties
Integration and Organization
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.
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.
Illustration customization in Figma
Illustration customization in Figma
Customization and Duplication
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.
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.
With the Illustration System implemented in Figma, customization of illustrations became intuitive and efficient. By streamlining the process and leveraging Figma's capabilities, we empowered users to create personalized illustrations with ease.
With the Illustration System implemented in Figma, customization of illustrations became intuitive and efficient. By streamlining the process and leveraging Figma's capabilities, we empowered users to create personalized illustrations with ease.
Team
Team
Muchtarruddin (Rudi) · Design System
Taqyuddin Amri · Product Illustrator
Dani Irawan · Project Manager
Muchtarruddin (Rudi) · Design System
Taqyuddin Amri · Product Illustrator
Dani Irawan · Project Manager
A set of these illustrations can be purchased at Graphisphere
There is also a free set of illustrations that you can get at Figma Community