Figma Code Connect for Mobile
Components on the UHC or Global Figma with Code Connect enabled may only be for the V2 version of the component. See the list below for supported components.
Figma Code Connect is a Design-to-Code tool that aims to scaffold out the code required to implement a Figma Design.
Code Connect is currently in alpha and availability for components is changing. We invite you to discuss any enhancements or limitations in our Github Discussion Topic.
Instructions
This demo video contains an overview of how to use Abyss with Code Connect.
-
Open the Figma file with the component you want to use and select the component. In dev mode, the Code Connect panel will be viewable in the side bar under "Recommended Code."
-
The button "Explore component behavior" will allow you to see the component in a preview mode. You can change available props and variants from this panel.
Due to Figma limitations, not all possible combinations will be available through Code Connect. Check the Abyss documentation for the full list of available props and variants.
Slot limitations
At this time, code connect does not support slots. If you need to use a slot, you will need to manually add it to the code after copying it from Code Connect. The recommended code section does not show the actual slot element's code.