Libraries

Libraries are Frame0 documents containing components that you can reuse across all documents. This guide explains how to install or uninstall libraries, as well as how to create your own library.

Managing libraries

Installing libraries

Libraries can be installed from the official library registry or by installing a library distributed as a file.

To install a library from the library registry:

1. Click Libraries icon from the Shapes View, or select More libraries… in the current library dropdown from the Shapes View.
2. Select Registry tab in the Libraries Dialog.
3. Find a library to install and click Install button over the library.

To install a library from a file:

1. Click Libraries icon from the Shapes View, or select More libraries… in the current library dropdown from the Shapes View.
2. Click Install from file button.
3. Select a library file to install.

Note

The installed libraries can be found at:

• /Users/<user>/Library/Application Support/Frame0/libraries for Mac OS.
• C:\Users\<user>\AppData\Roaming\Frame0\libraries for Windows.
• ~/.config/Frame0/libraries for Linux.

Uninstalling libraries

To uninstall a library:

1. Click Libraries icon from the Shapes View, or select More libraries… in the current library dropdown from the Shapes View.
2. Select Installed tab in the Libraries Dialog.
3. Click the delete button over the library to uninstall.

Creating libraries

A library is a single Frame0 document. Therefore, to create a new library, you need to create a new document and define components within it. Only one page is allowed in a library, and the page’s name becomes the library’s name.

Tip

Things to be mindful of when creating a library.

1. Assign name for all components.
2. For constraints that enforce layout and styles, such as align-to-parent, align-children and inherit-styles, use query parameter whenever possible to limit the applicable parent or child elements.
3. If the value of Movable is Parent, use the Movable parent filter to restrict the parent shape that moves together. If a filter is not specified, unintended behavior may occur when it is duplicated or inserted into another shape.

Components

A component is a reusable shape included in a library. Any shape you create can be turned into a component.

To make a component:

1. Select a shape.
2. Select Expert tab in the Inspector sidebar.
3. Turn on Component switch.

If your component requires special behavior, you can use the following features of smart shape of DGM.js.

• Extended properties
• Constraints
• Scripts
• Sizable
• Movable
• Containable filter
• Text editable
• Path editable
• Anchored
• Connectable

Tip

Frame0 is developed based on DGM.js which is an open source library.

Caution

The smart shape features forcibly alter the behavior of shapes, using them without a precise understanding may cause unexpected behavior or errors.

Tags

You can assign additional tags to shapes. Tags can be used in scripts, constraints and containable filters.

The following tags can be used for predefined behaviors:

• @ungroup tag ensures that when a component is instantiated, it is automatically ungrouped.

Reference (icon)

You can specify a component to reference another specific shape. Component’s reference designate it’s icon shape. When an icon is specified, the component is displayed as an icon instead of its original component in the Shapes View. If a component is large or complex, assigning an icon helps users recognize it more easily.