Knowledge Base
Ask or search…
K
💡

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 location

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 Modules

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’
field tokenization

Simple fields in the DDP

Dimension field - which gets a numerical value and a unit selection. Can be tokenized with dimension tokens.
Dimension field
Color field - which gets a Hex value for the color and a percentage value for opacity. Can be tokenized with color tokens
Color field

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).
Typography field.
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).
Border field
Effect (shadow) field - which is comprised out of x-direction, y-direction, spread, blur, shadow color and drop/inner shadow selector
DDP Shadow field.png
In the future we will support more fields like: Gradient, Image, Transform and Blur