Justinmind’s integration with Figma

Justinmind integrates perfectly with most vector design tools and allows to even go back and forth between those tools and Justinmind. One of the tools that work really well with Justinmind is Figma.

Copy and Paste SVG code

In order to bring any element, group of elements or artboards from Figma to Justinmind simply select them on Figma and select the right click option ‘Copy SVG code’. Then open Justinmind and select the main menu option ‘Edit – Paste’ to bring all the vector elements with the same structure and layer names as they were in figma. You can then select each individual vector element and modify it any way you want.

In a similar way, if you have any vector element in Justinmind created with the ‘Pen tool’, you can bring it to Figma for further editing. Right click on the vector element in Justinmind and select ‘Copy SVG code’, then open Figma and paste. The layer structure of the vector element created in Justinmind is kept in Figma.

You can go back and forth using Copy and Paste as many times as you need.

Adding interactions to Figma designs

Justinmind is specially powerful to make designs interactive and simulate web and mobile apps as realistic as the user needs to. Once you bring a design from Figma to Justinmind using the ‘Copy SVG code’, you can right away select any layer and add events to it.

If what you want is to simulate responsive elements, meaning, having one of the vector elements to fit the width of the entire screen for example, you’ll need to right click on the vector element and select ‘Path – Turn into – image’ first. Then, in the Properties palette, you’ll be able to set the size properties as percentages.

Making Figma input forms interactive

An easy way to take advantage of the integration between Justinmind and Figma is for making already designed input forms interactive for testing purposes. Bring your designed input form from Figma using the ‘Copy SVG code’. Then paste it in Justinmind and right click to the design of an input field. Select the option ‘Path – Turn into – Input Text field’. Launch the simulation and see how that design now works as a real input field but keeping the look and feel. You can turn any vector element in any of the pre defined input form fields in Justinmind.