Importing Sketch UI elements as SVG vector files into Justinmind
Learn how to import Sketch UI elements as SVG vectors into Justinmind with the help of this tutorial. Download our Sketch plugin here and work dynamically between Sketch and Justinmind!
When you’re designing UI elements such as icons, checkboxes, radio buttons and buttons with Sketch, you might want to share your designs with your team or work on them in a different design tool. In this tutorial, you’ll learn how quick and easy it is to export all of your UI elements and groups to Justinmind to incorporate them into your prototypes.
- Go to Sketch and select the UI elements you would like to export to Justinmind.
- Once selected, go to the Export window in the bottom right-hand corner of the Sketch UI. Ensure that the SVG file option is selected from the format drop down and then click on the “Export Group” option beneath and save the elements in your folders. The elements will be saved as SVG vector files in your folders.
- Now, go to Justinmind.
- From the Basic widget library, drag an image widget to the canvas.
- Double click it to choose an image from your folders. Select one of the SVG vectors you saved from Sketch. Select open and tick the ‘Link to image file’ option and then click ‘OK’.
- Once you have the SVG vector on the canvas, you can customize its size and color in the Properties tab. You even have the option to set the original size of the image with the expand button in the general properties.
- To scale the image to size, press the shift key down as you resize with your mouse.
- If you make any changes to the imported elements back in Sketch, the changes will automatically show in Justinmind!
And that’s it! You can find more information about the export settings in Sketch here.