This project is now live!
For more details, email me with code 777 in the subject line.
Send an email
This project is now live!
For more details, email me with code 777 in the subject line.
Send an email
Figma to ReactJS design system for Alison LMS
Figma to ReactJS design system for Alison LMS
How it started
Convincing a small organization to invest time in a Design System (DS) can be challenging.
Unlike larger companies with dedicated DS teams, smaller teams often face resource and time constraints. That’s why it’s crucial to clearly and simply communicate the value a Design System can bring to the organization.
How this presentation helped us:
a. Gained the support we needed from directors and the CEO.
b. Boosted the motivation of our tech and design teams to actively engage in the Design System process.
Why?
Switching from Adobe XD to Figma was a significant transition for our team.
It wasn’t an easy process for LMS design team to manage using only components. To address this, we decided to establish the foundation of our Design System alongside the migration.
What?
To simplify the process and ensure managers could effectively follow progress, I created a visual roadmap paired with a calendar. How this approach helped the team:
Kept every stakeholder updated and aligned.
Improved project prioritization and time estimation.
Enabled better tracking of project velocity.
How it is going
I initially started the Design System (DS) as a tool, but my vision is for it to evolve into a product and a practice one day. When I began building the component library, I asked myself:
How can I make these variants more accessible, adoptable, and composable?
Over time, I identified three key pain points:
Reflections
a. The Design System is a Living Document:
Accepting that you are in control while understanding that velocity doesn’t always equal quality is essential for maintaining balance and sanity throughout the process.
b. Flexibility with Structure:
The main goal is to keep the Design System flexible enough to scale, yet structured enough to maintain consistency. This balance directly impacts KPIs and results from internal surveys, reflecting the system's effectiveness.
c. Building Visibility Through Internal Newsletters:
Creating an internal newsletter to share updates across the company fosters visibility, boosts motivation, and inspires new ideas from teams across the organization.
Alignment on Vocabulary Across Teams
Different teams often used inconsistent terminology for the same properties or variants. For example, the B2B team referred to them as “pills,” the design team called them “tags,” and the tech team used “badges.”
Solution: Created thorough documentation that was shared across teams, clearly defining each term and its associated properties to ensure alignment and understanding.
Accessibility of Published Components
Teams often struggled to find the right components or properties, leading them to create their own inconsistent versions.
Solution: Included detailed keywords and descriptions in the component library. These descriptions cover all possible terminologies teams might use, along with globally accepted terms. This approach improved searchability and reduced duplication.
Well-Organized Figma Files Enable Seamless Collaboration
To ensure developers and other teams can easily navigate the Figma files, we prioritized maintaining a clear and logical file structure.
Solution: Established a structured file organization system with well-labeled pages, logical grouping, and consistent naming conventions. This approach reduced friction, improved clarity, and made collaboration across teams significantly smoother.
At the end of the process, I sent out a survey to both the design team and the tech team to gather their feedback on how the Design System impacted their day-to-day work experience.
It’s crucial to stay accountable and measure success effectively by calculating your own Design System Impact Measurement (DSIM) scores.
These metric provide valuable insights into the usability, adoption, and overall effectiveness of the Design System, ensuring continuous improvement and alignment with team needs.
Each component was designed with constraints to be able to offer adoptable and responsive yet flexible enough for different use cases. Team started to mention about new components as "we feel like playing with legos to design".
Reflections
a. The Design System is a Living Document:
Accepting that you are in control while understanding that velocity doesn’t always equal quality is essential for maintaining balance and sanity throughout the process.
b. Flexibility with Structure:
The main goal is to keep the Design System flexible enough to scale, yet structured enough to maintain consistency. This balance directly impacts KPIs and results from internal surveys, reflecting the system's effectiveness.
c. Building Visibility Through Internal Newsletters:
Creating an internal newsletter to share updates across the company fosters visibility, boosts motivation, and inspires new ideas from teams across the organization.
At the end of the process, I sent out a survey to both the design team and the tech team to gather their feedback on how the Design System impacted their day-to-day work experience.
It’s crucial to stay accountable and measure success effectively by calculating your own Design System Impact Measurement (DSIM) scores.
These metric provide valuable insights into the usability, adoption, and overall effectiveness of the Design System, ensuring continuous improvement and alignment with team needs.
Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
How it started
Convincing a small organization to invest time in a Design System (DS) can be challenging.
Unlike larger companies with dedicated DS teams, smaller teams often face resource and time constraints. That’s why it’s crucial to clearly and simply communicate the value a Design System can bring to the organization.
How this presentation helped us:
a. Gained the support we needed from directors and the CEO.
b. Boosted the motivation of our tech and design teams to actively engage in the Design System process.
How it is going
I initially started the Design System (DS) as a tool, but my vision is for it to evolve into a product and a practice one day.
When I began building the component library, I asked myself:
How can I make these variants more accessible, adoptable, and composable?
Over time, I identified three key pain points:
Alignment on Vocabulary Across Teams
Different teams often used inconsistent terminology for the same properties or variants. For example, the B2B team referred to them as “pills,” the design team called them “tags,” and the tech team used “badges.”
Solution: Created thorough documentation that was shared across teams, clearly defining each term and its associated properties to ensure alignment and understanding.
Accessibility of Published Components
Teams often struggled to find the right components or properties, leading them to create their own inconsistent versions.
Solution: Included detailed keywords and descriptions in the component library. These descriptions cover all possible terminologies teams might use, along with globally accepted terms. This approach improved searchability and reduced duplication.
Well-Organized Figma Files Enable Seamless Collaboration
To ensure developers and other teams can easily navigate the Figma files, we prioritized maintaining a clear and logical file structure.
Solution: Established a structured file organization system with well-labeled pages, logical grouping, and consistent naming conventions. This approach reduced friction, improved clarity, and made collaboration across teams significantly smoother.
Each component was designed with constraints to be able to offer adoptable and responsive yet flexible enough for different use cases. Team started to mention about new components as "we feel like playing with legos to design".