FAQ Submit a request Log in
  1. Moqups Help Center
  2. Working with Moqups
  3. Icons

Articles in this section

    Format, Style & Replace

    Also in this section

    Format, style, and replace icons

    Once design elements – icons, stencils, templates, and images – are added to the page, they are called Objects.

    All objects – including Icons – are styled and customized in the Format Panel, and they share many of the same formatting controls.

    But there is one special feature specific to Icons: the Replace function.

    In this article, we’ll introduce you to the Format Panel, and show you how to customize icons to create your design. We’ll show you how to save a custom style and we’ll explain the unique utility of the Replace function.

    In this article

    Format Panel

    Go to the Right Sidebar and click the Format Tab. The tab will turn blue, and will open the Format Panel. The Format Panel also opens automatically when you double-click on an icon located on the page.

    The Format Panel is divided into Sections with specific formatting controls. The sections are collapsible, so clicking on a section’s name will hide or reveal that section. 

    The panel will always display the default sections that are common to all objects: Size & Position, Fills & Strokes, Opacity, Drop Shadow, and Blur.

    Select, Size, Position, Rotate, and Flip

    When you select a single object, that object’s name is displayed at the top of the panel, just above its coordinates. This makes it easy to locate and identify that object in the Outline Panel.

    When you select multiple objects, the panel displays the number of objects in that group, in order to help you confirm your selection before applying any style changes or transformations.

    Size, Position, Rotate, and Flip controls are grouped together below the coordinates, and each of these actions can be performed both in the panel or on the page.

    Size

    On the page, use the resize handles to change the size of the object.

    In the Format Panel, use the Width & Height inputs for precise values and fine-tuning, and use the arrow keys, on the keyboard, if you want to change these values incrementally.

     
    Copy and Paste into the Width & Height fields if you want several objects to be the exact same size.
     

    An icon’s Aspect Ratio is locked, by default, when you add it to the page. This is to maintain its appearance and proportion. If you need to customize the icon’s proportions, click on the Unlock Aspect Ratio button and resize the icon on the horizontal or vertical axis.

    Position

    On the page, select an object and drag it to the desired position.

    In the Format Panel, set the object’s position by entering the exact coordinates in the input fields. Your object’s position is measured in pixel-distance from the left and top margins. You can use your keyboard’s arrow keys to change these values incrementally.

     
    • Once an object is selected on the page, the arrow keys move objects pixel by pixel – for fine adjustment.
    • Shift + arrow moves objects 10 px

    Rotate

    On the page, click the rotation handle at the top of the object and drag to rotate.

    In the Format Panel, enter the degree-value in the Rotation Input Field. You can change the value by using the keyboard’s arrow keys.
     
    Shift + rotate will turn the object by 15° increments.

    Flip

    You can flip an object both horizontally and vertically.

    On the page, select a Resize Handle and drag it across the centerline of that object to simultaneously resize and flip.

    In the Format Panel, the vertical and horizontal Flip Buttons flip the object while still maintaining its size and aspect ratio.
     

    Color Fills & Strokes

    Fills

    To fill an object with color, go to the Fills & Strokes section and click on Background Color to open the Color Picker Popover.  

    Select the Swatches Tab to choose a color scheme from Moqups Classic, Material Design, Bootstrap or iOS 8. This tab also displays the colors you’ve already used in your project.

    Select the Picker Tab to create your own custom colors.

    In both tabs, you can…

    1. Enter the Hex value for a color
    2. Adjust the fill-color opacity

     
    Double-clicking on the Opacity icon will make that object’s color transparent.

    Strokes

    Stroke refers to the line of the object itself.

    To adjust the stroke color, go to the Format Panel, and in the Fills & Stroke section, click on Stroke Color. Here, you can also set the stroke opacity.

     
    Flip the stroke & fill colors by hitting Shift + X
    Under the color settings, you can choose the Stroke Width, and set Stroke Style to Solid, Dotted or Dashed.
    9._NEW_Icons_-_Format___Style_-_Icons_Strokes.png
     

    Replace Color

    This feature makes it possible to quickly update your color scheme as you move from lo-fi wireframes to hi-fi mockups – and finally to polished designs and prototypes.

    You can choose to replace a color throughout an Entire Project, on the Current Page, or within a specific Selection of objects.

    To replace a color within the Entire Project or on your Current Page:

    1. Deselect all objects on the page
    2. Expand the Replace Colors section in the Format Panel
    3. Select Current Page or Entire Project
    4. Check boxes to choose Fills, Strokes or Text Color
    5. Click on the project color you wish to replace
    6. Select the replacement color from 
      • Project colors
      • Swatches
      • Picker
      • By entering a hex code

    To replace a color within a Selection of objects:

    1. Select one or more objects
    2. Expand the Replace Colors section in the Format Panel
    3. Select Current Page or Entire Project
    4. Check boxes to choose Fills, Strokes or Text Color
    5. Click on the project color you wish to replace
    6. Select the replacement color from 
      • Project colors
      • Swatches
      • Picker
      • By entering a hex code

    Opacity, Shadows, and Blur

    Opacity

    The Opacity slider adjusts the global Opacity of a whole object, or group of objects. If you want to customize opacity more precisely, you can also adjust the Stroke opacity (see above), together with global Opacity, for a combined visual result.

    Shadow

    To add a Shadow to an object, navigate to the Format Panel and open the Drop Shadow section.

    Enable shadow to set the color, opacity, angle, distance, and size of the shadow.

    Blur

    To add a Blur to an object, navigate to the Format Panel, open the Blur section, and enable the Blur slider. The Blur feature is particularly useful when mocking up a popover or modal window.
     

     
    You can bulk-apply opacity, strokes, shadows, and blurs to multiple objects. Hold down Ctrl/Cmd + select your objects, and then edit them simultaneously.

    Copy and Paste Styles

    Once you have customized an object, you can apply that customization to another object or group of objects.

    To copy and paste styles:

    1. Select the object from which you want to copy the styles
    2. Right-click and choose Copy Styles or press Alt/Option + C
    3. Select the object where you want to apply those styles
    4. Right-click and choose Paste Styles or press Alt/Option + V

    Save Custom Styles for Icons

    When you save a custom style for icons, every new icon that you add will adopt your custom style.

    To save a custom style for your icons:

    1. Style an icon on the page using the Format Panel
    2. Select that icon
    3. Right click to open the Context Menu
    4. Choose the Save custom style for Plain SVG
    5. All subsequent icons you add to that project will now reflect that style

    3.15._NEW_Icons_-_Save_Custom_Style.gif

     
    Setting a Custom Style for your icons is most useful at the beginning of a project, or when you are applying a comprehensive design system.

    To remove a custom style from your Icons:

    1. Select any icon on the page
    2. Right click to open the Context Menu
    3. Choose Clear custom style for Plain SVG

    3.16._NEW_Icons_-_Clear_Custom_Style.png

    To remove custom styles from all your stencil types, including icons:

    1. Select any object on the page
    2. Right click to open the Context Menu
    3. Choose Clear all saved styles

    3.17._NEW_Icons_-_Clear_all_Saved_Styles.png

    Replace Icons

    When you are tweaking your design, you may need to swap out an icon for a preferable one – but want to avoid the hassle of resizing and styling the new, replacement icon. That’s where Replace comes in handy:

    1. Locate your desired replacement icon in the Icon Library.
    2. Drag it to the page, and drop it on the Blue Dot that appears inside the original icon.
      or
      Select an icon on the page and hit Shift + Click on a new one from the library to swap it in.
    3. The new icon will replace the old one – and automatically adopt its size and style

    3.17._NEW_Icons_-_Replace_Icons.gif

     

    Images and Diagram stencils also have replace capability. 

    .