As a senior UX/UI designer, I led the migration from Sketch to Figma.
This transition addressed several issues faced by our design and development teams: the limited flexibility of components, better management of light and dark themes, and difficulty in maintaining visual consistency at scale.
As a senior UX/UI designer, I led the migration from Sketch to Figma.
This transition addressed several issues faced by our design and development teams: the limited flexibility of components, better management of light and dark themes, and difficulty in maintaining visual consistency at scale.
Ubstream (digital product publishing, SaaS)
Migration
Optimize the entire design process, streamline collaborative work, and improve the fidelity of prototypes for better alignment between product teams and stakeholders.
• Structuring and optimizing existing components.
• Managing responsive design and variables.
• Administering patterns.
• Training and supporting teams for the effective adoption of new working methodologies.
• Collaborating with developers to enhance communication between design and development, optimizing the export and integration of UI assets.
Significant time savings in screen creation
Using advanced variants and auto-layouts to speed up interface assembly and simplify adaptation to different breakpoints and devices.
Improved maintainability and scalability
With shared libraries and advanced component management, the design team was able to enhance UI consistency and simplify future updates.
Better projections with interactive, high-fidelity prototypes
A more immersive experience, closely reflecting the final product, helping stakeholders make decisions more easily and reducing the need for late-stage adjustments.
Enhanced collaboration between designers, developers, and product owners
Developers were able to instantly access component specifications and extract assets without waiting for manual exports.
Stakeholder feedback was integrated more quickly, speeding up iterations and improving the final product quality.
Thanks to the properties of components, it’s possible to adapt a main component to different variants without unnecessarily duplicating elements, thus optimizing both the design and maintenance of the Design System.
Each component can contain sub-components, which have their own configurable properties. These properties allow for dynamic adjustment of the appearance and behavior of a component without detaching it from its main instance.
Main Color Palette
Each color has both a light and a dark version, stored as variables.
These variables are organized into collections, allowing for the grouping of all colors within the same theme.
Application to Components
Instead of using a static hexadecimal color, a color variable is applied to each element (e.g., the text in a button uses --BU__txt, and the background of a button uses --BU_bgNeutral).
When switching between light and dark themes, all instances of components automatically update their colors according to the defined variables.
Annotations and Visual Documentation
Highlighting key areas of a screen to indicate the elements to be integrated.
Interactive Prototypes
Helping developers with navigable mockups to better understand the flow of screens.
Asset Referencing
Indicating the icons, illustrations, and files to be used, along with their formats and resolutions.
Real-Time Feedback
Tracking integrations, validating implementations, and making adjustments as necessary.
This migration marked a turning point in our approach to designing interfaces, making our process more agile, more consistent, and better aligned with the modern requirements of product design.