What’s New: February 19, 2019

New Features:

  • Components: Create reusable elements that inherit the properties of an original object or group, and instantly apply comprehensive and consistent changes within projects. Save your team the tedium of applying repetitive updates – and free them for more creative and productive work!
    • Use the Component button in the Top Toolbar, or the Component section of the right-click Context Menu, to create a Component from any selected object or group.
    • The Component acts as the master to any and all copies – or Instances – that are made from that component.
    • Instances immediately adopt changes made to the Component itself, but you can always apply overrides by making changes to any individual Instance.
    • ‘Reset Instance’ removes any overrides, and re-applies the Component’s style and properties to that Instance.
    • Just as with any object, you can create complex components by nesting them.
    • ‘Go to Master Component’ will take you to its location, allowing you to make changes to that Component and all of its Instances.
  • New ERD Model and Use Cases diagram stencils:
    • ERD stencils let your team design DB tables and their relationships right inside Moqups. We’ve also added new diagram connector styles and smart defaults, including Crow’s Foot notation.
    • Use Case diagrams help provide a quick overview of complex systems, their purpose, and their participants.
  • Changes to Locking and Unlocking of Objects:
    • The Lock button has been removed from the Top Toolbar, and has been added to Format and Outline Panels.
    • In the Format Panel, click the Lock button to the right of the Object Name; the Size and Coordinates section of the Format Panel will remain hidden until the object is unlocked.
    • In the Outline Panel, click the Lock button to the right of the object name; the button will darken when locked.
    • Use the right-click Context Menu to choose the Lock/Unlock Selection option, or use the Keyboard Shortcut: Ctrl/Cmd + L (this keystroke works for both Lock and Unlock).
    • When locked, the object will display a red border on hover and, once the object is selected, a lock button will show in the upper-left corner of the red border. That button can be used to unlock the object.
  • Password Protected Export as PDF:
    • Now, you can provide an added layer of security by setting a password for your exported PDF.
  • Create Pages Automatically from within the Image Library:
    • Use the right-click Context menu to create new pages directly from your image selection.

Improvements:

  • Connectors:
    • The text-color of a Connector Label now defaults to that Connector’s color.
    • Changing the Connector color will change the text-color of its Label as well, unless the Label color has previously been overridden.
    • Hitting Enter on a selected connector line adds a Connector Label, or opens the first extant Label for editing.
  • Updated Google Fonts.
  • Updated Font Awesome icons to v 5.7.
  • Hovering over the Gradient Slider now reveals a  ‘+’ icon, indicating that a click on the slider will add a new stop.
  • Compound-stencil names are now displayed in both the Format and Outline Panels.
  • The Aspect Ratio of a selected object can be temporarily locked or unlocked by holding down the Shift key and dragging.
  • Projects in Preview now load in the top-center position.

Bug Fixes:

  • Fixed a bug that caused the Connector Style section of the Format Panel to be displayed twice.
  • Eliminated announcement banners in Preview mode.
  • With the Background Removal tool, a single click on any solid color now removes that color.
  • New objects created using Diagram Extenders are now named sequentially (i.e. Process 2, Process 3, etc).
  • Fixed a bug that incorrectly displayed a group border around icons not included in the group.

Introducing Gradients – Red, Green, and everything in between!

The deepening of blue as you move from dock to sea. The waves of color in autumn hills.

The slow ripening from green to red on a mango’s skin. Subtle gradations of wet sand along a shoreline’s footprint. The sudden blush of a baby’s cheek. And the lustrous waves of orange, pink and blue as the sun finally leaves the sky.

Flowchart diagram styled with gradients in Moqups

Gradients grab our attention because they depict momentous movements from one state to another. That’s why we take so many pictures of the natural gradients in our world – and in our lives.

And that’s why a gradient was a natural choice for Instagram’s when they redesigned their logo in 2016. That controversial move began the rediscovery of gradients after the era of flat design. Spotify’s rebranding in 2017 – using gradients and duo-tone color – was a clear signal that gradients have become a significant trend.

The rehabilitation of gradients is not just because they compel and draw our gaze, but because – especially in an era of hi-def screens – they are highly effective at moving a users attention through a design.

Because the human eye invariably lands on the brightest point on the screen, and then follows changing hues and shadows to explore the page, gradients can be used to put the focus on a logo, to highlight content, or to coax the user’s eye below the fold. And by mimicking light sources, and providing shadow effects, they can add texture, depth, dimension, and realism to backgrounds, UI elements, and image overlays.

A great gradient becomes almost a color onto itself – instantly recognizable and at the core of branding.

Gradients have been one of our most requested features, and we are proud announce that to this powerful branding tool is now available for your designs. Gradients easily applied to both Fills and Strokes.

To apply a gradient…

  1. Click on the Fill or Stroke Color
  2. At the top of the Color Picker Popover, you can choose from three Fill Types: Solid,  Linear gradient, and Radial gradient.
  3. For gradients, select either Linear or Radial gradient.
  4. The Gradient Slider has two default Stops that can be moved back and forth to adjust the start and end point of the gradient.
  5. Click on a Stop to apply a color from the Color Field. The Stop will remain blue while active. You can make further color adjustments below by using either the Hue or Opacity sliders, or by selecting from a range of color swatches derived from the currently active color.
  6. To add more stops, hover over the Gradient Slider until you see the ‘+’ icon; click on the slider to add a new stop.
  7. To remove a stop, drag it downward until it disappears.
  8. Use the Flip icon on the right of the Gradient Slider to reverse the order of colors.
Applying gradients in Moqups (animation)

The controls in the upper-right corner let you adjust the gradient’s Angle (for Linear) or Center (for Radial). For even more precision, you can set the Linear Angle by degree, or the Radial’s Center by X/Y coordinates in the accompanying input fields.

The Radial gradient also has a Stretch option that expands the Radial gradient to the margins of the object.

Using advanced gradient features in Moqups (animation)

As always, we love your feedback! So play, experiment and work with our new Gradient feature, and let us know about your experience, suggestions, or advice. Write us at support@moqups.com, or just leave us a comment below.

What’s New: December 20, 2018

New Features

  • Gradients – both Linear and Radial – are now available for both Fill and Stroke colors.
  • We’ve added UML diagram stencils to the Stencil Library, and UML start-and-end markers to the Connector Style section of the Format Panel.

Improvements

  • In the Pages Panel, there’s now an ‘Empty trash’ option in the right-click Context menu when viewing the Trash.
  • Default icon names now appear in both the Outline and Format panels.
  • A connector’s label-text-color now defaults to match the connector’s stroke-color.

 Bug Fixes

  • You can now use the Escape key to cancel the ‘Rename’ function in the Pages panel.
  • In Diagram mode, you can now draw a connector from the middle connecting point when zoomed out.
  • Paper Grid lines now align properly with the Ruler markers, and added stencils remain aligned with grid lines when zooming in and out.
  • The Project Colors palette in the Format Panel now updates to include Diagram connector colors as they are added.

What’s New: November 13, 2018

Improvements

  • After you copy a page, right-clicking on a folder pastes that page directly within it.
  • To make page-numbering more consistent, we’ve made a slight change in our protocol: now, by default, the first page in a project is called ‘Page 1’ instead of ‘Page’.

Bug Fixes

  • If you’ve chosen to hide Hotspots (by deselecting the ‘Show hotspots’ option in either the Interactions Panel or the Workspace) those Hotspots will no longer be highlighted by hovering over the page or the Outline Panel.
  • Fixed a bug that, under rare circumstances, caused the Pages Panel render improperly.
  • When either dropping or pasting images into an unsaved project – or if the user is not logged in – the appropriate prompt will now appear.
  • Fixed a bug in the Viewer that sometimes caused Hotspots to rearrange themselves.
  • Fixed a bug that prevented the right-click Context Menu sub-categories from appearing on smaller screens.

What’s New: October 30, 2018

New Features

  • Automatic Paragraph Stencils:
    • If you use the keyboard shortcut Ctrl/Cmd + V to paste pure text directly onto the page – either from within the app or from an external source – Moqups will automatically paste the copied text in a new Paragraph stencil.
  • Set as Default Style in Context Menu:
    • Now you can style an Object (or Connector), and then use the right-click Context Menu to set that customization as the Default Style for subsequent objects; it does not affect the style of objects that you’ve already added to the page. This makes it easy to customize a string of objects and/or connectors, and then quickly jump to a new default style, and so on.

Improvements

  • To help our Support Team effectively address your issue, you can now attach relevant files to the Contact Support form.
  • Custom Handles for the Process stencil now allow you to round the corners (adjust the border radius).
  • Snapping now works to the center of objects as well as to their edges, making it quicker and easier to align objects in staggered formations; this is especially useful with diagrams and flowcharts.
  • In Page Settings, you can now adjust the page size using numerical input with Expressions; numerical inputs also work in the Format Panel, letting you quickly adjust any object’s size, position and rotation.
  • The Fit page to content feature (accessed through the right-click Context Menu) now gives you the option of setting the spacing (padding) around your content.
  • Connectors remain attached to their objects, and in their correct positions, when you apply an Align operation to those objects (either from the right-click Context Menu or by using the buttons at the top of the Format Panel).

Bug Fixes

  • Fixed a bug that caused random errors when duplicating a selection of objects that included connectors.

Check out other recent release notes in the What’s New section of our Help Center.

What’s New: October 22, 2018

New Features

Improvements

  • Snapping now prioritizes:
    • Distance snap over Object snap.
    • Snap to page’s Center/Edge over snap to Object.
  • You can now drag and resize a page ‘through’ an object ( i.e. when an object sits in front of the page-resize handles).
  • The Format Panel now displays the number of objects in a selection; this makes it easy to quickly check your selection before applying any style changes.
  • We’ve improved the performance of both the Image and Template Libraries.
  • The Dashboard is now faster when loading projects or switching teams.
  • Image uploads are quicker, both by drag & drop and by file.
  • When you use the Diagram Extenders to add new flowchart stencils to your diagram, the page automatically scrolls to the end of that flow.
  • Improved the behavior of Object Groups, both on the page, and in the Outline Panel.
  • The Grid stencil now has cell-padding options (in the Grid Style section of the Format Panel).
  • Google Web Fonts have been updated.

Bug Fixes

  • Previously, if you had an item selected in Templates Library, and then clicked the ‘Create a new folder’ button, the selected item was accidentally nested within the newly created folder.
  • Diagram Connectors are now displayed correctly in both Template Thumbnails and Export to HTML.
  • Images dragged and dropped onto the page – from outside the app – are no longer automatically added to the Image Library; this helps you avoid unwanted clutter in the library.
  • Fixed several issues with the Smart Connect and Replace Stencil features.
  • Fixed a bug that canceled image uploads if the user used drag-&-drop, and then switched pages before the upload was complete.
  • Previously, if you expanded a folder (or a series of nested pages) in the Pages Panel, that action accidentally expanded all the folders and nested pages within that Page Tree.
  • Using Shift + Clicking on the Zoom Icon automatically zooms in or out to fit the page within the Editor (or Viewer) window; that zoom now also correctly centers the page.
  • Fixed a bug that caused the Editor to get stuck in Read Mode if you exited Preview while using the grab cursor (hand) to pan the page.
  • Removed object highlights when using the touchpad zoom in Preview mode.

Check out other recent release notes in the What’s New section of our Help Center.

What’s New: September 25, 2018

New Features:

  • Supercharged Diagramming Tools:
    • Diagram Extenders:
      • Selecting a Flowchart Diagram stencil on the page will now reveal arrows on all four sides of that object. Clicking on any arrow will duplicate that object, automatically connect them, and then open the new object’s text-edit mode for quick renaming.
      • For lighting-fast, omnidirectional work, Shift + Alt/Option + Arrow keys also adds and connects objects.
      • When there is an object immediately adjacent from the one you are ‘extending’, clicking the extenders – or using the keystroke – will automatically connect those two objects.
    • Replace Stencils:
      • You can quickly update and replace any Flowchart Diagram stencils that are already part of a diagram on the page. Just drag the new stencil over an existing one, and drop when the ‘replace’ icon appears.
    • Swap Start & End Markers:
      • Hold down Shift + X to reverse the start and end markers of any connector; this is the same keystroke that reverses the Fill and Stroke style when an object is selected.
    • Connector Styling:
      • Now, after you style a connector, any subsequent connector you create will automatically adopt that style – until you change it again.
      • Previously, if you wanted to mass-style connectors that were already on the page, you had to select them individually; now selecting a group of objects and connectors will reveal the ‘Connector Style’ section of the Format Panel, and let you customize all the selected connectors at once.

Improvements:

  • Workspace > Advanced Settings
    • Some users prefer to work without object highlights, so now you can select or deselect ‘Highlight object while hovering’.
    • ‘Select behind Locked Objects’ is now turned OFF by default.
  • Various performance improvements

Bug Fixes:

  • The Presence Border now follows the selected object reliably, and no longer gets stuck in place when moving or zooming.
  • The New Project dialog no longer closes if you accidentally click outside its frame.
  • In the ‘Invalid file type’ warning dialog, the list of ‘currently supported files’ now includes SVG files.

Check out other recent release notes in the What’s New section of our Help Center.