The Government of the City of Buenos Aires
Year
2022
Role
Design System Architect
Deliverables
- Information Architecture
- Nomenclature
- Auto Layout Optimized Figma
How can we transition the City of Buenos Aires’ design library from XD to Figma, ensuring improved usability, consistency, and developer collaboration in just 1 quarter?
The City of Buenos Aires embarked on a project to transition their design library from Adobe XD to Figma, aiming to enhance consistency, efficiency, and collaboration between designers and developers. I was brought on to audit the existing design assets, create cohesive styles, and architect an optimized Figma design library that closely matched Storybook for seamless developer integration.
Challenges and Goals:
The primary goal was to build a user-friendly and fully optimized Figma design library that met the needs of the government’s design and development teams. The project faced several challenges, including managing a specific and extensive icon library that needed to be accessible throughout the platform.
Approach:
- Information Architecture and Nomenclature: The first step was to audit the existing design assets in Adobe XD and define a clear and logical information architecture for the new design library. This involved organizing components, styles, and icons into an intuitive structure. Establishing a consistent and clear nomenclature was crucial to ensure that all elements were easily identifiable and accessible.
- Auto Layout Optimization: Leveraging Figma’s auto layout features, I optimized the design components to ensure flexibility and scalability. This included creating responsive components that adapted to various screen sizes and ensuring that the design elements were easy to use and modify. The focus was on building a design library that not only looked good but also enhanced productivity and efficiency for the design team.
- Icon Library Management: One of the significant challenges was managing the icon library, which included a wide array of specific icons used across the government’s digital platforms. To address this, I ensured that all icons were properly categorized and made accessible throughout the Figma library. This involved creating a centralized repository for icons and implementing best practices for icon usage and accessibility.
- Developer Synchronization: To facilitate seamless collaboration between designers and developers, the design library was closely aligned with Storybook. This ensured that the design components in Figma matched the code components, enabling developers to easily implement the designs. Regular sync-ups and feedback sessions with the UX leads of the government helped ensure that the design library met all requirements and expectations.
Outcome:
The transition from Adobe XD to Figma was completed in about three months, resulting in a robust and user-friendly design library. Although specific feedback and measurable outcomes were not documented, the new Obelisco Design Library significantly improved the organization and accessibility of design assets. The optimized auto layout components and well-managed icon library streamlined the design process, making it easier for the design team to create consistent and high-quality user interfaces. The close alignment with Storybook ensured that developers could implement designs more efficiently, enhancing overall collaboration between the design and development teams.
Conclusion:
The successful transition to the Obelisco Design Library for the City of Buenos Aires highlights the importance of thorough planning, clear communication, and strategic use of design tools. By focusing on information architecture, nomenclature, and auto layout optimization, we created a cohesive and efficient design system that supports the city’s digital initiatives. This project underscores the value of a well-organized design library in facilitating seamless collaboration and delivering consistent, high-quality digital experiences.
