Anchoring elements in Flexitive allows you to set two elements to be connected. If two elements are anchored together, resizing or repositioning one of the elements will cause the other element to move in a way that maintains the anchoring. In this way, you’re able to easily connect elements and have them stay connected as you edit your design and create new sizes.
To anchor two elements together, follow the process below:
- On the canvas, or in the Layers panel, select the two elements you would like to anchor together by holding 'CMD' (or 'CTRL' on Windows), and selecting both elements.
- In the Size & Position panel, there is a heading for 'Element Anchor' options.
- Select an 'Element Anchor' option to anchor the elements together. Anchoring can be set up to be vertical or horizontal. Additionally, you can choose the alignment of the anchored elements.
Anchoring elements is a ‘One Size’ change, so you can apply it to the size you’re working in, without affecting the rest of your design sizes. For more information on ‘One Size’ changes, check out our support article on One Size vs All Sizes Changes.
In some instances, anchoring will not be available when you’ve selected multiple elements. There are a couple of different reasons this may occur. These include:
- One or more of the elements you have selected does not support anchoring (e.g. ISI Widgets and Legal Widgets do not support anchoring)
- You have selected more than two elements.
- One or more of the elements you have selected is already anchored to another element on the size you’re working in.
If you would like to unanchor elements, select the elements you would like to unanchor, open the ‘Size & Position’ panel, and click the ‘Unanchor Elements’ button.
How Anchored Elements Reposition on the Canvas
Once elements are anchored together, whenever you resize or reposition one element, the second element will reposition in such a way that it remains anchored to the element, and maintains the alignment set for the elements. If an element is positioned partially off-canvas, that part of the element will not be visible on the design once exported.
When adjusting the size and position of an anchored element, normal requirements for resizing will continue to apply. These requirements include:
- Elements can be resized individually, or as part of a group by selecting multiple elements with the ‘CMD’ or ‘CTRL’ keys
- Resizing or repositioning elements are One Size changes that will not affect other design sizes you have created.
Anchoring and Auto-Resizing Text Boxes
If a text element is set to have ‘Auto-Resizing Text’ turned on, changing text content will cause the text box to automatically resize to fit the new text content.
The resizing caused by an Auto-Resizing Text box will be taken into account when elements are anchored together. This will take place both if the text is changed manually, or if changed in an automated fashion (such as using Dynamic Design Production).