How to customize SVG vectors in your interactive prototypes
Learn how to customize the properties of your SVG vector files in your prototypes with the help of this tutorial.
In this product release, we updated our SVG vector features so that our users can change the color of SVG files in their prototypes and make them even more personal! To learn how to change the color of your SVG vector files, try reproducing the below tutorial, using change style events.
You can display the HEX color code of your selected SVG component by hovering over the color drop down in the top menu bar and a tooltip with the HEX code will appear:
You can download the example below here.
Customizing SVG vector files in your prototypes
1. Create a new iPhone 6 mobile app prototype and from the assets folder, open both SVG files in Justinmind. (We’ve provided the SVG files for you, but these steps will work with any other SVG file).
2. Place the ice cream scoop in the top center of the screen and the cone below it, to reproduce our example of an ice cream cone.
3. Drag a Text box widget onto the screen and place it above the ice cream scoop. Type “Create your Ice cream” into it. This will be your app’s header.
4. Drag another text box onto the screen and place it at the very bottom of the screen. Type “Select your favorite flavor and enjoy!!” into it.
5. Drag Ellipse widgets to the canvas and place them in the space between the cone SVG file and the bottom text box. Add as many as you wish, depending on how many colors you would like to the ice cream scoop to switch to.
6. Resize them to match our example. Add a background color to each, from the Properties tab. This will be the color that the ice cream scoop switches when the ellipse is tapped upon simulation.
7. Select the first ellipse and go to the Events tab. Add an ‘On Tap’ + ‘Change Style event’, selecting the ice cream scoop SVG image as the component to change the style of.
8. Below, tick Color and change the color to that of the corresponding ellipse. Click OK.
9. Repeat steps 11 & 12 for each ellipse, changing the color accordingly.
And that’s it! Click ‘Simulate’ to see and interact with your prototype. Click (if on a desktop device) or tap (on mobile) on any of the ellipse widgets and watch as the color of the ice cream scoop changes color.
Comments are closed.