Composables to Code

About this plugin

Quickly export a node hierarchy as composables with a customizable mapping for your design system.

This plugin isn't focused on generating pixel-perfect code that mirrors everything Figma offers.

Instead, it's designed to save you from the repetitive task of constantly writing Column, Row, Text, ...,

and renaming components or variables to match your design system in code.

Currently Supported Features

1. solid colors on texts, borders and backgrounds
2. simple texts with one styling
3. Row, Column, Box, Text, and FlowRow nodes
4. box nodes as a fallback for icons or images
5. baseline alignment of texts
6. weight(1f) modifier on child nodes of Row or Column
7. fixed sizing modifiers
8. mapping of local variables (only paddings)
9. mapping of text and color styles
10. retain the original name of the nodes as a comment

Bugs or Feature Requests?

You can either leave a comment

or write an email to [email protected].

If you encounter any bug, please attach a *.fig file as a reference.

Source: https://github.com/lets-prescribe/composables-to-code