It is Abyss's goal to eventually support the use of AI tools to author Abyss code, either from Figma prototypes or from prompts. The set of tools available—and their relative rankings—are rapidly changing. As such, Abyss will always be evaluating which tools are serving us and our customers best.
The most tested tool is GitHub Copilot, though we are investigating others such as Figma AI, Supernova Forge, and Copilot Studio.
The strategy we use is for Abyss to provide training data while teams use that data with any AI/LLM they like. We hope this maximizes the chance that any chosen LLM will produce conforming Abyss code.
Design-to-code
Currently, the primary Design-to-Code tool to use with Abyss is Figma Code Connect. For more on this, see:
Other approaches have been experimented with by some teams for their own benefit. This generally involves creating a Figma plugin that sends select Figma design data and Abyss context to an LLM, generating code that aligns with Abyss standards. While teams are welcome to innovate, Abyss does not yet recommend a plugin that performs beyond what Code Connect offers.
Ultimately, Figma's own strategy for Design-to-Code involves hooking up an editor/IDE (VS Code, Windsurf, etc.) to Figma directly from the Figma Desktop app via its MCP server, where the developer will instruct the IDE to generate code for the selected nodes. See the Figma MCP Guide for more.
The enterprise is currently investigating how to only allow safe MCP servers to be used, so as of now, MCP is not an option, and its approval timeframe is unknown. When support for Figma MCP is available, Abyss will publish recommended settings and practices for optimal usage.
Prompt-to-code
Prompt-to-Code tools, where a text prompt triggers the creation of code, bypass the layer of reasoning about the Figma code and begin instead with the user's intent in the form of a prompt.
The key to enabling this is the presence of training materials, created directly from Abyss's own documentation. Not only does this training data document best-practice code patterns, it contains descriptions of the code's purpose as well.
Abyss provides LLM-optimized documentation to help AI tools understand and work with the Abyss UI library. See the LLM Documentation page for more details on available formats.