I’m working on a new Android project where I want to use Figma designs with the Relay plugin for Jetpack Compose. Everything was going fine until I hit a roadblock with importing design tokens.
I have a design_tokens.json file that was exported from my Figma project. When I try to import this file into Android Studio to generate the Compose theme, the import process fails. The IDE shows errors and can’t seem to process the styling information properly.
Has anyone encountered similar issues when trying to bridge Figma styles with Compose theming? I’m not sure if this is a plugin version issue or if I’m missing some configuration step. Any suggestions on how to troubleshoot this would be really helpful.
u should def check if your figma tokens r in W3C format - relay can b super picky about that. had the same issue last month with my tokens stuck in the old format. regenerated them using the latest tokens plugin and that fixed the import.
I faced a similar problem recently with Figma design tokens and the Relay plugin. The crux of the issue usually lies in the JSON structure of the exported file. Relay requires a specific format that often differs from what Figma provides. Inspect your design_tokens.json for special characters or whitespace in token names, as these can cause silent failures during the import. I found that renaming tokens to camelCase and removing any problematic characters rectified the issue for me. Additionally, ensure that you’re using a recent version of Android Studio, as older versions might struggle with certain token configurations.
It seems you’re facing a compatibility challenge with the design tokens format. I encountered a similar issue recently; the Relay plugin can be quite particular about the JSON structure. Typically, Figma exports tokens in a way that doesn’t align perfectly with what Relay expects.
My recommendation is to inspect your JSON file manually for syntax errors or unsupported token types, which can hinder the import process without giving a clear error. Additionally, intricate nested structures or custom properties from Figma might not export correctly.
Start with a simplified test file containing only basic colors and fonts to check if this can be imported successfully. If it works, gradually reintroduce more complex tokens to pinpoint any potential issues. Lastly, ensure that both plugins are updated to the latest versions, as recent updates have addressed various token import issues.