Index


In Flexitive, you can use the Layers Panel and the Layer Buttons to customize how elements are layered in your design. The Layers panel will help you: 


  • Make sure none of your elements are being hidden under other elements 
  • Easily prepare overlapping elements 
  • Easily select elements that are underneath other elements when animating your design 
  • Lock elements


Layering in Flexitive


The Layers of a design dictate the order in which elements would appear if you were to stack them all on top of each other. At the bottom of the stack, there will always be the background layers. 


By default, the background will always be transparent. You can change the transparent background by selecting the Canvas at the bottom of the Layers panel and using the Color Palette Icon on the left-hand side of the editor.



The elements in your design make up the rest of the layers, and by default are layered in the order in which you add them to the canvas. The order of the layers can be changed by selecting the element you want to move and tapping the Bring to Front, Bring Forward, Send Backward or Send to Bottom icons at the top of the Layers panel.



The Bring the Front and Send to Bottom options will send the element to either the first or last layer in the design, where Bring Forward and Send Backward will move the element up or down one layer. 


You can also re-order your layers by dragging and dropping them in the layers panel. Click and hold the layer thumbnail for the layer you would like to move, and drag and drop the layer to the desired position in the Layers panel.



Using the Layers Panel

The Layers panel in Flexitive displays all of the layers on your canvas in descending order, starting from the forward-most layer at the top and ending with the background at the bottom. You can open the Layers panel by tapping the Layers Panel icon in the top left corner of your screen.



Clicking on a layer in the Layers Panel will select the element, and double-clicking the layer will open the Size & Position panel for the element. The type of element (e.g. Shape, Text, Image, etc.) will be indicated in the top left corner of the thumbnail for each layer.



You can use the layers panel to select multiple elements within your design. Select the first element and then hold Ctrl for Windows or Cmd for Mac. While holding Ctrl/Cmd, tap all the other elements you wish to select. This will be indicated both in the panel by a green outline around each object, and each element will be highlighted on your canvas.


Visibility and the Layers Panel


In Flexitive, elements hidden on a size will be greyed out in the layers panel. In addition, the Eye icon to the right of the element in the Layers panel will be struck through with a green line.


To hide an element using the layers panel, tap the Eye icon next to the element you want to hide. You can also make a hidden element visible again by tapping the Eye Icon of a hidden element.



At the top of the Layer Panel, there is a toggle to Show Hidden Layers. When the Show Hidden Layers toggle is set to On, elements that are hidden in the size you are working in will be greyed out in the Layers panel and displayed as semitransparent elements on the canvas. When the Show Hidden Layers toggle is set to Off, the elements will be hidden from both the canvas and the Layers panel.



For more information on showing and hiding elements, check out our article on Element Visibility.


Lock Elements 


Use the Layers panel to lock an element on the canvas. Once locked, the element cannot be selected and no edits can be made. 


To lock an element, select the Lock icon to the right of the Layer Name.




The lock icon will change to green when an element is locked.




On the canvas, the locked element will not have a bounding box and cannot be selected.



You can unlock an element by selecting the green Lock icon.



When using a design with a locked element as a template in Editor Lite, that element will not appear on the Editor Lite screen. When you move from Editor Lite to the Editor, the element will be visible but it will not be editable.


Naming Your Layers


Every layer in the Layers Panel will automatically be named after the file that was uploaded to Flexitive. For example, if the file you uploaded to Flexitive had the file name ABCC_Cup-PremiumRoast.png, that element will be given that name in the Layers Panel by default.




It is also possible to change the name of any layer in the Layers Panel. Changing the name of the layers of your design is an excellent organizational tool, especially when you are using multiple versions of a similar element.


To change the name of a Layer, select the text under the thumbnail in the Layers panel and change the copy. When you are done, press Enter to save the change.



Animations and the Layers Panel


The Layers panel is particularly useful when working with animations in your design. Often times you will want to have an element animate out of a frame and then have another object appear in the exact same location of the canvas. To achieve animations like this, the elements will overlap one another on the canvas and it may be difficult to select the element that is on a lower layer. This is where the Layers panel can be an effective tool.


The Layers panel will allow you to select the element that you wish to apply an animation to regardless of how many objects are placed on top of it by simply selecting the object in the panel. It will also allow you to select elements that are not visible during the frame you are working on even if Only Show Frame Objects is toggled on.