Using Sketch with Framer

Learn how to use Sketch and Framer together to create interactive app prototypes.

UX tools help you communicate your product vision. Learn how to use Sketch and Framer together to create more interactive app prototypes and flesh out your designs. In this project-based course, LinkedIn Learning instructor Emmanuel Henri shows how to design an app to help an IT team manage users and assets and survey the company network. This is a complex UX design that shows where Sketch and Framer shine, and gives you a chance to see how design objectives are defined and translated into a finished product. Get an overview of the complete workflow, and then learn how to design your assets in Sketch and import them into Framer to add transitions, interactions, and animation. Plus, get tips for presenting your prototype to stakeholders and integrating feedback.

Introduction

• Prototyping workflow with Sketch and Framer
• Course prerequisites

1. Design an IT Management Tool

• Setting up tools and plugins
• Define UX objectives and stories
• Design users management, part 1
• Design users management, part 2
• Design users management, part 3
• Card design for users, part 1
• Card design for users, part 2
• Design IT assets management, part 1
• Design IT assets management, part 2
• Design network view, part 1
• Design network view, part 2

2. Sketch and Framer Workflow

• Import assets into Framer
• Define target groups or state
• Create flow in-between screens
• Add interactions to the application, part 1
• Add interactions to the application, part 2
• Micro-interactions and animations

3. Presentation Workflow

• Review objectives and UX
• Final prep stakeholders
• How to approach presentation and feedback

Conclusion

• Next step