The Challenge
During my time at Esri, I worked on a project where I utilized coded components and transformed them into designs using Figma.
I collaborated closely with the development team to gather insights into the existing coded components and understand their capabilities and limitations. This allowed me to effectively translate the functionality into visually consistent and user-friendly designs.
Using Figma, I created design layouts, incorporated branding elements, and ensured that the designs aligned with the project's objectives and user requirements. I paid attention to details such as typography, colors, spacing, and interactive elements to create a cohesive and intuitive user experience.
Project Goals
Enhance efficiency: The project aimed to optimize the design workflow by leveraging existing coded components and integrating them seamlessly into the design process.
Foster collaboration: By utilizing Figma as a collaborative design tool, the project aimed to facilitate better communication and collaboration between developers and designers.
Maintain design consistency: The project sought to ensure consistency between coded components and their visual representations, enabling a more unified user experience.
Initial Assessment:
Evaluation of existing coded components: I started by assessing the coded components that were already in use within the development team. This involved understanding their structure, functionality, and compatibility with Figma.
Integration Process:
Component extraction: I identified the key components that needed to be transformed into Figma designs. These components were typically UI elements, such as buttons, input fields, navigation bars, etc.
Visual representation: Working closely with the design team, I created visual representations of the coded components using Figma's design tools. This involved matching the existing design language and style guidelines.
Design system development: As part of the process, I collaborated with the design team to establish a design system within Figma. This system allowed for consistency in design across different screens and interactions.
Implementation and Testing:
Iterative design improvements: I worked closely with the development team to implement the transformed designs and gather feedback for further refinement.
User testing and feedback: We conducted user testing sessions to ensure that the transformed designs were intuitive, user-friendly, and aligned with user expectations.
Documentation and Handoff:
Design documentation: Throughout the project, I documented the design process, decisions, and guidelines, ensuring that the transformed designs could be easily understood and replicated.
Handoff to development: Once the designs were finalized and approved, I provided the necessary assets, specifications, and documentation to the development team for efficient implementation.
Continuous Improvement:
Feedback loop: I maintained an open line of communication with the design and development teams, gathering feedback and iterating on the design system and components as needed.
Collaboration enhancement: I actively sought opportunities to enhance collaboration between developers and designers, exploring integrations between coded components and design tools to further streamline the workflow.
As a member of the Calcite Design System team, we recently undertook the task of creating and implementing tokens using Figma Studio plugins. Our goal was to streamline our design process and ensure consistency across our digital products by aligning our design tokens with the existing coded tokens.
To begin, we thoroughly studied the coded tokens that were already in place. These tokens served as the foundation for our design system, providing a set of predefined values for colors, typography, spacing, and other visual elements. We wanted to replicate these tokens within Figma to ensure that our designs accurately reflected the coded implementation.
Using Figma's powerful plugin system, we developed a custom plugin tailored specifically to our needs. This plugin allowed us to create design tokens directly within the Figma interface, making it easy for our team to access and utilize them during the design process. The plugin interface provided a simple and intuitive way to define and manage tokens, ensuring consistency and efficiency.
We started by creating a token library within Figma, where we organized tokens into categories such as colors, typography, spacing, and shadows. Each token was given a unique name and accompanied by its corresponding value. By mirroring the coded tokens, we maintained a clear and consistent relationship between the design and code aspects of our system.
Once our token library was set up, we could easily apply these tokens to various design elements. By selecting a layer or object in Figma, our plugin allowed us to browse through the available tokens and apply them with just a few clicks. This streamlined the design process, eliminating the need to manually input values and reducing the chances of inconsistencies or errors.
Moreover, as our design tokens were connected to the coded tokens, any updates or changes made to the coded tokens were automatically reflected in Figma. This synchronization ensured that our designs stayed up to date with the latest changes in the codebase, promoting a seamless and cohesive experience across our products.
In addition to creating and applying tokens, our Figma Studio plugin also provided a comprehensive documentation feature. This documentation feature allowed us to generate a living style guide directly from the token library, making it easy for designers, developers, and stakeholders to reference and understand the various design tokens and their intended usage.
Overall, using the Figma Studio plugin to create and implement tokens based on our existing coded tokens was a significant step in enhancing our design system workflow. It enabled us to bridge the gap between design and development, promoting consistency, efficiency, and collaboration within our team. With the power of Figma and our custom plugin, we were able to deliver high-quality, visually consistent designs while maintaining a strong connection to our underlying codebase.
Throughout the project, I maintained clear communication with the development team to address any design-related queries or challenges that arose during the process. This collaborative approach helped ensure a smooth transition from coded components to visually polished designs.
Overall, my work at Esri involved leveraging coded components and transforming them into visually appealing and functional designs using Figma, while closely collaborating with the development team to deliver a seamless user experience.
https://developers.arcgis.com/calcite-design-system/
