Skip to content

Ribbon Drawing and Arrange Tools: Shapes, Connectors, Format Painter, and Layout

MX Design → Shapes and Arrange provides shapes, connectors, appearance copying, alignment, distribution, rotation, layers and grouping.

Authoring

Authoring: Ribbon Drawing and Arrange Tools: Shapes, Connectors, Format Painter, and Layout

MX Design → Shapes and Arrange provides shapes, connectors, appearance copying, alignment, distribution, rotation, layers and grouping.

Check the selection before using an arrange command

Arrange commands affect selected shapes. Hold Ctrl to select several objects. To change a child, select inside the group or ungroup it first.

  • Insert a shape or connector: no selection is required.
  • Align: select at least two objects.
  • Horizontal or vertical distribution: select at least three objects.
  • Group: select at least two groupable objects.
  • Ungroup: select one group object.

Insert shapes, straight connectors, and arrow connectors

Use MX Design → Shapes → ShapesInsertGallery to insert shapes. Drag Straight Connector or Straight Connector Arrow between object connection points, then move both objects to verify attachment.

  • Frames, buttons, and status blocks: choose a rectangle, circle, or another native shape.
  • Undirected relationship: Straight Connector.
  • Flow or sequence direction: Straight Connector Arrow.
  • After drawing, move both endpoints and verify that the connector stays attached.

Use Format Painter for appearance only

Select the source, click Format Painter, then click the target to copy fill, stroke, font and basic effects. Copy runtime behaviors with Behavior Browser → Copy Behavior / Paste Behavior.

  • Copy appearance: Format Painter.
  • Copy State Color, Write Tag, or another runtime behavior: Copy Behavior / Paste Behavior.
  • After painting, recheck the target object's text, component name, and behaviors.

Align left, center, right, top, middle, or bottom

Ctrl-select at least two objects and choose an Arrange alignment. If the reference is wrong, undo with Ctrl+Z, adjust the selection and retry.

  • A column of values: left or right align is usually useful.
  • A row of buttons: top align or vertical middle is usually useful.
  • Alignment changes position only; it does not equalize spacing.

Distribute objects evenly

Select at least three objects. Horizontal Distribution fixes the leftmost and rightmost objects and spaces the others; Vertical Distribution does the same from top to bottom. Position the endpoints first.

  • Distribution does not run with fewer than three objects.
  • Position the first and last objects before selecting the full set.
  • After distribution, check spacing against the page edge and nearby content.

Rotate and change layer order

Rotate Left 90 / Rotate Right 90 turns objects by 90 degrees. Bring Forward advances one layer; Bring To Front moves above all peers. Check backgrounds and transparent click targets after changing layers.

  • Wrong orientation: rotate left or right by 90 degrees.
  • Move across one neighboring object: Bring Forward.
  • Place above every peer object: Bring To Front.
  • Test visible overlap and click behavior after changing layers.

Group and ungroup objects

Group combines objects for moving, resizing or template reuse. Ungroup preserves child behaviors but removes metadata or animation belonging only to the template/group root. Recheck template identity and root behavior afterward.

  • Finish the repeated device parts before grouping them.
  • Before adding a behavior to the group, confirm the behavior should affect the whole group.
  • After ungrouping, check child behaviors, names, and layer order.
  • Reconfirm whether the result still needs to be saved as a reusable template.

Click the image again or press Esc to close