Product updates

Keep track of announcements and product updates in MockFlow

Updated UI kit for Android to version 15

Updated UI kit for Android to version 15
We’re thrilled to announce the release of the latest Android UI Kit, version 15 for MockFlow! This update introduces around 160 wireframe components designed to help you brainstorm app ideas for Android OS, along with a variety of templates to kickstart your projects.

It includes Android wireframe components for the following categories

  1. Frames
  2. Keypad
  3. Top nav
  4. Bottom nav
  5. Buttons
  6. Form elements
  7. Tabs and Slider
  8. Lists
  9. Dialog boxes
  10. Notification
  11. Widgets
  12. Icons
  13. Popups
  14. Misc elements


With MockFlow's fast and intuitive wireframing tools, you can effortlessly brainstorm app ideas tailored for the latest Android version. Prototype key functionalities such as opening popups, implementing smooth slider animations, and more. Seamlessly create detailed UI flows between Android app screens to visualize user journeys and process flows, bringing your ideas to life without spending much time or effort.

Android UI kit is available free for all MockFlow plans.





Now track team activity in Design Spaces

Now track team activity in Design Spaces
All key design activities completed by your team in one space are now logged and can be viewed in a visually appealing timeline view.


Design Spaces in MockFlow serve as a brainstorming hub where businesses can ideate, create, collaborate, and evaluate their next big software ideas, design updates, client projects, and more. It’s more than just a folder for grouping projects; it's a dynamic space where projects, team members, and ideas come together. Today, alongside space analytics, we’re excited to introduce "Space Activities.".


With Space Activities, members can easily track key actions within the space and see when they occurred. They can also quickly search for specific activities— for instance, searching "delete" will display all deletion actions, whether it’s an image, project, or page removal. Only essential activities relevant to the space are recorded, ensuring members have access to vital updates.


Benefits of space activity

  1. Overall activity viewer of all projects inside a space
  2. Track activity by member
  3. Relate between member responsibilities and activities done
  4. Search activities or filter by type
  5. Visual timeline that also displays related thumbnails

Note: This feature along with Space Analytics is only available for Business and Enterprise plan users.

AI Feature series 4: Convert Website/Webapp to Wireframes

AI Feature series 4: Convert Website/Webapp to Wireframes

Stop spending time wireframing your existing UI—try our Chrome extension that instantly converts any website, web app, or internal app into editable wireframe designs.


We’re thrilled to announce a new addition to our AI-powered features: a Google Chrome browser extension that transforms any user interface viewed in the browser into a wireframe design. This powerful tool makes it easier than ever to update, ideate, and refine UI designs effortlessly.


Why would you need it?

Consider a scenario where your business has developed and currently uses a web-based internal supply chain management software for handling logistics. Over time, as requirements evolve, new modules and updates are needed. Directly assigning these updates to developers without a clear design process often leads to wasted time and effort, as coding is a detailed process that can’t be easily reversed. Much of this effort can be saved by providing developers with a clear UI mockup or wireframe as a specification. However, creating a wireframe from scratch can be time-consuming, especially for existing software, since the project manager or designer would first need to recreate the original design.


With this new extension, you can instantly convert your existing UI into a fully editable wireframe with a single click, allowing you to explore new styles and design ideas with ease.


Scenarios explained:


9544764100c54f7e991f6e2230470e58.png


Convert specific sections or components

The new Chrome extension offers two powerful options: you can either convert the entire page or screen into an editable wireframe, or interactively select specific sections—such as a sidebar, header, or feature—or individual components like a tab bar, list, or grid. These selected elements can then be used in your wireframe just like any other component, giving you full flexibility and control over your design.

Screenshot 2024-10-30 at 6.43.13 PM.png


Note: This Chrome extension is currently in beta, so there may be some differences from the original design.


It is freely available for all plans including Basic. Install now from chrome store.



AI Feature series 3: Whiteboard to Wireframe

AI Feature series 3: Whiteboard to Wireframe

Just finished a UI meeting on the whiteboard? Snap a photo and upload it to MockFlow. Instantly convert your sketches into editable wireframes!.


Despite the abundance of digital tools for brainstorming, the whiteboard remains the go-to choice for physical team meetings. Whether it’s for its larger display, ease of use, or offline convenience, it has its advantages


However, the main drawbacks are that whiteboard content can be easily erased and, when stored as a photo, is no longer editable. With today’s update, you can now bring your whiteboard sketches into MockFlow as fully editable wireframes. This allows you to continue refining your designs and collaborate with your team in real-time, no matter where they are.


Whiteboard2Wireframe AI feature is now available as a beta release in all MockFlow plans. Make sure to upload one UI screen at a time rather than multiple set of screens in a single photo.


whiteboard2wireframe.png


Along with our other AI-powered features like Text2Wireframe, Screenshot2Wireframe. MockFlow streamlines the wireframing process, giving you more time to focus on refining and iterating your designs. Let AI handle the groundwork, so you can concentrate on creativity and collaboration

AI Feature series 2: Screenshot to Wireframe

AI Feature series 2: Screenshot to Wireframe

New in MockFlow AI: "Screenshot to Wireframe" Now, you can upload a screenshot of any user interface and let MockFlow instantly transform it into fully editable wireframes. This tool is perfect for brainstorming and refining the UI of existing products or websites.


Many users rely on MockFlow not just for designing brand-new interfaces, but also for updating or iterating the UI of their current software. Previously, this involved uploading a screenshot, cropping it, and manually adding elements—a tedious process that often fell short, as bitmap screenshots aren’t editable.


With our new AI-powered feature, those challenges are now behind you. "Screenshot to Wireframe" eliminates the need for overlaying elements or recreating wireframes from scratch. Simply upload your screenshot, and MockFlow will generate a wireframe or sketch-style representation that’s fully editable, making it much easier to iterate on your UI design.


This feature is accessible by clicking the camera icon in the create-new screen of the dashboard. And also inside the wireframe editor as part of our "Genius AI toolkit".


Screenshot 2024-10-10 at 10.23.48 PM.png


AI Feature series: Text to Wireframe

AI Feature series: Text to Wireframe

Introducing "Text to Wireframe", simply type what's in your mind and let AI imagine the wireframe design for you.


With just a few words, our AI-powered tool generates wireframes based on your idea. Our AI tech converts your prompt to meaningful details. These details are then used to create a rough layout which in turn perfected with repeated iteration. The final design is then transformed into a editable wireframe in the style mentioned by the user. It can be sketchy, lo-fi or hi-fi.


It could be wireframe for a landing page, mobile app, SaaS tool or any UI that you require. For better output, you can provide more details in your prompt like what sections you require and what functions it provides.


With "Text to Wireframe AI" features, MockFlow ensures that you never start your UI ideation process on a blank page. Unlike other "Text to Image AI", the wireframes generated is fully editable and can be customized to suit your needs.


text2wireframe.png


AI powered "Text to Wireframe" feature is available for free. Paid plans get more credits for wireframe generation. For more details visit our pricing page.


Important Note: This is a Beta feature, which means it can be unstable at-times with un-expected outputs. Also like with any other AI software it can hallucinate and sometimes may not give desired output. We are also continually updating it with improved generation.


Update: Real-Time Call Alerts for Video Meetings in MockFlow

Update: Real-Time Call Alerts for Video Meetings in MockFlow

MockFlow now offers real-time call alerts for its prime in-design video meetings feature. Call alerts helps your team stay on top of their design work without missing important audio or video meetings! Our new "Call Alerts" feature sends real-time notifications during in-design sessions. It lets your team focus on brainstorming while staying connected with project members.


How it works?

Screenshot 2024-09-08 at 9.48.27 PM.png


When brainstorming a new UI idea, or ideating a process flowchart or designing product assets with your team, it is important to not just collaborate in real-time but also communicate in sync. For this MockFlow already offers the ability to conduct audio or video meetings inside its editor without any third-party software. At the same time, when you start a meeting, it is important to bring your online project members together by alerting them.


By clicking the 'Headphones' icon in the top toolbar, anybody in your team can now kickstart a design meeting or a brainstorming session face-to-face. On clicking start, it sends a call like alert to other project members to either accept the meeting or decline just like your phone.


Screenshot 2024-09-08 at 9.55.19 PM.png


With design meetings + call alerts, MockFlow brings your remote team closer than before for brainstorming your next software.





New Wireframing UI Kit for shadcn/ui: 190+ Components

New Wireframing UI Kit for shadcn/ui: 190+ Components

Brainstorm your SaaS apps mimicing shadcn look and feel.


shadcn/ui has quickly become a popular opensource library for building UI with reactjs. The reasons for its quick rise includes huge number of pre-built components, priority for accessibility and ease of use.


If you plan on developing web apps with shadcn, then it is important to brainstorm your UI ideas in its native look and feel to avoid implementation redesigns and to save time. With this new UI kit, MockFlow wireframing editor provides over 190 components in around 12 categories like forms, tables, alerts, charts.


With the easiness of MockFlow editor and extensible component set of this UI kit, you can draw UI mockups in minutes and iterate faster. Here is a sample UI screen for a dashboard was made with this UI pack in a matter of minutes.


shadcn wireframe dashboard made with MockFlow


For more information and installing the UI kit, Visit its MockStore page within the editor





Copy and Paste Component Styles in Wireframe Editor

Copy and Paste Component Styles in Wireframe Editor


Our latest feature enables you to copy styles alone from one component and effortlessly paste them into another component or multiple components. This will help to save you valuable time and make style updates a breeze.


Key Highlights:


  1. Efficient Style Management: With the new Copy and Paste Styles feature, you can quickly replicate the styling of any component to others, ensuring consistency across your project.
  2. Simple Shortcuts: To copy styles, use the shortcut Cmd+SHIFT+C. To paste styles, use Cmd+Shift+V. These shortcuts make the process swift and seamless.
  3. Preserve Underlying Data: When you paste styles, the underlying data of the target component(s) remains intact. This ensures that only the appearance is modified, without affecting the content or functionality.
  4. Enhanced Usability: This feature is designed to enhance the ease of use of MockFlow, making it more intuitive and user-friendly.


How It Works:


  1. Select the Source Component: Click on the component from which you want to copy the styles.
  2. Copy Styles: Press Cmd+SHIFT+C to copy the styles.
  3. Select the Target Component(s): Choose one or multiple components where you want to apply the copied styles.
  4. Paste Styles: Press Cmd+Shift+V to paste the styles onto the selected component(s).


We believe this new feature will be invaluable for maintaining visual consistency and speeding up your design process.


Stay tuned for more updates as we continue to bring enhancements for your wireframe needs. Thank you for being a valued user of MockFlow.


Happy Designing!

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.


Create Symbols - MockFlow Symbols


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.


Use Symbols - MockFlow Symbols


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


Symbol Instance - MockFlow


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
  3. Comments
  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.


Wireframe iPhone apps with iOS 18 UI Kit

Wireframe iPhone apps with iOS 18 UI Kit

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.


IOS 18- MockFlow UI Pack.png


It is available for free in all plans.



Feature Update: Mark Design Feedback as Resolved

Feature Update: Mark Design Feedback 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.


https://wireframepro.mockflow.com/view/MPVDm26QRh#/page/24401d845a944f65b7694a175fd27082/mode/docs


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.







Update: Visually Suggest Design Changes, Not Just Comments

Update: Visually Suggest Design Changes, Not Just Comments

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.





Update: Create Sketchy UI Flows, Flowcharts, and Diagrams

Update: Create Sketchy UI Flows, Flowcharts, 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.




Flow App Integrations for Microsoft Office 365

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.


2.png



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 Flow App for Flowcharts, Diagrams, and More

Launching Flow App for Flowcharts, 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.


s1.png


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.

s3.png



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.



MockFlow Designer Now Offers Offline Support for *.dsgn Files

MockFlow Designer Now Offers Offline Support for *.dsgn Files

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 MockFlow Designer App for Graphic Design

Introducing MockFlow Designer App for Graphic Design

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!

MockFlow New AI Update: Generate Color Palettes with Prompts

MockFlow New AI Update: Generate Color Palettes with Prompts

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.


D6e811ccf59e93c4a56a7b4a8e4dab11e.png


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.


c3.png







Wireframe UI Kits for iPhone iOS 17 & iPadOS 17 Now Available

Wireframe UI Kits for iPhone iOS 17 & iPadOS 17 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...


M8c81a8e65fc75b3db601a126bff289971695028953328.png



iPadOS 17 wireframe components for iPad

Mc4881fbf180b328190b22ad1bdd2c7f01694710026067.jpeg


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.


M859acb7434d4bac663732b5a13ee9a581695031651375.png


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


D85a9a0ab668e4de4d0f146c6a835083e.png


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


table.png


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.


D101332356bc259ce587398d7e9e2de45.png








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


M165e8fc27daecdf4d49b703b813f0cee1694004967250.png