PIES Studio 1.9 · Documentation
PIES Studio can turn frames from a Figma file into screens in your application. You connect Figma once in the Integration Center, paste a link to a file or a frame into Build with AI, choose the frames you want, and PIES builds a screen for each one, with a theme taken from the design's colours and fonts. The screens open in the editor and in the preview like any other screen, so you can bind them to your tables and add events afterwards.
This page covers connecting Figma, what an import produces, and what to expect when a design does not map one to one onto PIES.
Open the Integration Center from the workspace menu and find Figma under Design. There are two ways to connect:
The card shows the Figma account that is connected. Disconnect removes the token.
The one-click sign-in needs a Figma OAuth app. In Figma, go to Developers → My apps, create an app, and add the redirect URL shown on Admin → Figma in PIES Studio (it ends in /figma/oauth/callback). Enter the app's client ID and secret on that admin page. Until an app is registered, users connect with a personal access token.
Figma import is switched on per installation. When it is off, the Figma card and the import option are not shown.
In Build with AI, choose Import from Figma from the attach menu, or simply paste a Figma link into the chat. A link to a file lists every page and frame; a link to a frame pre-selects that frame.
Click Import. The chat shows progress for each frame, then lists the screens it created. Select a screen to open it.
Each frame becomes one screen made of PIES sections: a hero or page header, rows of KPI tiles, cards, a table, a form, a detail view, charts, tabs, a filter bar, text and call-to-action blocks. Text is kept verbatim from the design. A table in the design becomes a PIES table with the design's column headings; a group of labelled inputs becomes a form with those fields. Where a frame's structure is ambiguous, PIES AI looks at a rendering of the frame to decide, and tells you in the chat which parts it was unsure about.
Screens are not bound to data yet. Ask PIES AI in the chat to bind a table or a form to one of your tables, or do it in the editor.
PIES screens are built from a fixed set of sections so that they render the same in the editor, the preview and the deployed application. A frame with more than eight distinct bands is compressed into eight, and a very dense frame is simplified. Decorative illustrations, overlapping layers and prototype interactions are not imported. If a screen does not look right, select it and ask PIES AI to redesign or adjust it; only that screen changes.
Private AI models without image support import the design from its structure alone. The chat says so, and Match closely behaves like Adapt.
If you have a screenshot but no access to the file, choose I can't access Figma in the import dialog and attach the image. PIES AI builds one screen per image from what it sees. The result depends on the model's image support and is usually less precise than an import from the file.