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.

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.

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.

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.

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.

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!

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.

Steps to use

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

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

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

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

MockFlow Home

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

New SideBar

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

Simplified Space layout

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.

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

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

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

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

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

Link to OTT web pack

Link to OTT mobile pack

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.

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.

Click here for the Slack UI Pack

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.

Install now

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.

Usage

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.

Happy Wireframing!

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:

1. Both started as simple static website generators but now started moving into the app realm. Which makes them powerful but also overwhelming for new users.

1. Based on React Framework. This can be good or bad. While R eact has its benefits, You do not write code inside these libraries like a regular website developer but like an app developer. Which means you can't simple use css classes or easily insert regular JS libraries like jquery.

1. Focuses on the core. What we mean is that they relegate control like hosting and deploying and even image conversion to third party libraries. For example finding a capable webp conversion for our nextjs site took a lot of time to figure out as it does not work out-of-box.

1. It feels it is more directed towards application developers who want to create websites which makes it more complicated and increased learning curve for new users.

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.

Now enters PrevJS

The start

Based on the above facts, we decided to create a slim static-site generator that focuses only on creating websites. Not apps, not fancy frameworks, just good old website development that everybody knows. As like any other static site generator, a good templating library is important. For this instead of creating our own library from scratch, we narrowed down on EJS (Embedded Javascript Templates). Which is great and simple to use. As the name suggests it allows to mix javascript with html to creating dynamic data within a page. There is no learning overhead as long the developer knows basic html and vanilla js.

Indeed PrevJS + EJS became the perfect union for creating static sites.

Focus on website

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.

With MockFlow

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.

Availability

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

Future

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.

Re-designed UI/UX

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.

Curated Templates

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:

1. Office 365 - Word, Excel and Powerpoint
2. BrightCove - video service
3. Wistia - Video service
4. WowTo - Product explainer videos
5. Airtable - Database and lists
6. Arcade - Interactive product demos
7. CodePen - Shared code demo snippets

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.

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

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

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

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

Image placeholders

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

Logo placeholders

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

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

Happy Wireframing!

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

It comes with nearly hundred components in the following categories:

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

It is now available in MockStore. Install now.

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

What are component level themes?

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

Benefits of component level themes

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

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

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

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

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

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

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