This is an overview of how Handoff extracts tokens from the Figma RestAPI, how we build the token trees, and how you can use them.
Extracting Component tokens reliably from Figma is difficult. Presently, Figma has a design-focused structure, and it's easy to design things in Figma that don't map well onto web or native Components.
Handoff focuses on extracting tokens from a well-structured Figma library. We have published a starter library for you to copy and clone. Using this as a baseline will ensure a high-quality token export and a good foundation for application design.
This Figma file has been tested against the latest version of the library and we will maintain it alongside the handoff-app library.
Handoff uses the Figma Rest API to look for named Components in the library and canvas of your file. If Handoff finds a matching element, the agent scans through the file looking for known structures that correspond to particular kinds of Components. Handoff reads those structures into a transform layer and generates a rich JSON object for each structure extract. Handoff focuses on the key elements that construct component objects, paired with the metadata needed to make the data meaningful.
That JSON extraction is completed for all the ingestible elements and then is written out to the file system. We then treat this data like we would in a data pipeline, and execute a set of transforms on it. Each transform generates an artifact that can be used later. At present there are 3 transforms, though we have many more planned: