AlternativeSoft – Design System
Built and maintained a design system for a financial platform with complex tables, questionnaires, and workflows.
Role
Product type
Team
Design scope
Project Overview
A shared foundation for a complex financial product
AlternativeSoft brings together fund data, tables, questionnaires, documents, and investment workflows. Designing for this platform often meant fitting a large amount of information and functionality into limited space while maintaining a clear hierarchy.
Alongside my work on the product interfaces, I created and maintained the Figma library that supported them. My responsibility covered visual foundations, reusable components, their states and variants, and their application across product screens.
The library lived in a separate Figma file and was connected to working design files, giving designers access to shared styles and components.
The Challenge
The product needed a shared design language
When I joined, the platform already had screens, but there was no established Figma library or clearly defined visual foundation. A few UI elements existed; the system needed to be developed as part of the platform redesign.
The need was visible in the product itself. Actions, statuses, selection controls, and other interface elements repeated across different sections. With a large product, ongoing feature development, and multiple designers working on it, these details needed a common foundation.
Together with the client, we agreed to build a shared library. The goal was to make recurring design decisions reusable while keeping enough flexibility for different workflows and dense layouts.
My Approach
Foundations first, then components shaped by real tasks
Establish the visual foundations
I started with typography, colors, grids, and spacing. These provided a common basis for the screens I was redesigning and the components I would build next.Build the initial library
I created reusable elements with defined sizes, configurations, and interaction states. The aim was to support recurring needs without rebuilding the same elements for each screen.Apply and extend it through product work
As I worked through screens and features, I used the existing library, identified what could be reused, and expanded it where a task required additional options. The system developed alongside the product after its initial setup.Keep the library connected to delivery
I connected the separate library file to working design files and used annotations
and specifications to explain screen behavior and design decisions.
Requirements came through the design lead from the business analyst. Depending on the task, I developed the requested solution or explored two or three approaches before refining the agreed direction.
Inside the Library
A broad library built for everyday product design
The system brings together visual foundations, reusable component families, interaction states, and design annotation elements.
I defined sizes, icon configurations, and states to support different layouts while preserving a shared visual language. Components needed to accommodate dense content, maintain clear action hierarchy, and remain flexible enough for different tasks.
The examples below show selected parts of the library and how they work together.
From Library to Product
Shared patterns across different workflows
I used the system throughout my work on the platform’s tables, questionnaires, forms,
and other workflows.
Shared components provided consistent interface details, while content and layout followed the needs of each task. This gave different features a common foundation without requiring every screen to use the same composition.
Ongoing Development
Refining the system as the product evolves
The library continued to grow after its initial setup. New product tasks introduced additional options, while changes in visual direction prompted updates to existing patterns.
One recent example is the request for a softer visual treatment of tabs. I am exploring an updated approach that fits the evolving interface while keeping the active state clear.
Outcome & Reflection
A shared design foundation for continued product development
I created and maintained a connected Figma library that gave designers access to shared styles, reusable components, and defined states across working files.
Its value came from daily application: I used it to build product interfaces, expanded it as requirements evolved, and supported delivery with annotations and specifications.
This project reinforced that a design system is an ongoing part of product design. Its structure provides consistency, while its usefulness depends on how well it supports real content, constraints, and changing workflows.
Impact
Shared library
Connected styles and components available across working design files.
Consistent patterns
Reusable components with defined states and configurations for different workflows.
Ongoing development
A library maintained and extended alongside product requirements.
Lessons Learned
Real product screens reveal which component states and configurations are needed.
Consistency needs flexibility: shared elements must accommodate different content and layouts.
Components and specifications work together to communicate both appearance and behavior.
Ongoing Refinement
The library continues to evolve
with the product’s visual direction.
A current example is exploring
a softer treatment for tabs while keeping the active state clear.