💡Dynamic Design Panel
What is the DDP?
The DDP is located on the right side of the screen and is the primary place for inputing values for all the visual properties that an object can have. It stands for the Dynamic Design Panel. It’s dynamic because it reacts to the type of objects being selected on the canvas or via the layers panel.
DDP Anatomy
The DDP is comprised of two main parts
Selector module with all the properties a component/element has
Modules for all the visual choices that are influenced by the state of the selector module.
DDP hierarchy: modules > submodules > input fields/buttons
Module
Modules, allow for affecting a category of visual choices like size, layout, typography, background, border, effects etc. Each module has an expand/contract switcher as modules can be expanded or contracted. Modules appear if relevant for the selected object.
Sub-module
Sub-modules are more specific partitions of a module that allow a collection of fields to target some visual property. These can have configuration buttons. See below.
Input fields / input buttons
These are the most granular level of visual influence like text color, top padding, flex direction, rows gap line height etc. Most inputs fields in the DDP can be tokenized.
DDP Input fields
Generally, there are 2 kinds of input fields in the DDP
Simple fields - control only one value. For example: text color.
Composite fields - bind together simple value fields into a unified batch, such as typography composite input in the image below.
The values of the DDP fields can be found in either of 3 states:
Inherited
Value is either the default of the browser or inherited from parent or ‘none’ (which means that there is no selection, like no background color for a div for example)
Hard coded
Value is inserted in it’s raw form (not tokenized) on the specific selection as shown in the selector module.
Tokenized
Value is a token chosen from the token list which refers to a raw final value.
In order to tokenize a field - hover over it and click the ‘token icon button’, which will expand a list of possible tokens for the field.
In order to detach a token and revert the field into its hard-coded value click the ‘detach icon button’
Simple fields in the DDP
Dimension field - which gets a numerical value and a unit selection. Can be tokenized with dimension tokens.
Color field - which gets a Hex value for the color and a percentage value for opacity. Can be tokenized with color tokens
Composite fields in the DDP
Composite fields have a hierarchy such that a tokenized composite field will have all the subsidiary values described in it already, rendering them in disabled state.
Typography field - which is comprised out of font family, font weight, font size (dimension), line height (dimension) and letter spacing (dimension).
Border field - which is comprised out of border width (dimension), border color (color) and border style. Applied independently to each of the 4 sides (if needed).
Effect (shadow) field - which is comprised out of x-direction, y-direction, spread, blur, shadow color and drop/inner shadow selector
In the future we will support more fields like: Gradient, Image, Transform and Blur
Last updated
