MockFlow updates
MockFlow updates
mockflow.com

Powerups are now standalone in design space

 

New

  

nn.png

Powerups in MockFlow help to extend your wireframe ideas onto other stages of product design. Thus, so far to create a Powerup project, it requires an existing or new UI drawing. While this is great for having deeper integration between the wireframing tool and powerups, it might not be required in all cases.

For example, a product manager would want to create a Powerup project like SiteMap or an Agency wants to do a brand guide for their client without attaching it to a Wireframe. Today's update lets you do just that.

Introducing "Standalone Powerups", Now when you create a Powerup project from a design space there is no need to associate it with an existing UI drawing project. Which means each powerup project can be individually created, shared or deleted. Create your own standalone "SiteMap", "StyleGuide", "UX doc", "Personas" and many more projects for your design space.

What it means for us? This basically makes Powerups more powerful as they are now standalone apps. In the near future, you can expect more feature-rich apps for design space to achieve our goal of bringing the entire product design process under one roof.

UI Pack for Tailwind v3 released with over 150 wireframe components

 

New

  

Mf374100e9ea8855e75b640211778008d1662598155720.jpeg

Get the new UI pack for Tailwind version 3. It comes with over 150 components designed for brainstorming Tailwind based apps and websites. It includes, basic elements, widgets, hero sections, sample screens, avatars, modals, popups and more. It is available in MockStore now for free.

Support for new design embeds - Office365, Wistia, Airtable...

 

New

  

fitness.png

MockFlow's design space is about bringing everything about your software design together in a single unified view, even if you use different services for your product design. Design embeds helps you embed third party projects from other cloud services such as presentations, prototypes, videos, animations, 3D renders and more inside your space.

Today's update brings support for the following new embeds:

Also with this update, you can set custom thumbnails for your design embeds.

Note: Design embeds is available in all plans of MockFlow including the Free basic plan.

New: A unified sidebar for all your product design needs

 

New

  

nsidebar.png

It is known MockFlow offers the best way to manage your product design process with design spaces, by bringing tools, teams and files together. In this release, we have focussed on improving the "add" part of the product design.

Currently inside a design space, there are dedicated dialogs for adding each type of content into a space. Although it serves its purpose, there is no standard styling across the dialogs and it is difficult to access a particular dialog for adding content. With this new release, we are happy to announce the availability of a single "Create" button and a unified sidebar for adding almost anytype of content into a space.

As shown in the picture above, the new create sidebar intuitively lists the actions for easy access. All create actions can be now performed without leaving the sidebar. Whether it is creating new UI drawings, adding new powerups, uploading design files or embedding cloud projects, the sidebar provides everything for your product design process.

Placeholder UI packs for Images and Logos are now available

 

New

  

new.png

At MockFlow our mission is to make UI design fast, fun and easy. In keeping with these lines, we are pleased to announce the release of two new UI packs to address one of the core areas of wireframing which are "Placeholders".

Image placeholders

This UI pack contains commonly used image placeholders for many purposes like profile pic, hero image, grid and more.

Logo placeholders

Thanks to LogoIspum service, this UI pack contains a variety of generic logos in different patterns like monochrome logos, logo text, icons and 3D logo designs.

Hope these UI packs help to visualize your ideas even more faster by spending less time on searching and more time on iterating.

Happy Wireframing!

UI Pack for iPadOS 16 has been released

 

New

  

M2d676e90f637be8ea5fe1880e91be7e41657248077301.jpeg

In follow-up to our iOS 16 UI pack for iPhone, we are pleased to announce the exclusive release of wireframe components for the latest iPad OS. Although the styling is same, there are many layout and interface changes when comparing iPad OS with iPhone.

It comes with nearly hundred components in the following categories:

  • Frames
  • StatusBar
  • Navigation
  • Keyboard
  • Buttons
  • Icons
  • Memoji
  • Alert
  • Form
  • Popup
  • Widgets
  • Tooltips
  • Notification elements
  • UI Screens

It is now available in MockStore. Install now.

Introducing Component level themes in MockFlow

 

New

  

component-level.png

We all know MockFlow offers a huge library of UI packs for almost every UI framework, industry and use case out there. Today's release goes one step further as we introduce component level themes.

What are component level themes?

Themes that are component specific and apply styles only to the selected component. With component level themes, you can easily change its appearance by applying a theme from its list as shown above. Current support includes button, text, shapes, charts and grids.

Benefits of component level themes

  • Easy switching of component styles
  • Includes popular themes like outline, dark, light, gradient
  • Has advanced options like background patterns and complex shadows
  • Avoids opening of UI packs for common themes like primary, disabled buttons

In the coming weeks, themes will be supported in more components and also will see in increase in theme options.

iOS 16 UI pack for iPhone is now available in MockFlow

 

New

  

ios16iphone.jpeg

The next generation of iOS - version 16 was recently announced in Apple WWDC 2022 conference held in June. The latest update brings many UI improvements and features like improved widgets, customizable lock screens, focus mode and much more. Whether you are developing a new iPhone app from scratch or have an existing iOS app, it's the best time to start thinking design in terms of iOS16.

At MockFlow, we are glad to introduce a new UI pack for iPhone iOS 16. Start brainstorming your UI ideas with iOS16 components right now. The UI pack has over 190 components that includes primary elements like buttons, forms, icons to full fledged screens.

In a separate release, we will be releasing iOS16 versions of iPad and CarPlay.

feature_image_1.png

Think UI. Think MockFlow. Brainstorm your iPhone app UI at the speed of thought 🚀.

For more details and using the UI pack, click here .

Build your Customer Journey Map inside MockFlow!

 

New

  

Screenshot 2022-04-13 at 7.45.06 AM.png

Create beautiful Customer Journey maps within minutes using this powerful CJM power-up, to visually represent the stages customers go through when interacting with a company or product, or UI.

CJM is an essential piece of your Product design as it helps to identify the different points of contact with a brand or company, and the interactions that exist along the customer journey.

It helps with the following use cases:

  • Identify pain points and barriers that prevent users from reaching their goals

  • See how users interact with your company’s website, apps or services at every stage of their experience

  • Improve your UX

  • Understand what parts of your product/service are confusing for users and need further explanation/optimization


With our new power-up, you can now create these CJMs with little/no design effort.

VIdeo1.gif

Here are the main feature highlights :

When creating a customer journey map, you have two options: starting from scratch or using a template.

  1. Adding stages and sections is a simple process - just click and go! Think about the various stages your customer journey encompasses, and then add them as stages in your map. Once you have the basics down, you can add more detailed information to each stage by creating sections.

  2. Icon Libraries - CJM doesn't have to be boring! Spice it up with some fun icons from the built-in library. You can color and resize them to fit your specific theme.

  3. Experience graphs are an essential component inside a CJM. Add these with ease using the graph section type and use icons/labels to add more meaning

  4. Use the image section type to break up the text and add visual interest by including illustrations or any other related images.

You can change the color of the stage and section headers to create a customized look. The text color is also automatically updated to make it easier to read.

Once you're done, you can pin it to the design space to share it within the team or export it as an image or csv for using it elsewhere as in your reports or proposals. Check out these sample CJMs created with MockFlow CJM builder power-up and get started

To install this powerup in your MockFlow account, click here.

Create UI instructional guides in a snap with Step Guide Creator!

 

New

  

b2d86e28-39b0-4b1a-a7ef-2e7e12d80242.png

Creating an engaging, professional looking, and easy-to-follow step guide to explain your UI is a crucial part of any product design process.

You can create guides that easily walk other people through a process, whether it’s UI flow, function or feature with MockFlow’s Step-Guide creator.

Here are the top reasons why you should use the Step-Guide Creator:

  • To create a helpful and brief UI guide, you'll need to provide different types of steps. These could be text-based, image-based, video-based, or even embedding cloud content. By providing this variety of content, your readers will be able to follow along with your instructions more easily.

D126b068b9884cf217356202d07c3fb26.png

  • When you choose the step type as image, you have the option to annotate the image without leaving the creator. Add shapes, text effects, and cool stickers to help your stakeholder understand your instructions better

ff.png

  • Now more than ever, embedding rich media is essential to creating an effective step guide. Adding loom videos, MockFlow wireframes, Figma files and more with the embed option will make your step guide more engaging and informative.

  • When you're finished creating your content, you can export it as a PDF, Helpscout, Zendesk, or FreshDesk code to import directly into your support portals.

79a417d3-a292-4a26-8858-eb5a733702a9.png

  • Or, you can create a public link and share it with anyone.

In addition to the powerup edition. it is also available as a free public editor at this link. If you find it useful, please feel free to share the link with them. We created it as a way of giving back to the community. Thank you for using it!

Here are example stepguides created using this editor: