Catalog / Marvel UI/UX Design Cheatsheet
Marvel UI/UX Design Cheatsheet
A comprehensive guide to using Marvel for UI/UX design, prototyping, and collaboration. This cheat sheet covers essential features, keyboard shortcuts, and best practices to streamline your design workflow and create interactive prototypes.
Workspace Basics
Navigation
|
Dashboard |
Home screen with project overview, recent activity, and quick access to projects. |
|
Projects |
List of all your Marvel projects. Create, edit, and manage projects here. |
|
People |
Manage your team members and collaborators. |
|
Account Settings |
Configure your profile, billing information, and security settings. |
|
Integrations |
Connect Marvel with other tools like Sketch, Jira, and Slack. |
Project Setup
|
Creating a New Project |
Click the ‘New Project’ button and choose a project type (e.g., iOS, Android, Web). |
|
Project Settings |
Configure project name, device type, orientation, and resolution. |
|
Adding Screens |
Upload existing screen designs or create new screens directly within Marvel. |
|
Organizing Screens |
Drag and drop screens to arrange them in the desired flow. |
Basic Gestures
|
Tap |
Simulates a screen tap interaction. |
|
Swipe |
Simulates a swipe gesture across the screen. |
|
Double Tap |
Triggers an action upon a double tap. |
|
Long Press |
Activates an action when the screen is held down. |
Prototyping Features
Hotspots
|
Creating Hotspots |
Draw rectangular hotspots on your screen to define interactive areas. |
|
Linking Hotspots |
Connect hotspots to other screens to create navigation flows. |
|
Transition Effects |
Choose from various transition effects (e.g., slide, fade, push) to animate screen transitions. |
|
Gesture-Based Transitions |
Set up transitions based on gestures like tap, swipe, and long press. |
|
External URLs |
Link hotspots to external websites or specific URLs. |
Transitions & Animations
|
Types of Transitions |
Marvel offers transitions like |
|
Customizing Transitions |
Adjust the duration and easing of transitions for smoother animations. |
|
Smart Transitions |
Automatically animate elements between screens based on their position and properties. |
|
Adding Microinteractions |
Use short, subtle animations to provide feedback and enhance the user experience. |
Interactive Components
|
Fixed Headers/Footers |
Keep headers and footers fixed on the screen while scrolling through content. |
|
Overlays |
Create pop-up windows or modal dialogs that appear on top of the current screen. |
|
Scrollable Content |
Make specific areas of the screen scrollable, allowing users to view more content. |
|
Input Fields |
Add interactive text input fields to simulate form interactions. |
|
Video and Audio |
Embed video and audio files into your prototype. |
Collaboration & Feedback
Sharing & Permissions
|
Sharing Prototypes |
Share your prototype with team members, clients, or stakeholders via a shareable link. |
|
Setting Permissions |
Control who can view, comment on, or edit your prototype. |
|
Password Protection |
Add a password to restrict access to your prototype. |
|
Public vs. Private Sharing |
Choose whether to make your prototype publicly accessible or keep it private. |
Feedback & Comments
|
Adding Comments |
Leave comments directly on the prototype screens to provide specific feedback. |
|
Replying to Comments |
Respond to comments and engage in discussions with collaborators. |
|
Resolving Comments |
Mark comments as resolved once the feedback has been addressed. |
|
Email Notifications |
Receive email notifications when new comments are added or changes are made to the prototype. |
User Testing
|
Creating User Tests |
Set up user tests to gather feedback from real users. |
|
Defining Tasks |
Define specific tasks for users to complete during the test. |
|
Analyzing Results |
Analyze user testing data to identify areas for improvement. |
|
Heatmaps and Clickmaps |
Visualize user interactions with heatmaps and clickmaps. |
Advanced Features
Marvel API
|
Accessing the API |
Use the Marvel API to automate tasks and integrate with other tools. |
|
API Endpoints |
Explore the available API endpoints for managing projects, screens, and users. |
|
Authentication |
Authenticate your API requests using an API key. |
|
Use Cases |
Automate prototype updates, integrate with project management tools, and more. |
Plugins and Integrations
|
Sketch Plugin |
Sync designs from Sketch to Marvel with the Sketch plugin. |
|
Adobe XD Integration |
Import designs from Adobe XD into Marvel. |
|
Jira Integration |
Link Marvel prototypes to Jira issues. |
|
Slack Integration |
Receive notifications in Slack when comments are added or changes are made to your Marvel prototypes. |
|
Microsoft Teams Integration |
Integrate Marvel with Microsoft Teams for collaboration. |
Offline Prototyping
|
Marvel iOS and Android Apps |
Use the Marvel iOS and Android apps to view and test your prototypes offline. |
|
Downloading Prototypes |
Download your prototypes for offline viewing. |
|
Testing Offline |
Test the prototype on device, without an internet connection. |