New 10 Jun 2024

Introducing "Docs" mode for UI design

Introducing "Docs" mode for UI design

Now document seemlessly alongside your wireframes, flowcharts and designs for a more cohesive brainstorming of your software ideas.


Ideating software is a two sided process, that includes designing and documenting ideas parallely. Both should go hand-in-hand for process oriented software teams. Documenting helps to describe, annotate, and detail your UI sketches which is otherwise hard to represent in just drawings.


Introducing "Docs" mode in MockFlow


Considering the above points, for the past 6 months our team has worked hard to deliver "Docs" inside your existing wireframing projects. "Docs" that is designed specifically for software ideation. Let us checkout some of its unique advantages and features that it provides when you combine docs and design.


Switch between "Docs" or "Design" in a snap

The top toolbar in wireframe editor allows you to switch between "docs" or "design" mode instantly and without disrupting your current selection or workflow. Without reloading or changing the design content, the editor intelligently organizes its interface around it based on the selected mode.


Screenshot 2024-06-10 at 2.36.31 PM.png


Refer and anchor "Design" elements inside your doc.

Just like linking to external websites or linking internally within the document. It also allows you to reference and link specific design components from the wireframe inside the doc. Clicking on the link will take you to that specific page and component. This make it super-useful to build contextual design documentation for your wireframes.


Screenshot 2024-06-10 at 2.37.36 PM.png


Templates made for "Design docs"

You need not start with a blank doc, start with a template using our doc template library created for design documentation. It is growing fast and for now it has templates like "UI checklist", "Product Requirements"...with more on the way.


Generate Docs with AI

If you are unable to find a suitable template, then generate a complete doc with AI in just a prompt. We use the top of the line GPT model fine tuned for producing rich text documentation meant for software. You can also generate parts of your doc in a particular tone using the inline AI toolbar.


Screenshot 2024-06-10 at 2.38.50 PM.png


Export doc to PDF format

You can export your entire doc to PDF format for printing, email sharing or simply as an archive or for backup.


Your team can edit together with real-time function

Just like Google Docs, docs in MockFlow can be edited together by your team with no restriction in the number of members. This helps to brainstorm ideas and write document together in real-time.


Other salient features of our "Docs" mode

It is built with all modern features that you would expect from a docs editor like Auto-generated and searchable table of contents, callouts, embeds, button, checklist and more...


Screenshot 2024-06-10 at 2.39.24 PM.png


Public view "Docs" mode choice

When you share wireframes with public link (encrypted key or not), there is now an option to enable "Docs" as the default view type when the wireframe opens.


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


Offline support for "Docs"

MockFlow Desktop app for Mac and Windows supports "docs" mode in offline file based projects. In .wire,.flow or .dsgn docs can be created and saved just like the online projects. This is a great option if your business wants to offload any important design docs from the cloud.



We are glad to launch "Docs" mode with so many features in just its first release, But honestly as a huge update it will definitely have certain quirks and issues. Kindly provide your feedback as we are continuously releasing with new updates every week.


BTW "Docs" mode is available for free (except AI features) including the Basic plan.







Share :
1