![]() Next, import your assets from Photoshop into Framer Studio. Your Photoshop document must be open and saved when performing an import. These layers will be accessible in the code later via myLayers.doneButton, myLayers.dots, etc. For this product tour, I have grouped my layers by their function: things that have the same interaction should be grouped together), as you'll access things by their group name when you're working in Framer. ![]() When working with Framer, it is important to note that only grouped, visible Photoshop layers will be imported into Framer Studio. The Product Tour will consist of four steps: ![]() Initial Setup Create Assets in Photoshopįirst, create your assets in Photoshop. Play with the prototype on the demo page (webkit-based browsers-Chrome, Safari, etc-are supported). We’ll assume that we are creating a news feed app, in which updates from the user’s network are displayed in a timeline, while settings and additional options are displayed in a sidebar. In this post, I'll walk you through constructing an interactive prototype for a fictional iOS App’s Product Tour using Adobe Photoshop CC 2014 and Framer Studio 1.9.29. ![]() Framer.js and its accompanying ecosystem Framer Studio are great tools for composing, presenting and iterating upon interaction design. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |