Design Mockups: Quick guide

Our Design Mockups tool makes it super easy for teams to collaborate on website and app designs in real-time. With seamless integration into popular platforms like Figma, it simplifies sharing mockups, gathering feedback, and managing approvals, ensuring that your design collaboration is both efficient and effective.

Dashboard overview and key functions

The Design Mockups dashboard offers a range of features to streamline design management and collaboration.

Key features:

1. View mode: Toggle between grid and list view for better navigation. The default grid view displays a scalable thumbnail preview of the designs linked to each page.

   

2. Status & sort filters: Organize mockups by status, alphabetically, or creation date.

   

3. Sharing capabilities: Share mockups instantly with your team for real-time feedback and collaboration.

   

Adding designs to projects

You can easily add designs from your computer, Figma, or file library and assign mockups to specific pages in your sitemap.

Key features

• Select from Figma, your file library, or local files for flexibility.
• Connect your mockups directly to the relevant sitemap pages.
• Upload and share files in PNG, JPG, GIF, or PDF formats.

For detailed steps on uploading and managing design files, check our complete guide on adding designs to projects.

Figma Integration

Our Figma integration simplifies the design process by letting you sync mockups directly from Figma to Slickplan. This eliminates manual uploads and keeps your designs always up-to-date.

Key features:

• Direct sync Figma files directly into your project
• Automatically update mockups when changes are made in Figma
• Easily assign synced mockups to specific sitemap pages

For more detailed information, see our guide on using Figma with Design Mockups.

Design preview & commenting

The design preview lets teams review and interact with mockups in real time, making feedback and collaboration easier.

Key features:

1. Zooming: Get a closer look at design details.

   

2. Search and filter: Quickly find specific designs or versions.

   

3. Sort: Organize mockups by criteria such as date or status.

   

4. Assign status: Track the progress of individual mockups with status labels.

   

5. Figma Comment Sync: Sync comments from Figma directly to the preview.

   

6. Drop pin commenting: Place comments directly on design elements.