How Lego’s UI Component Library Was Revamped for Better Frontend Efficiency

Background

Lego aims to build an enterprise‑grade UI component library supporting multiple terminals, scenarios, and tech stacks. In 2020, the V2.0 release brought a comprehensive upgrade for PC components.

User Classification

V1.0 targeted product designers, UI/UE designers, and front‑end engineers, but the experience was cumbersome and only marginally usable. Research showed developers were the primary users, so V2.0 reordered the target audience to Front‑end Development > Designers > Product Managers.

User Behavior

Competitor analysis revealed that users mainly repeat a search‑for‑component‑and‑code workflow, often hindered by extensive interaction design notes that distract developers. To improve browsing efficiency, information density needed to increase and irrelevant content be removed.

Site Reconstruction

The site structure was dismantled and rebuilt to address the new user focus:

Added a component search and overview page to boost retrieval efficiency.

Removed interaction design notes from component detail pages to reduce developer distraction and increase instance density.

Re‑organized the extracted design notes by component relevance, creating systematic design guidance for newcomers and B‑side designers.

Presentation Layer

The homepage adopted a light, flat style, abandoning the heavy 3D look of V1.0. Bright colors, no scrolling design, and a prominent “Start Using” button shift focus toward immediate product interaction.

Navigation Updates

Top global navigation now includes a sticky global search and a categorized menu to guide users to relevant pages. The left‑side menu was flattened, reducing hierarchy perception, shortening menu height, and placing English component names first for better developer recognition. Components are now sorted alphabetically.

Component Design

V2.0 upgrades focus on visual simplicity and practical adaptability.

Lightweight Simplicity

Visual styles were trimmed: gradients, strokes, inner shadows, and drop shadows were removed, yielding a cleaner look, lower development cost, and higher extensibility.

Drag‑and‑Use Adaptation

Components now automatically adapt to layout and size, eliminating the need for manual unbinding and resizing, thus reducing risk of inconsistent standards.

Variable Management

Sketch 69+ introduced flexible color palette management, which the component library now supports.

Slicing Iteration

Icons have been linked to layer styles, standardized with English naming, allowing direct use after upload without extra processing.

Motion Design Principles

V1.0 lacked clear motion guidelines. V2.0 establishes three core principles:

Natural : Motions should follow real‑world physics for intuitive understanding.

Restrained : Animations must serve a functional purpose and not exceed necessary duration.

Flexible : Speed and timing should balance efficiency with perceptibility, avoiding flicker or overly rapid transitions.

Motion Rules

Standard motion (move, transform, scale) stays within view; use ease‑in‑out.

Entrance motion introduces new elements with ease‑out.

Exit motion accelerates out of view; use ease‑in.

Typical animation duration is around 0.3 s, exceeding the 0.2 s human reaction threshold.

Conclusion

Improving usability starts with clarifying the target audience, usage scenarios, and pain points. Collecting accurate user feedback, benchmarking against competitors, and iteratively tracking redesign impact are essential for delivering a truly user‑friendly product.