SemiHuman

SemiHuman

Building an Illustration System in Figma

SemiHuman

SemiHuman Cover
SemiHuman Cover

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.

White Monkey Meme with the phrase 'Design System for Illustrated Character? Why not?’
White Monkey Meme with the phrase 'Design System for Illustrated Character? Why not?’

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.

Identifying Assets
Identifying Assets

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.

Base Illustrations
Base Illustrations

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.

image

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.

image

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.

Illustration customization in Figma

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

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

Footer

NameRows
1
2
Made with 🤍 by Rudi