Import a design from Figma
Turn a Figma design into reference pictures and ready-made checks, and sync them when the design changes.
What the import gives you
A design made in Figma already says what each screen must show.Import from Figma turns that design into a test: every screen becomes a reference picture on the timeline, with ready-made checks for what it shows.
There is no account to connect and no key to create.A small plugin inside Figma saves your design as one file, and GUI Test Studio picks that file up.
The idea in four steps
Choose
Tick the screens in Figma, or pick a prototype flow
Export
The plugin saves one design file
Import
GUI Test Studio finds the file by itself
Review
Keep the checks you want, then import
Add the plugin to Figma, once
- 1
Open Import from Figma
In GUI Test Studio, choose File, Import from Figma... (Ctrl+Shift+D), or click its button in the toolbar.
The window waits for your design and says what to do in Figma. - 2
Click Get the Plugin
Get the Plugin... opens the folder that holds the plugin.It is installed with GUI Test Studio.
- 3
Add it in Figma's desktop app
In Figma, open Plugins, Development, Import plugin from manifest... and choose the file manifest.json of that folder.The plugin is now in your Plugins list, for every design you open.
Export your design
- 1
Start the plugin
Open your design in Figma, press Ctrl+K and start GUI Test Studio from the Plugins tab.
- 2
Choose what to export
Tick the screens you want.If your design has a prototype flow, pick the flow instead: its screens come in order, with the clicks that lead from one to the next.
- 3
Click Export and keep the file in Downloads
The plugin saves one design file.Leave it in your Downloads folder: GUI Test Studio is watching that folder and opens the design within a second or two.
Review what will be checked
Before anything is added to your test, the window shows each screen with a box around every element it found, and says which check each one gets.
| What the design holds | The check it gets |
|---|---|
| A label, a title, a button's words | A Text Assert: the words must be on screen. |
| A value that changes, such as a date or an amount | A Dynamic Text Assert: a date must be there, whatever the day. |
| An icon, a logo, a picture | A Visual Assert: the element must look like the design. |
| A long paragraph or a large photo | Listed but not ticked: it is usually sample content. |
The checks of one part of a screen, such as its header or its form, travel together as one Group Assert.With Check the arrangement ticked, the group also checks that its elements stand where the design puts them.
| Choice | What it does |
|---|---|
| Build | The screens one after the other, or a prototype flow with its clicks. |
| Create | Pictures and asserts, or pictures only when you prefer to add the checks yourself. |
| Where it lands | At the playhead, or at the end of the test. |
| Check as a Picture / Check as Text | Switches the selected element from one kind of check to the other. |
| Design link | Optional: paste the design's address to open it in Figma from the test later. |
What lands on the timeline
Click Import.Everything arrives as one Scenario named after your design, so you can move it, copy it or delete it as a whole.
| On the timeline | What it is |
|---|---|
| Visual Reference | One picture per screen, five seconds each.They are also listed under Designs in Content Files. |
| Assertion | The checks of each screen, shortly after its picture starts. |
| Mouse Events | For a prototype flow, the click that leads to the next screen, aimed at the button the design links from. |
One undo step takes the whole import back.
The designer exports the flow "Sign in": Login, Dashboard, Settings.You import it and get three pictures, the click on Sign in, the click on the settings gear, and the checks of each screen.The day the app exists, the test clicks through the real thing and reports, element by element, whether it matches the design.
When the design changes
Designs move.When yours does, export it again from Figma, then choose File, Sync from Figma... in GUI Test Studio, or right-click the design's picture.
| What changed in the design | What a sync does |
|---|---|
| A text reads differently | The check expects the new words. |
| An element looks different | The check takes the new picture. |
| An element moved or changed size | The check follows it, and so does a click aimed at it. |
| An element is no longer there | Its check is removed. |
| An element is new | Not ticked: nothing new is checked unless you ask for it. |
A check you edited yourself is not ticked either, so a sync never overwrites your work without asking.The screen's picture always takes its newest version, and one undo step brings everything back.
Good to know
| Question | Answer |
|---|---|
| Does GUI Test Studio connect to my Figma account? | No.The plugin saves a file on your computer and the app reads that file.Nothing is sent anywhere. |
| Where will the element be on the real screen? | Anywhere.A design does not say where the app's window will stand, so these checks search the entire screen. |
| The app's fonts are not exactly the design's.Will the checks fail? | Design checks compare with a relaxed strictness for that reason.After the first real run you can accept the real look once from the Confidence Report. |
| Can I import a single element, such as a new button? | Yes.Imported where a recording is already shown, the design is placed over it, and you can move it where the element will be. |
To prepare a test from plain pictures of any design tool, see Test a feature before it exists.To accept the real look after the first run, see When the app changes on purpose.
Design in Figma
Test ready
Before the feature is built
Sync
Whenever the design changes
Still stuck?Tell us what you were trying to do, and we answer within one working day.Ask our team