Role: Library Owner & Design System Lead. I was responsible for the full scope of the project.
Figma design library used by designers across multiple Infor product teams. The library reflects the SoHo / IDS Enterprise component codebase — changes here affect how designers work across products built on one of the world's largest enterprise ERP platforms (90,000+ customers, 58M+ end-users).
The current Figma design system consists of a single file that includes:
Goal: The primary objective was to reorganize and clarify the structure of the main components list, as well as the "Internal Components" and "Charts and Data Viz" sections, to improve overall consistency and usability.
In the codebase and documentation, there was a clear distinction between sections such as patterns, utilities, and charts. We aimed to introduce the same structure in Figma, which led us to take the following steps:
Each internal component was assessed against Web Components, Enterprise, Docsite and Figma — with a decision and rationale logged for every element (Busy Indicator, Cursor, Dirty Indicator, Footer, Overlay, Pointer, Selection Bar, Shell Icon, Vertical Menu Item, Date and Time, Swappable).
| Component | Web Components | Docsite | Figma | Decision | Rationale |
|---|---|---|---|---|---|
| {{ r.name }} | {{ r.wc }} | {{ r.docsite }} | {{ r.figma }} | {{ r.decision }} | {{ r.rationale }} |
While working on the data visualization section in Figma, we focused primarily on aligning our library with what exists in the WC codebase. We had around 30 elements, many of which variants represented the same component in different variations. From a design system perspective, it was inefficient to display and maintain every variant separately in Figma. Therefore, we decided to focus on core components and group their variants under them, which improves clarity and navigation.
Additionally, we renamed the section to "Charts" to maintain consistency with the documentation site, and moved it to the bottom of the component list, under the "Utilities" section.
Create a page for:
Rename section to "charts library".
Outcomes of the library reorganization for the IDS Figma library and the teams that use it.
{{ g.text }}