- Element Visibility between Sizes
Introduction: Visibility in Flexitive
Traditional design tools treat each new fixed pixel size (eg. 1920x1080) or aspect ratio (eg. 16:9) as a separate, self-contained file that's not linked to other sizes. One design concept is often built into dozens of sizes and treating each size as a self-contained, independent file makes the design build and subsequent revisions long and tedious.
In Flexitive you can think of each 'page' as a design concept, that can contain one size (like a 1920x1080) or dozens of different sizes. Every size that's activated in a Flexitive page shares the same uploaded assets, and some actions, like animations. For a full list of shared actions, check out our article on 'What Changes Affect All My Sizes vs. Only One Size'. By sharing assets, and some actions, between different sizes that are part of the same design concept, Flexitive makes the entire design product process shorter at every step.
Since each 'page' in Flexitive can contain multiple sizes:
- Elements aren't deleted from particular sizes, elements are hidden or shown on particular sizes. When you want to delete an element from a particular size, you should hide the element from that size. If you delete the element, it will disappear on every size. For example, if you've activated a 300x50 and a 900x150, they may have a similar layout because they share the same aspect ratio (6:1) but the 900x150 has significantly more space (total pixels) available. On the 300x50, we'll want to hide elements that are visible on the 900x150. For an example of designs that share an aspect ratio but have different layouts, check out these Flexitive designs.
- If we have more than one size activated (eg. a 300x50 and 900x150) and we add a new element to the 900x150, by default that new element will be added to all other activated sizes. Although you can choose what sizes we want a newly added element to appear on.
- When building a Flexitive page that contains portrait and landscape sizes, you'll likely have elements with a portrait or landscape orientation. You'll want the elements with a portrait orientation hidden on landscape sizes and vice-versa.
When you add a new element to the canvas, that element will be added to all activated sizes.
Using the Visibility settings in the Size & Position panel, you can make elements in Flexitive visible on a specific size, all portrait sizes or all landscape sizes. To apply Visibility settings to multiple elements at once, hold Ctrl while tapping on the elements either on the canvas or in the Layers panel.
Hiding an Element on One Size
To hide an element from the size you are working in, select the element and tap Hide on this Size.
Making an Element Only Visible on One Size
To hide an element in all but one size, select the element in the size you want it to be visible in and tap Only This Size under the Visibility options .
Making an Element Only Visible on all Landscape Sizes
To make an element only visible in Landscape sizes, select the element and tap Only Landscape under the Visibility options.
Making an Element Only Visible on all Portrait Sizes
To make an element only visible in Portrait sizes, select the element and tap Only Landscape under the Visibility options.
Making an Element Visible in All Sizes
To make an element visible in All sizes, select the element and tap All Sizes.