Design-to-FileMaker Automation Workflow

Translating a Figma design into a FileMaker layout is surprisingly time-consuming. Every object needs to be recreated manually, aligned carefully, and adjusted with pixel-level precision. For complex layouts, this quickly becomes repetitive work and significantly slows down development.

This project started from a simple question: what if the layout generation process could happen automatically?

The biggest challenge was that FileMaker does not provide a public API for injecting layouts externally. However, during experimentation, we discovered that FileMaker allows objects to be copied and pasted between layouts through the system clipboard. That became the entry point.

By understanding the clipboard contents, we found that FileMaker stores layout object data as structured XML. Once the XML structure and patterns became clear, it opened the possibility of generating layouts programmatically instead of building them manually.

The workflow connects Claude Code with Figma through MCP, allowing design metadata such as coordinates, component variants, dimensions, and styling information to be extracted directly from the design file. That information is then transformed into FileMaker-compatible XML through a custom generation tool. Finally, a clipboard injection script places the generated XML into the clipboard using the exact format FileMaker expects, allowing the layout objects to be pasted directly into FileMaker.

The result is a workflow where UI layouts can move from Figma into FileMaker with minimal manual work — removing repetitive placement tasks, reducing human error, and dramatically speeding up layout implementation.