Product updates

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!

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.

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.

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.

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.

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.

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.

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

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

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

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

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

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

Example Prompts:

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

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

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

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