Product updates

Keep track of announcements and product updates in MockFlow

Speed Up Your Wireframing with Symbols

Speed Up Your Wireframing with Symbols
We are excited to introduce "Symbols" – a feature that enhances component reusability in your wireframes, allowing you to update a component once and see the changes reflected wherever it is used.

This helps to save time, maintain consistency and modularize wireframing.

What is a Symbol?

A symbol is essentially a single or grouped component that can be reused across your wireframe and can be updated together in one edit. It is more like master pages but at the component level.

However you can also edit any symbol at the instance level to prevent global changes being applied to it.

The major advantage of Symbols is that any changes made to a Symbol will automatically update everywhere it is used. It could be in the same page in a project or across different pages in the same project.

Using symbols in your wireframing process benefits your team in more than one way:

  1. Time-Saving: Make changes once and see them reflected across all instances.
  2. Consistency: Maintain uniformity in design elements throughout your project.
  3. Error Reduction: Minimize the risk of manual errors and discrepancies.
  4. Efficiency: Streamline your workflow by reducing repetitive tasks.
  5. Scalability: Easily manage updates in large projects with multiple instances.

If you are thinking about where you can apply Symbols in your design workflow, the possibilities are numerous, some of which could be:

  1. UI Components: Standardize buttons, icons, and other UI elements used on multiple pages.
  2. Navigation Menus: Ensure consistent navigation menus across different parts of your application.
  3. Form Fields: Uniformly design and update form fields like text boxes and checkboxes.
  4. Templates: Create reusable templates for common sections like Footers, CTA , etc.
  5. And more!

To use symbols in your project, create the component/ group of components that you are likely to use multiple times across your project. On the left menu, you can find the option - 'Create Symbol'. Click on it to add the component to your symbols listing.

All the symbols created can be accessed by clicking on the 'Symbols' on the top of the left side bar. Just drag and use the symbol anywhere in the project like any other component.

Now, to edit this symbol instances everywhere in the project, go to the Symbols section and double-click the symbol to edit. This will open a new view where you can edit the symbol. After making the edits, click on the Save button at the top right and you will find 2 options -save without updating instances and save & update all instances. If you choose to update all instances, then as soon as you save, all instances in the project will be updated immediately.

Overriding Symbol Properties

There is more! You can choose to edit certain properties of the instance like text, color, etc using the 'Edit Instance' option. In certain cases, you may also choose to 'break apart' from the original symbol in order not to update that specific instance whenever the original symbol is updated.

We’re thrilled for you to try out the new Symbols feature and see just how much it can enhance your design process! Dive in and experience the benefits firsthand. Your feedback is incredibly valuable to us, so please share your thoughts. Together, we can keep improving and deliver the best tools for all your wireframing needs!

Now track all activities within your project

Now track all activities within your project

We're excited to introduce our latest feature: Project Activity Tracking. This powerful addition is designed to keep your team in sync and fully aware of all changes made to your wireframe projects. Say goodbye to the days of miscommunication and hello to seamless collaboration.

Easily track every modification made to your wireframe designs. Whether it's a minor tweak or a major overhaul, you’ll be able to see who made the change, when it was made, and what was altered. This ensures transparency and accountability in your design process.

With the Project activity tracking, you can now see updates for changes like:

  1. Wireframe Design Changes
  2. New Pages Added/removed pages
  4. Project Workflow changes
  5. UX Documentation Updates
  6. Symbols updates

With all activities logged and visible, everyone stays informed, reducing misunderstandings and increasing trust. Another effort from our team to making your wireframe project more organized and efficient with streamlined collaboration.

Create wireframes for iPhone apps on the latest iOS 18 now

Create wireframes for iPhone apps on the latest iOS 18 now

Quickly brainstorm your iPhone apps for iOS 18 with over 320 built-in components, including Apple Intelligence based elements.

Apple Inc. has announced the public preview of iOS 18, the forthcoming major version of the iPhone operating system, last week. It features big updates like new home screen layout, Apple Intelligence, UI updates and more...

With over 320 components in 16 categories and plus templates, MockFlow helps you ideate any iOS app that you can think of within minutes. Visualizing your mobile app ideas on how it looks with the new iOS will help you save time and effort before implementation.

Not just wireframes but also create UI flows for your app screens to depict operation flows within your app. And detailed design docs regarding your app idea with requirements, specs, outline. All within the same Project in the same Editor in MockFlow.

Screenshot 2024-06-20 at 12.17.52 PM.png

It is available for free in all plans.

Feature Update: Design Feedback Can Now Be Marked as Resolved

Feature Update: Design Feedback Can Now Be Marked as Resolved

Turn annotated design comments into resolved todo items with help of this new feature.

In the brainstorming stage, feedback from clients, team members, managers help shape up your wireframe design. Therefore it is important to keep track of them especially when comments are provided as an actionable task like "Use a light background image", "Reduce links in header", "Make the popup size smaller". Today's update helps to turn such actionable feedback into todo items with the new "Resolve" function.

Now completed actionable feedback can be marked as resolved. Once a comment is marked resolved, it disappears from the main list and can be found through filters. Also appropriate notifications are sent to project members about the comment.

This feature is available in all our plans including Free tier.

Introducing "Docs" mode for UI design

Introducing "Docs" mode for UI design

Now document seemlessly alongside your wireframes, flowcharts and designs for a more cohesive brainstorming of your software ideas.

Ideating software is a two sided process, that includes designing and documenting ideas parallely. Both should go hand-in-hand for process oriented software teams. Documenting helps to describe, annotate, and detail your UI sketches which is otherwise hard to represent in just drawings.

Introducing "Docs" mode in MockFlow

Considering the above points, for the past 6 months our team has worked hard to deliver "Docs" inside your existing wireframing projects. "Docs" that is designed specifically for software ideation. Let us checkout some of its unique advantages and features that it provides when you combine docs and design.

Switch between "Docs" or "Design" in a snap

The top toolbar in wireframe editor allows you to switch between "docs" or "design" mode instantly and without disrupting your current selection or workflow. Without reloading or changing the design content, the editor intelligently organizes its interface around it based on the selected mode.

Screenshot 2024-06-10 at 2.36.31 PM.png

Refer and anchor "Design" elements inside your doc.

Just like linking to external websites or linking internally within the document. It also allows you to reference and link specific design components from the wireframe inside the doc. Clicking on the link will take you to that specific page and component. This make it super-useful to build contextual design documentation for your wireframes.

Screenshot 2024-06-10 at 2.37.36 PM.png

Templates made for "Design docs"

You need not start with a blank doc, start with a template using our doc template library created for design documentation. It is growing fast and for now it has templates like "UI checklist", "Product Requirements"...with more on the way.

Generate Docs with AI

If you are unable to find a suitable template, then generate a complete doc with AI in just a prompt. We use the top of the line GPT model fine tuned for producing rich text documentation meant for software. You can also generate parts of your doc in a particular tone using the inline AI toolbar.

Screenshot 2024-06-10 at 2.38.50 PM.png

Export doc to PDF format

You can export your entire doc to PDF format for printing, email sharing or simply as an archive or for backup.

Your team can edit together with real-time function

Just like Google Docs, docs in MockFlow can be edited together by your team with no restriction in the number of members. This helps to brainstorm ideas and write document together in real-time.

Other salient features of our "Docs" mode

It is built with all modern features that you would expect from a docs editor like Auto-generated and searchable table of contents, callouts, embeds, button, checklist and more...

Screenshot 2024-06-10 at 2.39.24 PM.png

Public view "Docs" mode choice

When you share wireframes with public link (encrypted key or not), there is now an option to enable "Docs" as the default view type when the wireframe opens.

Offline support for "Docs"

MockFlow Desktop app for Mac and Windows supports "docs" mode in offline file based projects. In .wire,.flow or .dsgn docs can be created and saved just like the online projects. This is a great option if your business wants to offload any important design docs from the cloud.

We are glad to launch "Docs" mode with so many features in just its first release, But honestly as a huge update it will definitely have certain quirks and issues. Kindly provide your feedback as we are continuously releasing with new updates every week.

BTW "Docs" mode is available for free (except AI features) including the Basic plan.

Don't just comment, now suggest design changes visually

Don't just comment, now suggest design changes visually

The latest update in MockFlow pushes design commenting to another level as now the collaborator can make visual changes to design as part of comments for making better suggestions without altering the original version.

Comments form one of the vital parts in ideation stage and when it comes to UI brainstorming, comments in any other design tool simply provide only annotated feedback with text and attachments. This is not enough, as the collaborator will struggle to put thoughts into words especially when it comes to design updates. At the same time editing the original design is not a good workflow.

Introducing "Design Suggestions"

On top of your existing comment workflow, users can now suggest actual design changes in the same MockFlow editor. Let us go through a sample case where this would be useful:

Without Design Suggestions:

  1. A wireframe design is shared with a client. It is about an e-commerce checkout box
  2. Client reviews the design but finds it requires certain layout and theme changes. They try to type it out in the comment box with annotations
  3. Designer is unable to understand to where exactly the changes are applied and comes with an update overriding the original design.
  4. Client is not happy that the design is not going as per their requirement but also feels it is difficult to explain design changes in text

End Result: More time is wasted in discussions, existing design is getting replaced, client is unhappy.

With Design Suggestions:

  1. A wireframe design is shared with a client. It is about an e-commerce checkout box
  2. Client reviews the design but finds it requires certain layout and theme changes. Instead of explaining the changes in text, Client, clicks the new "Suggest Design" button and edits the wireframe just like the designer but making visual suggestions. Now the comment is stored with the suggestion without disturbing the original design.
  3. Designer is able to understand what exactly the client requires. The designer also has the ability to import the suggested design as an editable wireframe with one click into existing page or new page in the project.
  4. Client is happy for communicating changes effectively so that the designer understands.

End Result: Lot of time saved in re-designs, smoother communication, both client and designer are happy.

Visual Language is better for design communication than just words.

We did not stop here, suggestions are only more useful if the designer is able to detect changes done to design and also able to import the design changes in editable format.

On clicking a suggested design thumbnail, it opens the viewer like below where there are many comparison modes such as 1:1, overlay and diff.

Screenshot 2024-05-28 at 7.43.50 AM.png

Get your wireframes reviewed and rated by AI

Get your wireframes reviewed and rated by AI

We are excited to introduce a new way to get your UI designs analyzed and reviewed automatically with AI and download them as PDF reports.

Feedback is a crucial aspect for a design to evolve in the right way especially in the idea stage. This is the reason why MockFlow provides annotated comments, in-built video chat, and also user testing software to accelerate discussion and get feedback from stakeholders. While all these help in their own ways for better design outcomes, it is also important to have continuous, automatic and impartial reviews for faster design progress. Hence Introducing "Design review by AI" as part of our Genius AI package in wireframepro editor.

How it Works?

To access "Design Review By AI", click the "Genius" icon inside the editor. It comes with two options, either you can get the full wireframe page reviewed by AI or you ask it to review only the selected portion of the design (In this case, You need to select parts of the design before clicking this button). In a few seconds, AI will generate a detailed report based on your design. AI will analyze your design with regard to various aspects such as clarity, usability, design aesthetics, creativity and various other attributes related to design. It is also powerful enough to detect the difference between a low-fi wireframe or a high-fidelity design. Also it can read and understand the text and images inside the design.

On generation, it produces a detailed report with an overall design score and smileys for each attribute to indicate its design level. Sad for bad design, Poker face for OK design and Happy for great design. This way editors can easily identify the key aspects of their design which needs improvements.

Export Review Reports

Screenshot 2024-03-27 at 1.40.49 PM.png

You can save the generated reports in PDF format. The PDF report includes both the detailed review, rating and also the design for which it was reviewed. This way you can go back and check how AI has evolved its review based on your design progress. Also PDF reports are useful in sharing the AI perspective of your design with your team members and stakeholders.

"Design Review By AI" comes part of Genius AI credits. For more information and credit limits check on the pricing page.

Improved insights for DesignSpace

Improved insights for DesignSpace

In today's update, we have overhauled design space insights with better graphics and more informative charts that speaks about your design projects.

Next to wireframing, MockFlow is known for its design project orgranization as it brings tools, files and members together under one roof. With design spaces, it is easy to organize, manage and share design projects just like a folder but better than that. Each design space comes with an insights button where it displays key information about what is happening in that space like top creators, project types, activity and more.

With just a click and a glance, check how your design space has evolved with your project and how your collaborators are involved. Space insights are useful in multiple cases like in agency-client relationship, client can have a better view of their agency's work progress. In a business related design space, it offers how their project uses different aspects of design to bring it together.

This is just the start, more features like activity timeline, AI related insights and integrations with regard to your design project organisation is coming soon to design spaces.

Not just Sketchy wireframes, now draw sketchy UI flows, flow charts and diagrams

Not just Sketchy wireframes, now draw sketchy UI flows, flow charts and diagrams

MockFlow now offers full support for drawing UI flows, flow charts and diagrams in sketchy format with a hand-drawn look and feel just like our UI wireframes.

MockFlow is all about bringing your ideas to the digital realm. Ideas in its original form, are usually rough, incomplete with lots of open-ended questions. However ideas are the core of your next product, upcoming major release. It is important for product managers, CEOs, CTOs to bring these ideas to the table in a format that can be easily conveyed, collaborated and worked upon with their team. At the same time it is important to represent the diagrams as though it was sketched on a piece of paper to make sure it visualizes only the idea stage.

In this latest release, we are excited to provide full support for drawing sketchy diagrams and UI flows. Just like wireframes, simply select the sketchy Flow pack and also enable sketchy drawing for connectors. Note: Connector animations and all other aspects still work in sketchy format.

The above features is available in all plans including Free.

Now brainstorm apps for Apple Vision Pro

Now brainstorm apps for Apple Vision Pro

Introducing a new UI kit for Apple VisionOS with over 132 wireframe components.

Vision Pro is a next generation VR device from Apple. Long time after watch (first released in 2016), Apple is trying to establish entirely a new device line. Which means a new way on how users interact with the UI with altogether a different user experience. VisionOS that powers this device is built from ground up for AR and VR.

Like any other UI, straightforward implementation or prototyping of your application will only cost more time and resources. It also provides few opportunities to make decisions and choices. It is always better to wireframe your idea first to avoid these. UI kit for VisionOS helps with you bring out your ideas to picture and helps you to convey your layout, process, features even before implementation starts.

Here are some example UI screens that was created with this UI kit

Wireframe VisionOS apps with MockFlow

Apple ios 1.png

Wireframe UI kit for Apple VisionOS is available for Free and can be accessed from within the MockFlow app. For more details visit MockStore link.

Introducing Flow app integrations for Microsoft Office 365

Introducing Flow app integrations for Microsoft Office 365

We are excited to announce a new wave of integrations for MockFlow Flows app. Just like the wireframe tool, we want to empower users to create UI flows, flowcharts , diagrams inside their favourite productivity and collaboration software. Today our MockFlow Flow app plugin for Microsoft Office 365 was published in Microsoft AppSource repository after a review by Microsoft Review Team.


After installing the plugin this link, Flows icon will appear inside your Microsoft Word and Microsoft OneNote apps. This is for both cloud based Office 365 and also Office desktop versions. With the Flows app, you can open the full fledged editor right within Microsoft Office. Also draw and insert your diagrams within your Microsoft Word Document or Microsoft OneNote project.

Now enhance your Microsoft Word and OneNote to draw diagrams with just a click. This plugin is free and is available to all MockFlow plans. Get it now.

New UI kit for drawing sketchy mobile interfaces

New UI kit for drawing sketchy mobile interfaces

Sketchy or hand-drawn like wireframes convey in style that this UI design is not final and is unfinished. While MockFlow already provides several components and UI kits for drawing sketchy UI, Today we are introducing an exclusive UI kit with over 50 components for drawing hand-drawn like user interfaces just for Mobile devices.

It provides several elements that are commonly used in both iOS and Android UI frameworks like buttons, navigation, statusbar, keypad, device frames, lists, form inputs, popups and also example UI screens.

All great (mobile) software, start with an idea, now brainstorm your thoughts into drawings as fast as you think and as though you have drawn it on a piece of paper with this new UI kit.

It is now available in MockStore can be installed as a UI kit in your MockFlow WireframePro editor.

Launching separate "Flow app" for drawing flowcharts, architecture diagrams and more...

Launching separate "Flow app" for drawing flowcharts, architecture diagrams and more...

MockFlow DesignSpace just got bigger with the new "Flow app". Following up our release on Flow mode inside WireframePro which is great for creating UI flows for wireframes, we are now excited to bring a explicit application for drawing flowcharts, software architecture diagrams, UML, flow visualizations and more. As a separate app, it will help us provide features geared towards flowchart creation.

Why should you use Flow app over other flowchart apps or whiteboard tools?

Tons of Flow shapes

Flow app provides an extensive list of shape libraries and icon libraries all out-of-the-box. Nothing to search or install separately. What's more there is universal search across all libraries to quickly find the type of shape or icon you are looking for your diagram.


Flow packs

Like how WireframePro provides various UI packs, Flow app has Flow packs and Flow components. Flow packs provides easy access to a set of related components to draw a particular kind of diagram. For example "Cloud Architecture pack" provides icons, shapes, containers, user icons, indicators to quickly draw SaaS diagrams. Similarly there are packs for UML diagrams, SAP architecture and more...

Also you can make your own Flow pack and share it with your team like a brandkit.


Animated Flows

Connectors in Flow app has options for various styles including animated line style. Which will capture user attention to important flows inside a diagram. More animations and interactivity options are coming soon to Flow app.

Generate with AI

Generate flow diagrams for anything that you can think of with the Flow AI. It can be HR process, Cloud serverless diagram, Process to book train ticket... Note: Flow AI is in alpha and we are constantly improving its results.

Shape modes

Flow app generally provides three types of shape types - General, Sketchy, 3D. Use general for normal diagrams. Sketchy to represent draft or flows under working. Use 3D as an alternative visualization for representing flowcharts in a new dimension.

Screenshot 2023-12-20 at 10.35.49 AM.png

Offline Flow app

Flow app is also available in offline form through our flagship MockFlow desktop app. Where you can save and read your own .flow files from your disk without storing data on our cloud servers.

Interactive Flowcharts

You can simulate drill-down flowcharts by using basic interactive options. Develop a network of interconnected diagrams, avoiding clutter and ensuring a clear, organized representation across multiple linked charts.

Other features

It also includes Advanced collaboration, Sharing, Embedding, Annotated comments, Revision history, Layers and other more features.

About Flow App

We believe the new Flow App provides a natural extension on our quest to make software planning easy, accessible and fun. Now in addition to brainstorming UI in MockFlow, also brainstorm process, flows, and architecture with minimal effort. Also to note we have many interesting features for Flow app on our roadmap so let us know your feedback and stay tuned.

Introducing new "Flow mode" in WireframePro

Introducing new "Flow mode" in WireframePro

We are happy to introduce the new "Flow mode" in WireframePro which takes brainstorming UI to the next level. With Flow mode you can conceptualise UI flows, process charts, diagrams and walkthroughs all without leaving your favorite editor for wireframing UI. And the best part is your flows can co-exist with your UI design to provide an intrinsic meaning to your concepts.

How to use Flow mode?

Just select any component inside the editor, its resize handles will now change to flow handles. Pull the flow handle to connect with any other component or group.

The connectors can be styled and re-aligned as preferred. You can toggle between "Mock" mode and "Flow" mode anytime within the same editor whether you want to draw UI or connect Flows.

Screenshot 2023-11-29 at 9.28.25 PM.png

Create amazing UI flow diagrams in minutes

With MockFlow's huge library of UI packs, icon sets and new shape libraries made exclusively for flow mode, make beautiful UI flows in minutes to explain your software concepts.

Screenshot 2023-11-29 at 8.29.38 PM.png

Flow mode is free

Flow mode in wireframepro editor is available free for all users including Basic plan. So start drawing without any hassles.

MockFlow - now UI design + UI flows goes hand-in-hand.

Wireframe UI kit for MacOS 14 Sonoma is now available

Wireframe UI kit for MacOS 14 Sonoma is now available

Now brainstorm your desktop app ideas for the latest MacOS 14 Sonoma using this newly released wireframe UI kit. There are totally over 160 components in 11 categories in this UI kit.

The wireframe UI kit for MacOS sonoma includes layouts of its latest features, theme and wallpapers. Some of the major highlights introduced in MacOS sonoma in addition to many subtle themes changes are : Widgets for Desktop, better messaging, and improved privacy features.

With the super-easiness of MockFlow Wireframing tool and the wide range of components included in this UI kit, brainstorming your UI ideas for the next generation MacOS is now a breeze.

This UI kit is available in all plans including Basic. For more information and using this wireframe kit, click here.

Added Offline support (*.dsgn file) for MockFlow Designer

Added Offline support (*.dsgn file) for MockFlow Designer

As promised in our last changelog, today we have brought full file based offline support for Designer in MockFlow desktop app. It is available in both Windows and MacOS.

What is Offline Support ?

MockFlow Designer being a web based designer application requires cloud to operate inorder to load its editor, store designer data on our servers and restore them. While cloud comes with its own benefits such as better collaboration and easier sharing, it need not be accepted by all organizations especially when it comes to data storage.

The offline support for MockFlow Designers allows designers to own their design data by saving and opening their design files in .dsgn format from their storage / machine. Just like other desktop apps such as Adobe Photoshop which supports PSD files, MockFlow Designer uses .dsgn file format for this purpose.

Bonus - Encrypted design file

While how the file (.dsgn) is stored and shared is the responsibility of the user, we at MockFlow understand how important is file level security. Just like in *.wire files used in MockFlow WireframePro. *.dsgn files too can be encrypted with 256-bit encrypted password. This means your file is secured even if your storage is compromised.

Screenshot 2023-10-15 at 7.29.52 PM.png

Why Offline Design is important?

Just like Cloud, Offline has its own salient features, let us check them out in the following points:

  1. Work anywhere even in conditions where Internet is not available
  2. Better compliance for design data without relying on third-party services
  3. Works as is, with enteprise ready file-sharing/hosting programs already installed in your organizations
  4. Make your own versioned design copies for better design organization
  5. Multiple ways to share your design copy, even send via email, chat...

Note: Offline design is a product design + feature, available only in higher plans as mentioned above. For more information, contact us.

Download Designer app for Windows

Download Designer app for MacOS

What is MockFlow Designer?

An easy-to-use tool for non-designers to quickly create graphics for website images, blog hero, app assets, social media images and more...

Introducing our new app - "MockFlow Designer" for designing graphics

Introducing our new app - "MockFlow Designer" for designing graphics

Launching our new app called "MockFlow Designer" to quickly create graphics for blog images, website assets, social media graphics, static ads, and more...

Note: ☝️ We created the above changelog hero image using "MockFlow Designer"

MockFlow is widely known and associated with its easy-to-use wireframing tool. Over the years, we learned from our customers that they use MockFlow not just for brainstorming but also for creating high-fidelity graphics by using its large set of UI packs, illustrations, and icons. Adding graphic design capabilities feels like a perfectly fitting extension within the domain of product design.

Today, we are excited to launch a specialized version of our wireframing software geared just toward creating graphics. This means it has all the collaboration features like chat, feedback, sharing, no-doc overhead, revision history, multi-page support, and AI tools already incorporated into the designer tool. However, many specific changes were also made to make Designer one of the fastest and most flexible tools to help non-designers create graphics.

9cf8b951513d4082beca6b8e432a9f10 (1).png

Template Store

A fast-growing library of templates is available for various purposes like social media, ads, blogs, and more. In Designer, you can apply and switch between templates almost instantly.

Designer-friendly component packs

A "Designer" exclusive pack is available with various components that are frequently used in designing graphics. More designer-focused packs will be available shortly with specific purposes, just like UI packs in Wireframepro.

Editor UI

The UI has been modified with a centered canvas and easy access to graphic components such as illustrations and icons.

Retina-ready export

Any graphics exported from the designer can be configured for retina-ready resolution, which is 2x of its original size.

Desktop app support

Designer is also available as part of our MockFlow Desktop app. It is more convenient with system-level windows, native top menus, and OS-friendly shortcuts.

As already mentioned, since it is a fork of our wireframing tool, it includes access to

  1. Third-party image libraries like Unsplash
  2. Ability to import from External cloud drives like Dropbox, Gdrive
  3. AI tools to generate messaging for graphics, generated images, color palettes
  4. Top-notch collaboration

Coming soon: "MockFlow Designer" will be available as a fully offline desktop-based app for Mac and Windows. Like Adobe Photoshop, you can save your designer (*.dsgn) files on your storage for compliance and security.

This is just the first iteration of MockFlow Designer to bridge the gap between product design and brainstorming. More new features are on the way. And as usual, your feedback matters most. Keep your suggestions rolling in!

New in AI Co-Pilot - Generate any color palette with just a prompt

New in AI Co-Pilot - Generate any color palette with just a prompt

We are pleased to introduce "Generate Colors using AI," which is a new addition to the recently launched AI Co-Pilot. Like other tools in the co-pilot, this also helps users to brainstorm UI faster.


Colors are one of the key aspects when it comes to designing user interfaces. This tool helps to find the right colors for your UI with just a text prompt. Simply type "Best colors for Dark UI", "IBM brand colors", "Light green pastel palette". The system automagically generates colors based on the text prompt within a few seconds.

After the colors are listed, you can either copy the color code to your clipboard or directly favourite the color to the color picker of your current wireframe project.


Wireframe UI kits for iPhone iOS 17 and iPadOS 17 are now available

Wireframe UI kits for iPhone iOS 17 and iPadOS 17 are now available

MockFlow in keeping up with its promise to be up to date with the latest versions of all major UI frameworks, we are happy to release today - Wireframe UI kits for iPhone iOS 17 and iPadOS 17. iOS 17 is the next generation operating system and UI framework from Apple for its iPhone and iPad devices.

Now start brainstorming your mobile ideas for this upcoming OS using the latest UI components available for version 17.

iOS 17 wireframe components for iPhone

This UI pack includes over 240 components in 17 categories. The UI pack also includes pre-made designs of important screens like Home, Settings, Gallery...


iPadOS 17 wireframe components for iPad


The UI kit for iPad provides frames, status bars, keyboard, navigation components, buttons, form elements, and widgets. It has over 200 components in over 15 categories.


With MockFlow's rapid wireframing platform and iOS 17 UI kits, brainstorm, iterate and visualize your upcoming iPhone and iPad apps in little time.

Introducing "AI Co-pilot" for brainstorming UI

Introducing "AI Co-pilot" for brainstorming UI

Nowadays AI is not just a buzzword but an invaluable tool that has become part of our tools we use. Following our release last month to generate sitemaps using AI with just a prompt , we are now happy to bring AI for brainstorming UI. Introducing "AI Co-pilot" for MockFlow WireframePro. AI Co-pilot is a suite of generative AI tools and wizards to assist you in brainstorming interfaces. As of now it includes the following tools:

Generate Text


Generate text for any UI with just a simple prompt. Enter a prompt like "write a tagline for our ecommerce site.", the AI will automatically generate a text. You can also specify the length of the text and the text style tone like from being professional to downright casual. Next time replace your mockup text or redacted font with generative text for high fidelity wireframes.

Generate Images

D85a9a0ab668e4de4d0f146c6a835083e (1).png

Produce images for your wireframes based on a given prompt, and choose a suitable style for the resulting images. When it comes to generating the images, the more specific and detailed the prompt is, the higher quality the generated image will be.

Generate Data tables


WireframePro provides native datagrid components for wireframing. Using AI Co-Pilot you can now fill data for tables in just a click. It is useful when designing e-commerce products, data related applications and any app that involves data listing.

Besides the above tools, AI Co-Pilot also includes "Generate BYOC" for generating BYOC (or code based components) with AI from prompt. Like "Create a button bar for business website", "Feature grid for homepage"...

It also brings "Generate from Wizard" tool to produce custom templates for brainstorming in a flash.

All these tools are available for all plans, Open your wireframepro app and explore now.


Wireframe UI kit for Shopify Polaris

Wireframe UI kit for Shopify Polaris

Polaris is the design system for the Shopify admin. It includes components, icons and styles for developing high-quality merchant experiences in Shopify.

We are pleased to bring the power of brainstorming to ideate ecommerce apps with Shopify Polaris UI kit. This UI kit brings in over 140 components in 12 categories including buttons, form elements, cards, avatars, badges, modals and more...

To know more and install check here


Introducing "Illustration packs" in MockFlow WireframePro

Introducing "Illustration packs" in MockFlow WireframePro

Wireframe means fast visual representation of UI. So it makes brainstorming and iterating your UI blueprint as easy as possible.

Unlike other UI tools like Figma, XD or Sketch, MockFlow focuses on speed and not visual perfection. Which is why UI brainstormed in MockFlow is quicker as it provides numerous UI kits, pre-built components like tables, icon packs, image libraries and integrations at the click of a button.

Today's update adds one more to its arsenal in its quest to make wireframing more fast and fun. Introducing "Illustration packs", we all know majority of today's websites and apps include various illustrations as part of their UI to easily communicate their message to users. Illustration are very useful since they transcend across languages and using it in the wireframing stage increases the visual appeal of your idea.

Instead of scouting the web and finding an illustration , then uploading it to MockFlow. Now with illustration packs save all these extra steps. MockFlow already offers 5 different illustrations packs with over 1000 vectors to choose from. It does not end there, but in each illustration you can customize its color theme as per your design brand.

MockFlow Illustration Packs

In the near future, you can expect more new illustration packs and also an exclusive library of MIT licensed vector illustrations designed by our MockFlow Team.

Editable SVG vectors

Screenshot 2023-08-29 at 12.02.04 PM.png

On a additional note, you can also now edit colors of any SVG or vector illustration uploaded to MockFlow directly. This is useful if you have your own illustrations or downloaded from any licensed store.

Illustrations packs are available free of cost for all plans include "Basic".

Wireframe UI kit for Microsoft Fluent 2 Design System

Wireframe UI kit for Microsoft Fluent 2 Design System

Microsoft Fluent is a design system developed by Microsoft that aims to create a consistent and cohesive user experience across all Microsoft products and platforms. Fluent Design System 2, also known as Fluent 2, is an update and expansion of the original Fluent Design System.

Fluent 2 builds upon the principles and concepts of the original Fluent Design System, which include depth, motion, material, light, and scale. It introduces new design elements and enhancements to provide a more immersive and engaging user experience.

MockFlow has updated its Fluent wireframe UI kit for version 2 with 111 pre-built components spread over 12 categories. Now brainstorm your UI ideas for MS Fluent 2 at breakneck speed with the easy of MockFlow editor.

For more details visit this link - UI kit

Example wireframe created using this MS Fluent 2 wireframe kit

Example wireframe created using this MS Fluent 2 wireframe kit

New layout for SiteMap app - "PageFrame"

New layout for SiteMap app - "PageFrame"

A new layout called 'PageFrame' theme has been added for SiteMap app. As the name indicates each node in the sitemap is encompassed in a browser frame like box. Like other themes in SiteMap app, each node can be customized for colors, thumbnails and node sections.

For those new to SiteMap in MockFlow, it offers a superfast way to plan and structure sitemap structures for your website. Also entire sitemaps can be generated with AI using just a prompt.

Here is the complete list of themes now available for SiteMap

Screenshot 2023-08-18 at 10.19.07 AM.png


New UI Pack for brainstorming AI based software

New UI Pack for brainstorming AI based software

With the advent of OpenAI and LLM, AI based features and tools are the new trends in industry. Almost every new product or updates of an existing product has something do with AI. It goes without saying, AI makes software easier to use, saves time and reduces steps. In most cases, AI features starts with just a prompt or message, which its language model processes it just like humans and gives the required output.

AI is not just text based, it does a variety of tasks like generating images, creating sitemaps, writes code and does much more. To do an AI based user interface, it is important to understand the nature of the problem it solves. AI can be part of anything such as a search engine, chat bot, icon generator...

It is important to brainstorm the interface on how users interact with your AI based functionality. MockFlow now offers an exclusive UI pack with ready-components for many AI based scenarios that you would require in your application.

With over 50+ components and templates designed for creating AI tools whether in web or mobile, the new AI pack along with MockFlow will help you visualize iteratively just like a whiteboard.

Generate sitemaps for any website type with AI

Generate sitemaps for any website type with AI

MockFlow helps website planning with its SiteMap tool. Using the SiteMap app, managers can easily make an overall outline of their website's structure and also add in-depth details to each page in the structure with status, description, attachments and comments.

Today's update helps you can create an entire sitemap structure for your upcoming website with just a prompt. Simply enter the type of website for which the sitemap has to be created, the rest is done using our AI.

Examples include: Ecommerce website, Business site, Crypto portal and virtually for anything you need sitemap structure.

Screenshot 2023-08-04 at 4.00.47 PM.png

Steps to use

  1. In the dashboard's create menu, click on the "SiteMap" button
  2. Select "Create with AI"
  3. Enter prompt with your website type
  4. That's it your visual sitemap structure is generated

Once the sitemap is generated, you can share, collaborate and edit with your team members. Save time for better planning with this new feature.

Launching our next iteration of MockFlow Dashboard

Launching our next iteration of MockFlow Dashboard

Two years ago after we first released design spaces for MockFlow, it has become the de-facto way for many businesses to organize all their cloud based UI design content into spaces. Our customers used design spaces in many ways than we imagined - Space for organizing client design, Space for branding, Space for brainstorming UI and more like this. Spaces are not just for MockFlow content, it brings design related files such as images, videos, pdf and cloud based projects like Figma, Miro, Prezi - all put together in a single workspace making them logically related to each other.

Today we are happy to release the next major iteration of MockFlow Dashboard including spaces. Let us go for a tour of the key points in this release:

MockFlow Home

MockFlow New Dashboard

On opening MockFlow, you will now be taken to a default start screen. Here you can use the new "Create" bar for creating your MockFlow related projects like wireframing, styleguide, user testing. Also the home screen lists the last 10 projects you have opened.

New SideBar

New SideBar - MockFlow Dashboard

Instead of the grid based layout used in the previous dashboard, this new version provides an easy to navigate sidebar. With the sidebar, the spaces are always listed and makes switching between spaces simple and fast. And all common operations like account settings, notifications, search are also part of this new sidebar which is always available no matter in which space you are.

Simplified Space layout

MockFlow Dashboard Layout

We know how much our customers love their spaces. This iteration only makes spaces more simple, sleek and accessible with few subtle changes. The header height is reduced to a single horizontal section. A new "Create" bar that was seen in the home screen continues here. Now each design space is divided into only two sections - Projects and Files for easier understanding. Also there are numerous minor design updates that has gone into the new space layout.

Overall the new MockFlow dashboard brings a fresh perspective for UI design with its new "Create" bar, home screen and improved space.

Now create BYOC components in MockFlow with AI

Now create BYOC components in MockFlow with AI

In MockFlow, BYOC stands for "Bring Your Own Components." It is a feature that allows users to create and add their own custom design components using CSS and HTML to the MockFlow library, which they can then reuse in their designs.

These custom components can then be easily dragged and dropped into their wireframe projects, saving time and effort in the design process.

BYOC is particularly useful for design teams who need to maintain consistency across their projects or for individuals who have specific design requirements that are not met by the default components available in MockFlow.

Now with AI power, users can generate BYOC components with just a prompt.

Example Prompts:

  • A curved blue button with white text
  • Hero section with title and description
  • A modal box with action buttons

The best part is any component generated with AI can be customised with code to make it perfect.

AI + BYOC is a perfect combination to save time on design projects that requires deep customization without much effort.

It is available now in both on our online and desktop editors. Try now!


Introducing new UI style for creating wireframes with "Block UI pack"

Introducing new UI style for creating wireframes with "Block UI pack"

Wireframes are all about representation like how prototyping is for interactions. MockFlow already provides many ways with which you can wireframe your UI ideas

  • Outline style with straight lines and raw components
  • Hi-fidelity with images and css based styling
  • Sketchy UI pack like drawing in a real paper or whiteboard
  • New! Block style - inbetween outline and sketchy

Each has its own use cases and it is important to choose the right style based on the intent of the design. Today's update brings Block based styling of components to create an informal UI design that stands between lo-fi and hi-fi.


It is represented by thick shadows, vivid use of colors within a small palette. It is really expressive in its own way. If you find sketchy wireframes are too unofficial or outline very basic, then the block style will suit you just right.

Here is a representation of Gmail UI using the block style UI pack. It lays stress to the UI elements and gives a better basic level picture of its components.


For more information and installing Block Style UI for your wireframe editor, click here.

OTT UI packs for ideating web and mobile based media apps

OTT UI packs for ideating web and mobile based media apps

We all know there is a sudden surge in OTT platforms (Over-the-top media service) delivering various forms of media content with a direct-to-customer approach. It is not just the big players like Netflix or Disney but many creators, agencies and small media companies start their own media platforms for better revenue share and to increase their brand equity.

Creating an OTT platform involves a multi-layered approach. In addition to a robust backend infrastructure, the user experience and UI are the most important factors to consider to increase viewership by delivering a satisfying experience. It also depends upon the target market reached like median age of the viewers, region and more such factors.

Designing and iterating UI for OTT can easily turn into an expensive affair if not properly brainstormed. It is important to make things clear in the idea stage of the application itself. Today, we are providing exclusive UI packs with hundreds of components to ideate both web and mobile for OTT.

It not only includes specific components like video player, playlists, video description but also pre-made screens that are usually part of any OTT service like a payment screen, search, homescreen etc..

Install the OTT packs from MockStore today and start ideating your media apps before it is actually developed. Save effort, time and budget.

Link to OTT web pack

Link to OTT mobile pack