Files
hyperframes/docs/studio/design.mdx
T

45 lines
1.4 KiB
Plaintext

---
title: "Edit design and properties"
description: "Change text, layout, style, media, 3D transforms, and color for a selected element."
---
Select an element, click **Inspector**, then open **Design** to change what it says and how it looks.
![The Design inspector with controls for style, layout, motion, grade, and media](/images/studio/inspector.jpg)
The available sections depend on the selected element.
## Common tasks
- **Text:** wording, font, weight, size, line height, alignment, and spacing.
- **Layout:** position, size, spacing, and alignment.
- **Style:** fill, border, radius, opacity, shadow, and visual effects.
- **Media:** source, fit, crop, and element-specific playback settings.
- **Motion:** animation and keyframes.
- **3D:** supported perspective and transform controls.
- **Grade:** color adjustments for images and video.
## Make one type of change at a time
If the element feels wrong, identify whether the problem is:
- the content;
- the hierarchy;
- the layout;
- the visual style;
- the timing;
- the motion.
Changing all six at once makes the result difficult to judge and harder to undo selectively.
## Check readability
After styling text:
1. view it at the final output size;
2. play the full entrance and exit;
3. check contrast over every background it crosses;
4. confirm it remains on screen long enough to read.
Use [Color grading](/guides/color-grading) for a deeper media workflow.