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 ran—is 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.
In order to write Abyss code with Github Copilot in your IDE, you must do the following:
- Download the training data file for the platform you are writing for. (Web | Mobile).
- Open the file in a tab of your editor. This loads the file into the context for the Copilot session.
- Describe your intent in the Copilot Chat: "Using Abyss components, create a secondary button."
- Once answered, ensure the training data file was considered as a source.
- Review the generated code. Copilot is not exact, so ensure that the code makes sense to you.
Some tips for better results:
- Ask for smaller units of code: "Create a Link in the disabled state," instead of "Create a login screen."
- Components with no visual elements, e.g. hooks such as
useForm, may be missing unless explicitly requested. - Testing thoroughly, as well as checking the generated code against the docs, is still advised.