Author: moqups

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.

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…

Click on the Fill or Stroke Color

At the top of the Color Picker Popover, you can choose from three Fill Types: Solid, Linear gradient, and Radial gradient.

For gradients, select either Linear or Radial gradient.

The Gradient Slider has two default Stops that can be moved back and forth to adjust the start and end point of the gradient.

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.

To add more stops, hover over the Gradient Slider until you see the ‘+’ icon; click on the slider to add a new stop.

To remove a stop, drag it downward until it disappears.

Use the Flip icon on the right of the Gradient Slider to reverse the order of colors.

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.

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.

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.

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.

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.

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.

New Features

To make selection easier, objects will now be highlighted when hovered. This should especially make the selection of thin or small objects much easier and reduce missed clicks.

Improvements

In the Pages, Templates, and Images panels, right-clicking on the empty space – at the end of the library or page-list – now displays the Context Menu and offers the option of creating a ‘New folder’. Previously, you had to use the icon in the toolbar to do this.

Thumbnail performance has been improved in the Pages, Templates, and Images panels.

Bug Fixes

Images and Templates Libraries:

Fixed a bug that prevented drag and drop of SVGs from the Images Library to the page.

When dragging and dropping an image onto the page, the mouse pointer remains on the upper-left object handle, and is no longer offset.

Fixed a bug that intermittently prevented the upload of images after they had been selected.

Added a reminder to the Templates Library that a project must be saved before a new template can be created; a similar prompt already existed for Images Library uploads.

When dragging multiple templates onto the page, all of them now remain selected.

In both libraries, when creating a ‘New folder from selection’, a bug permitted the folder to be accidentally relocated during the renaming process.

Fixed a bug that caused occasional errors when adding images or templates to the page.

Restored the double-click to add images or templates to the page – but only in Grid View.

Various performance improvements.

When using the Background Removal tool, right-clicking on an image now exits that mode and displays the Context Menu.

Even though ‘Select behind locked objects’ was de-selected in the Workspace > Advanced Settings, dragging still selected those objects.

Fixed a bug that caused the Group Border to crash when flipping an object within a group.

Undo now properly restores deleted Connectors along with the objects they connect.