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.
Next tutorial> Set up Tooltips in your interactive wireframes
Related Posts
- How to create a manual countdown clock in your interactive prototypes ( January 13, 2017 )
- Prototype Templates Vs Masters: the differences ( December 22, 2016 )
- How to create an expandable and collapsible grid in your web wireframes ( December 1, 2016 )
- How to create a drop-down menu in your web wireframes ( November 11, 2016 )
- How to create a price slider with interactive elements in your web wireframes ( October 27, 2016 )
- How to create a before and after image slider in your prototypes ( October 14, 2016 )
- How to create a confirmation pop up in your interactive mobile app prototypes ( September 30, 2016 )
- How to design an automatic slideshow in your mobile prototypes ( September 16, 2016 )
- How to create a countdown clock in your interactive prototypes ( September 9, 2016 )
- Create a screen flow validation using variables in your mobile prototypes ( September 2, 2016 )
- Create a product walkthrough in your mobile app prototypes ( August 26, 2016 )
- How to simulate an iOS passcode screen ( August 19, 2016 )
- How to simulate a sortable list using drag and drop in your interactive wireframes ( July 13, 2016 )
- How to add effects to your UI prototypes ( July 11, 2016 )
- How to create an interactive list with multiple tabs using table widgets ( July 1, 2016 )
- How to create a content list with multiple tabs in your prototypes ( June 15, 2016 )
- How to create a contact list in your interactive mobile app prototypes ( May 27, 2016 )
- How to create a loading animation using variables in your prototypes ( May 12, 2016 )
- How to create an input form with required fields and placeholders in your prototypes ( May 5, 2016 )
- How to design an advanced price slider in your interactive prototypes ( April 29, 2016 )
Customer
Support Portal
Community
Answers
Tags
Categories
- Real App Prototyping
- API and SDK
- 3rd Party Integrations
- Forms and data lists
- Events
- Beginner
- The Workspace
- Dynamic Panels
- UI Elements and Libraries
- Advanced
- Reuse and Apply Global Changes
- Build an Interactive Wireframe
- Simulate and Export
- Expert
- Teamwork
- Share and Get Feedback
- Conditions and Variables
- Set Value and Calculations
Comments are closed.