Product updates

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".

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.

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.

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?

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.

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

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.

For more information and installing the UI kit, Visit its MockStore page within the 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!

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!

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.

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.

It is available for free in all plans.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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 UI kit for Apple VisionOS is available for Free and can be accessed from within the MockFlow app. For more details visit MockStore link.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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!

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.

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.

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

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.

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

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.

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

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".

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

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

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.