Keep track of announcements and product updates in MockFlow
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.
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.
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 in wireframepro editor is available free for all users including Basic plan. So start drawing without any hassles.
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.
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.
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.
Just like Cloud, Offline has its own salient features, let us check them out in the following points:
Note: Offline design is a product design + feature, available only in higher plans as mentioned above. For more information, contact us.
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.
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.
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.
The UI has been modified with a centered canvas and easy access to graphic components such as illustrations and icons.
Any graphics exported from the designer can be configured for retina-ready resolution, which is 2x of its original size.
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
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.
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...
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 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.
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.
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.
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.
MockFlow helps website planning with its SiteMap tool. Using the SiteMap app, managers can easily make an overall outline of their website's structure and also add in-depth details to each page in the structure with status, description, attachments and comments.
Today's update helps you can create an entire sitemap structure for your upcoming website with just a prompt. Simply enter the type of website for which the sitemap has to be created, the rest is done using our AI.
Examples include: Ecommerce website, Business site, Crypto portal and virtually for anything you need sitemap structure.
Once the sitemap is generated, you can share, collaborate and edit with your team members. Save time for better planning with this new feature.
Two years ago after we first released design spaces for MockFlow, it has become the de-facto way for many businesses to organize all their cloud based UI design content into spaces. Our customers used design spaces in many ways than we imagined - Space for organizing client design, Space for branding, Space for brainstorming UI and more like this. Spaces are not just for MockFlow content, it brings design related files such as images, videos, pdf and cloud based projects like Figma, Miro, Prezi - all put together in a single workspace making them logically related to each other.
Today we are happy to release the next major iteration of MockFlow Dashboard including spaces. Let us go for a tour of the key points in this release:
On opening MockFlow, you will now be taken to a default start screen. Here you can use the new "Create" bar for creating your MockFlow related projects like wireframing, styleguide, user testing. Also the home screen lists the last 10 projects you have opened.
Instead of the grid based layout used in the previous dashboard, this new version provides an easy to navigate sidebar. With the sidebar, the spaces are always listed and makes switching between spaces simple and fast. And all common operations like account settings, notifications, search are also part of this new sidebar which is always available no matter in which space you are.
We know how much our customers love their spaces. This iteration only makes spaces more simple, sleek and accessible with few subtle changes. The header height is reduced to a single horizontal section. A new "Create" bar that was seen in the home screen continues here. Now each design space is divided into only two sections - Projects and Files for easier understanding. Also there are numerous minor design updates that has gone into the new space layout.
Overall the new MockFlow dashboard brings a fresh perspective for UI design with its new "Create" bar, home screen and improved space.
In MockFlow, BYOC stands for "Bring Your Own Components." It is a feature that allows users to create and add their own custom design components using CSS and HTML to the MockFlow library, which they can then reuse in their designs.
These custom components can then be easily dragged and dropped into their wireframe projects, saving time and effort in the design process.
BYOC is particularly useful for design teams who need to maintain consistency across their projects or for individuals who have specific design requirements that are not met by the default components available in MockFlow.
Now with AI power, users can generate BYOC components with just a prompt.
The best part is any component generated with AI can be customised with code to make it perfect.
AI + BYOC is a perfect combination to save time on design projects that requires deep customization without much effort.
Wireframes are all about representation like how prototyping is for interactions. MockFlow already provides many ways with which you can wireframe your UI ideas
Each has its own use cases and it is important to choose the right style based on the intent of the design. Today's update brings Block based styling of components to create an informal UI design that stands between lo-fi and hi-fi.
It is represented by thick shadows, vivid use of colors within a small palette. It is really expressive in its own way. If you find sketchy wireframes are too unofficial or outline very basic, then the block style will suit you just right.
Here is a representation of Gmail UI using the block style UI pack. It lays stress to the UI elements and gives a better basic level picture of its components.
For more information and installing Block Style UI for your wireframe editor, click here.
We all know there is a sudden surge in OTT platforms (Over-the-top media service) delivering various forms of media content with a direct-to-customer approach. It is not just the big players like Netflix or Disney but many creators, agencies and small media companies start their own media platforms for better revenue share and to increase their brand equity.
Creating an OTT platform involves a multi-layered approach. In addition to a robust backend infrastructure, the user experience and UI are the most important factors to consider to increase viewership by delivering a satisfying experience. It also depends upon the target market reached like median age of the viewers, region and more such factors.
Designing and iterating UI for OTT can easily turn into an expensive affair if not properly brainstormed. It is important to make things clear in the idea stage of the application itself. Today, we are providing exclusive UI packs with hundreds of components to ideate both web and mobile for OTT.
It not only includes specific components like video player, playlists, video description but also pre-made screens that are usually part of any OTT service like a payment screen, search, homescreen etc..
Install the OTT packs from MockStore today and start ideating your media apps before it is actually developed. Save effort, time and budget.
AWS Amplify is a full-stack framework for creating web and mobile apps with less time. It provides dozens of react based pixel-perfect UI components for faster development. It is important to brainstorm AWS amplify with its original look and feel to make sure the developers get the correct idea and iterate faster to the finished design. The new UI pack for AWS Amplify lets you do exactly that by providing nearly 100 components and templates from the latest version of this framework.
For more details and usage visit MockStore.
Running out ideas for UI designs?. Use the new "Surprise Me!" button inside all our UI builders - Bootstrap, Tailwind and AMP builders to create a random page for you. This page can be exported to actual code or saved as editable wireframe design for further mockup. Every time the function produces a unique design based on the available UI blocks inside the builder. Let our UI builders ideate for you.
Building apps for the popular team communication software - Slack has become increasingly popular. Since Slack provides the required UI components, built-in sharing and communication, the developer only has to worry about a good use case to integrate their app inside Slack.
At the same time, iterating UI for the Slack app is not a smooth process as it requires lot of initial setup and a backend server. Our new UI pack for Slack in MockFlow helps you to brainstorm and iterate the frontend of your Slack app idea before you actually start developing it , saving time and effort.
When kickstarting UI design for your software or website, wireframe is the first stage of the process. Wireframes has to be done really quick and should be open to iterations. But it is also important for the creator to make an impact at the wireframe stage itself inorder to take it forward. But filling your wireframes with dummy text or image placeholders isn't going to create great opinions of your design.
Here comes our new powerup "AI Image", it leverages artificial intelligence to quickly create an image using just text. All you need to do is just describe what you want in a few words and the AI image powerup delivers a picture that is closer to your imagination. And voila simply replace your placeholders in wireframe.
Simply say "Laptop on a table with window in background" and click generate image. As easy as it gets.
In the end, deliver a wireframe that is closer to the real UI design without spending time searching for images around the web or creating from scratch.
AI Image powerup is strategically placed at a number of places inside the wireframe editor like in image component's settings panel and option to add image in image manager.
AI image along with AI text powerup makes wireframing in MockFlow fun, fast and exciting.
Note: There are AI credit limits for both powerups, for more details visit pricing page.
We just released a short and exhilarating video on what is MockFlow and how it transforms product design. Check it out.
We are pleased to announce updated UI packs in MockStore for popular desktop app frameworks - Windows and MacOS.
Now wireframing apps for the latest MacOS design language has got easier with the "Ventura" UI pack. It provides more than 100 components covering all important UI areas that includes fundamental elements, notification UI, wallpapers, icons, memojis and many ready made templates like Finder, Settings panel etc. Brainstorm your next application for the latest generation of MacOS with MockFlow.
For installation and usage, visit store.
Fluent Design is a revamp of Microsoft Design language currently used for creating native apps for Windows 11. The new UI pack updated for Fluent language features several pre-built components like start menu, explorer, wallpapers, toolbar, new design elements and also Windows based placeholders.
For more details and screenshots, visit store
AI is the buzzword nowadays, Thanks to innovations like OpenAI, now generating content is fast and more meaningful. Leveraging these modals, the new AI Text powerup for MockFlow, can now generate text for your wireframes with just a prompt.
Simply say "Write a tagline for our shoe store" and AI will generate a fancy headline for your UI design. From simple taglines to long descriptions, the AI text powerup will help you speed up your wireframe process.
Since wireframes are the pre-cursor to your actual UI designs, it is important that wireframes have real text as the design arrives to the expected level. At MockFlow we value saving time, Whether it is kickstarting your new wireframe with wizards, or generating text content in a click.
Note: AI as good as it sounds, it also incurs costs. So we have a generous credit system called "AI credits" to use this powerup. There are 20 AI credits per user per day for Wireframing plan. And 30 AI credits per user per day for ProductDesign. The credits reset each day and cannot be shared or carried forward.
For more details visit store.
MockFlow's wireframe editor is made for project managers, program managers, developers who want to bring out their UI ideas in a digital way without a learning curve. Which is why when compared to other tools, users find MockFlow simple to use, fun and having an hands-on approach to drawing UI.
Today's release makes it one step more easy with the introduction of the new "Wireframe Wizard". With this wizard, you don't even require an idea to start with, as you can simply build your page with pre-created UI blocks just like building a lego. And it does not end here, there are three types of wizards to choose from - Bootstrap styling, Tailwind UI and AMP email layouts.
Simply select the wizard, add the blocks for your page, and hit 'Save as wireframe' button. You can always edit and customize the saved pages with the wireframe editor.
Wireframe Wizard is free for all users. Now create a wireframe in seconds and share your ideas.
Wizard can be accessed when creating a new wireframe project from your design space. It is also available from the top menu inside the wireframe editor or pages sidebar.
When we set out to build a static website for one of our sub-sites with html pages, our first step was to select a static site generator from the numerous options mentioned here - https://jamstack.org/generators/ and when we researched this list, the popular ones like next.js and gatsby used React library as their underlying framework for building static sites. And some generators were specific for a particular purpose like blog, documentation site. and a few others had missing features or were not maintained.
After trying most of the tools mentioned above, we found NextJS and Gatsby better tools for this purpose. However it comes with certain catches. Here are our observations:
Although everything is not sour, they are fantastic tools and have a huge community of developers and users. Would definitely be a choice for react developers looking to develop sites and apps.
Indeed PrevJS + EJS became the perfect union for creating static sites.
The essential parts of a website development cycle is Create, Build and Deploy. While the main trait of PrevJS is to be easy as possible compared to other generators. It also wants to be a complete tool from development to deployment with focus on websites. This focus makes all the SEO features like sitemap generation, webp conversion, page pre-fetch, live preview, search index available out of box.
The Bootstrap website builder in MockFlow allows you to create website templates by simply drag-n-dropping blocks from a catalog of different website parts. After forming your pages, it can be exported to a prevjs recipe.
PrevJS is an opensource command like software. More details on how to install and use is available at https://github.com/produle/prevjs
To lean about its features, visit https://prevjs.com
npm install @produle/prevjs -g
We already working on interesting features for PrevJS, built-in search functionality for websites including templates. More deployment options like GCloud and Azure. And a cloud service with features like a/b testing and analytics.
MockStore is the resource hub for all your wireframing needs. Integrated within the editor, it provides easy access to hundreds of UI packs, templates and also add-on tools. Today's release makes MockStore better and more useful. The core part of this release is to enhance the user experience in MockStore to easily discover, find and install for your wireframing at one place.
The new theme used in MockStore makes it seemless with rest of the editor. Now UI Packs and Powerups are better organized with categories and templates have larger thumbnails.
Thanks to the MockFlow community who have contributed thousands of templates to the MockStore over the years. However from today, we have decided to provide high-quality and a curated set of templates for various frameworks brought to you by our in-house design team. It is now available in MockStore.
Powerups in MockFlow help to extend your wireframe ideas onto other stages of product design. Thus, so far to create a Powerup project, it requires an existing or new UI drawing. While this is great for having deeper integration between the wireframing tool and powerups, it might not be required in all cases.
For example, a product manager would want to create a Powerup project like SiteMap or an Agency wants to do a brand guide for their client without attaching it to a Wireframe. Today's update lets you do just that.
Introducing "Standalone Powerups", Now when you create a Powerup project from a design space there is no need to associate it with an existing UI drawing project. Which means each powerup project can be individually created, shared or deleted. Create your own standalone "SiteMap", "StyleGuide", "UX doc", "Personas" and many more projects for your design space.
What it means for us? This basically makes Powerups more powerful as they are now standalone apps. In the near future, you can expect more feature-rich apps for design space to achieve our goal of bringing the entire product design process under one roof.
Get the new UI pack for Tailwind version 3. It comes with over 150 components designed for brainstorming Tailwind based apps and websites. It includes, basic elements, widgets, hero sections, sample screens, avatars, modals, popups and more. It is available in MockStore now for free.
MockFlow's design space is about bringing everything about your software design together in a single unified view, even if you use different services for your product design. Design embeds helps you embed third party projects from other cloud services such as presentations, prototypes, videos, animations, 3D renders and more inside your space.
Today's update brings support for the following new embeds:
Also with this update, you can set custom thumbnails for your design embeds.
Note: Design embeds is available in all plans of MockFlow including the Free basic plan.