Figma Semi Realistic Tech Illustration Collection by Amirul HakimFigma Semi Realistic Tech Illustration Collection by Amirul Hakim

Figma Semi Realistic Tech Illustration Collection

Amirul Hakim

Amirul Hakim

Semi-Realistic Tech Illustration Collection

Created for a large FinTech corporation under NDA. The illustrations shown here are a curated selection that I'm able to share publicly.

The Problem

In a large corporation, documentation libraries pile up fast. Engineering specs, design systems, QA guides, frontend references, marketing playbooks, HR onboarding docs. This company had documentation spread across 6 separate divisions (Engineering, Design, Marketing, Business, QA, and HR), totaling 25 document sections.
The problem: every document looked the same. Plain text titles, no visual differentiation. Engineers hunting for a specific spec had to scan through walls of identical-looking links. Stakeholders reviewing cross-department documentation couldn't orient themselves quickly. Finding the right document felt like digging through a filing cabinet.

The Users

Two primary groups:
Engineers who navigate documentation daily as part of their workflow. Speed matters: every extra second spent searching is a second not spent building.
C-level stakeholders who review documentation across departments for strategic decisions. They need to scan and orient across 6 divisions without reading every title.

The Process

Step 1: Map the documentation structure. I cataloged all 25 document sections across 6 divisions to understand the full scope. Each section needed a distinct visual identity that communicated its content at a glance.
Step 2: Develop the visual system. I designed a semi-realistic 3D illustration style with depth and dimension, giving abstract technical concepts a tangible, recognizable form. Design system collaboration, frontend development, library management, QA workflows, Swift UI, and UI design all got their own distinct visual identity.
Step 3: Build for modularity. The entire system is built on modular illustration principles in Figma. Every asset is fully vectorized, scalable, and adoptable across different contexts and screen sizes. I produced 36+ illustrations covering all 25 document sections.

The Key Design Decision

The most important decision was using a semi-realistic 3D style instead of flat icons or abstract shapes.
Flat icons would have been faster to produce, but they lack the visual weight needed to make documentation thumbnails feel distinct at a glance. When you have 25 sections across 6 divisions, subtle flat icon differences blur together. Semi-realistic rendering gives each illustration enough visual mass and detail that the brain registers the difference instantly, even in peripheral vision.
The 3D depth also creates a sense of craft and intentionality. Documentation is often treated as an afterthought visually. By giving each section a polished, dimensional thumbnail, the system signals that documentation matters here. That signal turned out to be more powerful than expected.

The Outcome

The illustration system was adopted immediately across all 6 divisions. The CTO personally noted that teams began writing and organizing their documentation more diligently after the thumbnails were introduced. The visual system didn't just make navigation faster; it changed how the organization valued documentation itself.
Engineers could locate the right spec in seconds instead of scanning through identical text links. Cross-department stakeholders could orient themselves visually when reviewing documentation outside their own division. A small visual investment produced a measurable shift in documentation culture across the entire company.
Like this project

Posted Jul 29, 2026

Fully vectorized, scalable assets that help engineering teams and stakeholders navigate documentation quickly.