MockFlow updates
MockFlow updates
mockflow.com

Add and refer live code and videos with the new Snippets powerup

 

New

 

 

Screenshots1.png

Facilitate easier hand-offs to developers by adding snippet examples like JSfiddle, Codepen, Youtube videos, CSS styles and also any HTML embeds that can be useful in implementation of the UI.

Also pinpoint snippets to refer the exact location of the UI that is being referred to. For example attach a JSfiddle signup button code animation to the related area inside the wireframe.

Following snippets are supported as of now

Screenshots2.png

Enrich your wireframes with live examples, so that developers will have a better insight regarding the design.

For more information and installation visit this link.

MockFlow+Zoom = Conduct virtual UI meetings

 

New

 

 

Screenshots_3.png

Now super-charge your virtual UI design meetings by combining MockFlow with Zoom. With this Zoom add-on, project members can now instantly create and join Zoom meetings for discussing their UI blueprints without leaving the editor.

After installing the powerup, you can conduct Zoom meetings with the following steps:

  • Open Zoom powerup, click "Create meeting", this will instantly create a new meeting and open Zoom window.
  • After meeting is created, Email and browser notifications are sent to project members
  • Members can now join the meeting directly from the notification link or from this powerup

For more information and installation visit this link.

Record UI demo videos powered by Loom

 

New

 

 

2.png

Communicating UI ideas for remote teams brings more clarity. This new Power-up helps to record and send video messages of your UI concepts. It is also great for creating explainer videos, demonstrating UX workflows and presenting UI designs.

Powered by Loom.com integration, now you can instantly record such UI demos without leaving your wireframe editor and also share it with your team.

Recording options include only screen or screen along with face time. After recording, video can be submitted as a wireframe comment or shared via email.

For more information and installation visit this link.

Power-up Shortcuts - Now access related powerups at the right places

 

New

 

 

p.png

Power-ups are mini-apps that are installed within the MockFlow editor for more features. To start with, this process is not straight-forward as user has to navigate to the MockStore from the editor and then find and install Power-ups before accessing them.

This new release simplifies the above process and makes power-ups more visible and easily accessible right where you need them. With shortcuts no installation is required and it make Power-ups feel as a natural extension of the related functionality. It enhances common operations in the editor like upload, export with additional options, thanks to Power-up shortcuts.

As of now, Powerup Shortcuts are available in the following areas:

r.png

  • Upload images:

    • Stock Photography
    • Web image search
    • Google Drive Import
    • Dropbox import
  • Text settings panel:

    • Spell checker
    • Text Translation
    • Dummy data import
  • Specs module:

    • Design Tokens
  • Export Options:

    • Mockup Generator
    • Export annotation
    • Heatmaps

More such Power-ups will be actively integrated within the editor's UI in a non-obtrusive way.

Note: Power-ups are available only for yearly subscriptions.

Turn UI designs to product mockups with Frames Powerup

 

New

 

 

Screenshot 2021-05-19 at 8.53.18 AM.png

Created a high-fidelity UI design for your product with MockFlow ? Now preview your UI inside different "frames" and export as image.

We are happy to release a new Powerup to the MockStore called "Frames". Use "Frames" to generate awesome UI mockup screenshots by placing your user interface designs in vivid backgrounds so that it feels more real. Switch and preview between different frames instantly to find what matches your UI design and purpose.

Use Frames to

  • Pitch your new UI design with a better background
  • Generate mockup screenshots of your upcoming UI
  • Use your framed UI in brochures, blog, slideshows

This initial release already comes with over 30 beautiful backrounds in over 5 categories like iMac, laptops, iPhone, Android and Apple Watch. More frames and categories are coming soon.

For more information, check here.

Bringing centralised Two-Factor Authentication for teams

 

New

 

 

2fa.png

In order to meet enterprise standards for security compliance, MockFlow now brings Two-Factor Authentication (2FA) feature for teams to secure their login. 2FA as the name suggests is essentially a two step verification process during account login. When 2FA is enabled, in addition to the regular login (through direct credentials/Google Login/SSO), a verification dialog will appear asking for a 6-digit login code. This login code is sent to the user's email address.

The idea behind 2FA is that even when user's login credentials are compromised, the extra verification step will prevent un-authorized bots and users from accessing account.

2FA can be enabled for all MockFlow apps which includes web app, desktop apps for mac and windows and also integration apps.

Also 2FA can be centrally managed for all team members from admin dashboard by the license administrator. Two-Factor Authentication feature is available only for TeamPack yearly and Enterprise plans. For more details on MockFlow's security procedures and features visit this link.

New! Safeguard .wire design files with password protection

 

New

 

 

Macb6eb5e4080010a636bb024829c10891619622519240.png

Safeguarding your UI blueprints is essential whether the data is online or offline. At MockFlow, we always ensure security is given top-most priority for protecting confidential UI design data using enterprise standard features like SSL, SSO, private by default permissions. For more information checkout our security procedures. While these are for cloud files, security is equally important when creating and sharing offline design files in .wire format used by our application.

The latest MockFlow Desktop app for Windows and Mac has a new feature that lets users protect .wire design files with a password. Password-protected .wire files are encrypted with AES-256 bit algorithm that is virtually unbreakable by a hacker unless they know the private key.

Now easily share your .wire files through any communication channel like email, chat or file sharing services with peace of mind. As long the .wire file is encrypted, nobody can open the file without the password.

This feature is available only for TeamPack yearly and Enterprise plans starting today. Note: Only the latest desktop app versions can open encrypted files. Upgrade now.

Now localize your UI with i18n internationalization powerup

 

New

 

 

Screenshot_1.png

Designing UI based on text content is important especially when the app or website is going to target users across the globe with localization. String lengths varies from one language to another, therefore localization should be part of the wireframe stage itself to design UI layouts that accomdates different locales.

We are excited to introduce "UI Internationalization" Powerup to MockFlow as a must-have addon to create, translate, and manage UI strings for different languages. It not only helps in the localization of UI but also provides a design perspective by previewing locale strings instantly in your UI design. This will allow translators to work closely with UI designers to decide on the best text for that language that suits the UI layout.

The i18n powerup is designed for managing multiple languages at once with its simple yet powerful interface. After localization, i18n resource bundles can be generated in json format which is supported in multiple UI application frameworks.

Some of its features include:

  • Auto sync UI strings from your wireframes including HTML text
  • Create custom strings that are not in wireframe
  • Preview language in wireframe instantly
  • Uses Microsoft Bing Translate API to optionally assist in translating strings
  • Customize i18 resource bundle generation to selected languages
  • Universal search for looking up strings

Get UI design approvals within WireframePro

 

New

 

 

design_collab_thumb.png

Designs are always subjective and evolves best when there is feedback. Lets for example take a designer wireframing a "signup page" for a business app. The designer will typically create different variations of the signup page and submit it to stakeholders for review. This whole process is cumbersome and undocumented when done via chat or email. Here is where this powerup steps-in, as it streamlines the entire design review process in a visual way and all without leaving the editor.

  1. Upload design variations - 2. Receive feedback - 3. Get the best design approved.

The Approvals powerup helps to make UI decisions faster by improving the review process. Create boards for each design item like logos, background, UI layout…, upload design variations to the boards and then get feedback from project members. Based on review, upload new variations and get approvals.

  • Organize design items into boards
  • Compare variations with different modes - side-by-side, overlay and diff
  • Annotated comments that can be pointed in the design
  • Different approval stamps like Approved, Rejected, Needs work…
  • Upload custom images or directly add UI drawings from wireframepro
  • Export all approved design items in a single PDF for documentation

For more details and installation, visit this link.

New Powerup to markup UI designs and screenshots

 

New

 

 

2b2e3fde-ba4d-4116-9fa2-e5b039e70900.png

More than comments and descriptions, it is essential to convey the details of an image like screenshots or UI designs visually. This helps viewers to identify the context of the illustration quickly. Today we are releasing a new Powerup that allows you to do precisly the above mentioned in a far better way.

Introducing, Markup - an AnnotatePro powerup that allows you to describe your UI mockups with interactive annotations.

Use Markup to:

  • Annotate wireframes with over 20 markup components
  • Create interactive spots over screenshots and wireframe with text,images,video…
  • Hide sensitive content in screenshots and highlight important areas in UI
  • Use Sticker Store to access a wide library of annotations like for example: approval stamps

For more details and installation, visit this link.