Figma Enablement
Convertiv is making the conventional design and development process more efficient by utilizing the power of Figma design systems and open-source automation tools.
Design tokens smooth out the design-to-development handoff. They can be easily integrated into diverse projects, including, but not limited to, public-facing WordPress sites, React Native applications, Drupal intranet sites, and secure private Java web applications.
Convertiv works with clients at each step in the design handoff. Our design operations process starts by standardizing Figma design files to take advantage of its organizational features and best practices. Then, we build automated pipelines and developer tools on open-source technologies, enabling teams to pull, validate, and integrate design tokens quickly. Lastly, we support development teams as they work to standardize on tokenized frontends across different frameworks and build clear, consistent, and valuable design documentation.
As Figma emerged as the dominant player in the application design market, Convertiv saw an opportunity to significantly improve our design-to-development handoff. Unlike the previous generation of tools, Figma designs are available through its web-native API as semi-structured data. Coupled with systematic approaches such as design systems, Convertiv realized we could build a tool to extract and transform design data into productivity gains for developers.
Convertiv has been using and improving this toolchain for years and decided to publish our tools as open-source to help other teams embrace the revolution.
The Handoff Figma plugin offers a user-friendly interface that allows designers to annotate Figma files with semantic meaning. This enables designers to convey the underlying structure of their designs directly within Figma. As a result, Handoff can efficiently extract the exact details developers require. This empowers designers to influence the export process by making key design decisions without needing to handle the token structure specifics themselves.
Handoff’s core tool is a typescript-based CLI, a developer tool for extracting, transforming, and using Figma tokens in your projects. This engine reads the Figma component structure via its Figma REST API, transforms that structure into various formats, and compiles consumable artifacts for development. The engine then transforms tokens into CSS variables, SCSS (with maps), and an AWS-style dictionary (conforming to the W3C token standard). Handoff has a hook API to allow developers to extend the transformers to meet their needs quickly.
Handoff can generate a beautiful static HTML web application that documents your Figma file's components. The documentation site is fully customizable and can be automatically built on each token fetch. Built on fast, secure, lightweight React tools, it can be hosted on any static web service or run locally on your development system.