Figma Shaders and AI Code Generation Limitations

Limitations of Native Figma Shaders and Figma Make

Figma's new shader integration allows for applying effects like lens distortion directly to frames, but the system lacks precision when modifying existing community shaders. Requesting adjustments via the built-in agent often results in the loss of secondary properties, such as chromatic aberration or edge blurring, because the AI recreates the shader rather than patching the existing logic. Furthermore, the 'Figma Make' feature fails to provide a one-to-one translation of these effects into functional HTML, CSS, and JavaScript. It frequently struggles to maintain the visual fidelity of the shader while attempting to add interactive elements like parallax movement, often requiring multiple manual corrections that still fall short of the original design.

Leveraging External AI Agents for Web Implementation

Rather than relying on Figma's internal tools for production code, developers should use external AI agents with access to the Figma MCP (Model Context Protocol) server. By providing a direct link to the Figma selection and explicitly instructing the agent to reference the existing shader properties rather than generating new ones, developers can achieve a near-perfect translation of the effect into a web environment. This workflow allows for the addition of custom control panels in the browser, which provides better fine-tuning of shader parameters than the current Figma interface.