MockFlow updates
MockFlow updates
mockflow.com

Now Build Your Own Component (BYOC) in MockFlow

 

New

  

file-48A4lwDzWK.png

BYOC stands for "Build Your Own Component". It is essentially a component by itself that allows to create a new elements from scratch by coding in HTML/CSS.

It provides the following main benefits:

Create custom components that is possible only with HTML/CSS

Creating a coloured shadow, or a complex polygon or a 3D transform is not possible with the existing components available in MockFlow. But by using BYOC, you can bring any css component that you want it to be part of your wireframe. Just copy-paste the code inside the BYOC editor for it to display.

Screenshot 2022-01-13 at 3.18.23 PM.png

Visual editing of component

Once created, BYOC can be used by non-coders for making superficial changes with its WYSIWYG visual editor. Designers can change text, replace font family and also try different images easily without touching its code

Screenshot 2022-01-13 at 3.21.06 PM.png

Bridge designer-developer workflow with first-class Tailwind support

This is one of the points that makes BYOC quite useful as a feature to connect developers with designers in your team. If your team already has a design system of Tailwind components, then they can be directly be imported as BYOC components inside the wireframe. So designers spend less time re-creating the UI to make changes. Also the imported Tailwind components can be modified inside the editor with live preview.

Screenshot 2022-01-13 at 3.28.27 PM.png

Generate specs

Since BYOC is written in pure code, when the wireframe is shared with your clients or developers, They can inspect BYOC components in review mode to generate specs. This makes hand-off smooth and implementation faster.

MockFlow benefits

As BYOC by itself a MockFlow component, it can be resized, moved, duplicated, linked, exported, and also saved as custom component part of your UI packs.

Screenshot 2022-01-13 at 3.46.55 PM.png

That's not all, we anticipate more interesting features coming soon to BYOC, like native support of reactjs and vue based components in BYOC2.

BYOC feature is available to all paid plans starting today.

Introducing live embed for UI drawings

 

New

  

Screenshot 2021-12-27 at 10.24.57 PM.png

We are happy to conclude 2021 with another big feature release. The latest version of MockFlow introduces 'live embeds' for wireframes with preview links. Just like how YouTube videos can be embedded anywhere in webpages, blogs and portals, 'Live embeds' allows users to embed UI drawings.

It is called 'live' for a reason because this embed updates in real-time when changes are made to the project. It also comes with several other functions as listed below:

  • Embeds can be secured with Password protection

Screenshot 2021-12-27 at 9.44.24 PM.png

  • Option to show page listing within embed

Screenshot 2021-12-27 at 9.46.06 PM.png

  • Option to set default zoom for the embed. This helps to set an optimal view based on wireframe page size and your embed frame size.

Screenshot 2021-12-27 at 9.49.34 PM.png

  • Full screen mode - Click full screen icon to enlarge embed to occupy the entire screen

t1.gif

How it works?

  1. Click menu option in wireframe project and select 'Create link'
  2. Or 'View link' if link is already created
  3. After link is created, select 'Get embed code'
  4. Tweak embed options and copy the code
  5. Paste code in your webpage, portal or online document site like Notion.so

Wish all of you a very happy and prosperous 2022. We also hope to start the new year on a big note with many new features to keep track on our mission to make product design accessible for all.

Launching In-image discussions for design files

 

New

  

Screenshot 2021-12-09 at 11.52.19 AM.png

Collaborating on creatives form one of the key steps in designing a product. This is where design files in MockFlow helps by centralizing important assets, iterating designs with versions and getting approvals. Today's big update for image files brings one more important feature which streamlines asset discussions with your team or clients.

Now add live in-image feedback and discuss with threads right on top of the image. Bring location and personality to your discussions using comment mode for Images. With user-profile based comment markers, get context of the area referred to and also the person who started the discussion. Everything is real-time so the whole user-experience of in-image discussion mimics an in-person meeting, which is great for remote collaboration.

Screenshot 2021-12-09 at 12.33.01 PM.png

Here are the highlights:

  • Comments are unobtrusive as they are shown only in comment mode
  • Notifications are sent to collaborators via browser, email and in-app
  • Each version in a design file have their own comments
  • Bubble indicators in markers show the number of comments in each thread
  • Markers can be moved and placed in a different location

Turn good design into great design with contextual discussions.

This feature is available only for image file formats now. However it will be soon available for videos too.

Android 12 component UI pack now available in MockStore

 

New

  

Mdaeb7bb443852365c2546af5a3f055171637821950838.jpg

The Android version 12 UI pack with numerous components and screens is now available in MockStore. Now mockup apps for the latest Android with ease.

It includes widgets, basic components, notifications, frames, icons and template screens.

Android 12 introduces a major refresh to the operating system's Material Design language branded as "Material You", which features larger buttons, a design language, and a new style for home screen widgets.

MockStore Link

Secure your wireframe project links with pass key

 

New

  

Screenshot 2021-11-23 at 4.25.51 PM.png

We understand the importance of sharing UI ideas with an URL. Since it is easy to share, viewers need not signup and best of all it can be hyperlinked inside documents. Which is why the "create project link" in MockFlow dialog box offers many options for a better viewing experience like allowing export access, anonymous comments, default project view mode. Also the user can enter a custom URL for the project.

Today's update provides an additional option that lets project owners and admins to secure their project link with a pass key.

How it works

  • While creating or editing a project link. There is now an option called "Protect with key". On enabling it, you can type-in a pass key for that link.

  • Now after saving, whenever the project link is opened, it will ask for the pass key for viewing the project. Incorrect pass key will throw permission denied error.

  • Pass key can be changed any number of times for the same project link.

  • There are no conditions for the pass key. So the user can secure with an easy or strong key based on their security preference.

Screenshot 2021-11-23 at 4.51.29 PM.png

Although it may not be as secure as adding members to the project. The "Protect URL with key" feature is a very useful option just like encrypted PDFs giving a security wall for your public facing UI idea. Also we are sure clients will appreciate it as they need not have a MockFlow account to access the project.

So share your UI idea URLs in email, chat, forum, freelancing website with pass key protection. Incase you feel the pass key is compromised, it can be changed all in the cloud with affecting the original URL.

Note: Passkey protection of project links is a paid only feature which is not available for the free Basic plan. Upgrade to access.

Example

URL: https://wireframepro.mockflow.com/view/foodrecipeapp

Psst.. the key is: keytest21

Tip: Not a good practice to share the key along with the URL. It is best to share them in separate messages or different mediums.

Know CSS? Now style wireframes with css code

 

Improvement

  

Screenshot 2021-11-15 at 8.49.43 PM.png

We are super excited to release a new feature for adding custom css code to wireframe components. This change brings endless possibilities with which you can style your wireframes just like your real website or app.

Screenshot 2021-11-15 at 9.07.13 PM.png

Simply type-in or copy-paste your css code to create a text gradient, 3D transform, custom shadow or any style that CSS supports. Custom CSS code is faster than GUI based settings panel and is highly configurable.

In this release, the following components include support for CSS - rectangle, button, image, label and text. Support for more components is coming soon.

.TextGradientCSS {

background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

Benefits

  • Designers will find it faster to design with direct CSS code
  • Ability to design components with styles not found in settings panel
  • Developers can export CSS code using specs mode for faster handoff
  • CSS code can be added to existing wireframes
  • This feature is component based, so it is saved with components and UI packs

Note: Custom CSS code is a paid only feature not available to Basic plan. Upgrade to any paid plan for access.

🎉 📉 Introducing analytics for design space

 

New

  

Screenshot 2021-10-29 at 8.24.48 PM.png

Today's big update to MockFlow provides analytics for design space. If you are new to MockFlow, DesignSpace is a fresh way to create, organize and share product design work. It provides a complete product design experience by bringing teams, assets and tools together. Which means there is lot of data involved in a space in terms of files, projects, actions and counts. This is where analytics for space helps by providing stunning visualizations of this data to show important insights.

Some of these insights included in this update are:

  • Project type count
  • Member type graph
  • Top wireframe projects
  • Design files by approval status
  • Design files by type
  • Top revised files
  • Embeds usage by functionality
  • Top creators in space

More insights are in the works which will be released in future updates.

Benefit from space analytics to know the progress of your product's design stage, learn how various members of your team contribute to your space. Track your space data for better understanding.

Screenshot 2021-10-29 at 8.50.56 PM.png

How to:

Space analytics can be launched by clicking the chart icon next to the search box inside space. And also from settings menu.

Note: Space analytics is available only for users with "Product design" plan.

Updated Chart components with 8 types in regular and sketchy styles

 

Improvement

  

charts.png

The simple chart components that are currently available in MockFlow provide quick and basic visualization. However they have no labels and legends. And they are also limited in styling and types.

Today's update provides a complete set of new chart components with advanced capabilities and styling. Also they come in two different styles - regular and sketchy.

Both styles include:

  • Easy coloring
  • Grid option
  • Legends
  • Labels
  • Sketchy properties
  • Font styling

All the new charts, retain the same ease of entering data of the simple charts.

Now wireframe your dashboards and analytics UI layouts faster with the new chart components. And choose your chart style whether outline, high-fidelity or hand-drawn.

Included charts:

  • Horizontal bar chart
  • Vertical bar chart
  • Area chart
  • Line chart
  • Pie chart
  • Radar chart
  • Scatter chart
  • Bubble chart

Here is sample dashboard with sketchy styled charts. View here.

New! MockFlow plugin for Adobe Photoshop - collaborate on product assets

 

New

  

Screenshot 2021-10-05 at 10.02.55 AM.png

We are happy to announce our new MockFlow plugin for Adobe Photoshop. It has been approved by the Adobe Team and is now available in their marketplace.

With the introduction of new "design spaces" (aka workspace for UI design) in MockFlow, collaborating on creative assets has become one of the key features.

This plugin simplifies the workflow of adding design files to MockFlow by allowing designers to directly send their source and exported formats of their Photoshop files to the target space.

To upload, use the plugin to signin-to MockFlow and select the appropriate design space (aka workspace) . After the first upload, subsequent versioning for the same file can be created by the designer.

Uses :

  • Sharing - File is auto shared with members of the design space
  • Context: Keep all important assets of your product design in one place
  • Deliverable: Both source and exported files are stored for easy handoff
  • Approval: Review designs and set approval status
  • Versioning: Create major version points of your Photoshop file
  • Comparison: Compare files with side-by-side, reveal and overlay modes.
  • Feedback: Inline commenting of files [coming soon]

2d3c80da-92c1-4fa2-8008-e4e7023bd168.png

Design in Photoshop, collaborate in MockFlow

Install plugin from Adobe marketplace

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.