Dora Constraint Layout is a super power layout mechanism for designers. It can quickly build complex responsive layouts with simple drag and drop. It is more flexible and easy to use than Flex box and Grid Layout.
💡Jumpstarts your journey with fun and speedy learning by duplicate
Dora Project - 🔗 Constraint Layout
Constraints
👫 Create constraints with parent
1. Left Constraint
Shortcut: Press 🕹️ A while dragging
2. Right Constraint
Shortcut: Press 🕹️ D while dragging
🧑🤝🧑Create constraints with sibling
1. Left Constraint
Shortcut: Press 🕹️ A while dragging
2. Right Constraint
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
Align
👨👩👧👦 Create constraints with parent
1. Center Align
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
Right Panel Button:
2. Center Align to side
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
3. Left Align
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
Right Panel Button:
4. Right Align
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
Right Panel Button:
👫 Create constraints with sibling
1. Center Align
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
Right Panel Button:
2. Left Align
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
Right Panel Button:
3. Right Align
Shortcut: Press 🕹️ ⌘ / Ctrl while dragging
Right Panel Button:
🔤 Fill / Hug
1. Fill container
2. Hug contents
3. Hug contents with padding
⛓ Even Spacing Distribution
1. Horizontal Spacing Distribution
2. Vertical Spacing Distribution
📏 Change Unit
You can change the units using the unit dropdown or by typing the units after the value.
Most input fields allow you to choose between the following units:
VH – Relative to the viewport height. The viewport height is 100vh.
VW – Relative to the viewport width. The viewport width is 100vw.
% (Percentage) – Relative to the parent element.
REM – Relative to the font size of the body element.
EM – Relative to the font size of the parent element.
