Design properties
Design properties in Figma help ensure responsive layouts while maintaining design control in deckd. Properly setting up your assets allows for seamless adaptability while keeping brand integrity intact.
Intro
Figma provides a range of text, element, and layer properties that can be used to structure your template layouts. For positioning elements, you can:
• Use auto-layout for structured, responsive positioning.
• Group elements to maintain alignment.
• Arrange items freely within a frame.
To ensure your layouts are both responsive in deckd and maintain design control, follow these guidelines:
1. Avoid using hug width and height settings
Auto-layout allows you to set width and height as hug, fixed, or fill. By default, Figma sets them to hug, which allows text to expand indefinitely. This can cause unpredictable behavior in deckd.
• Instead of hug, use fixed or fill to ensure consistent layout behavior.
These settings behave the same way in Figma as in deckd.**
Tip: You can combine hug with max-height or max-width settings for added responsiveness while maintaining control.
2. Check layer hierarchy
Editable elements such as text and images should not be covered by other layers. If a layer sits on top of an editable text box, it may block text editing in deckd.
• Avoid placing grouped layers on top of text or image elements that need to be edited in deckd.
• Ensure that interactive content remains accessible within the layer hierarchy.
3. Unsupported properties
deckd does not currently support all Figma design properties. If you notice display issues, use the in-app bug report form or reach out via email or community.
Below are some unsupported properties to be aware of:
| Property | Additonal info |
|---|---|
| Inner and outer stroke | Displayed, but may not render correctly. Use center stroke instead to avoid issues. |
| Strokes of unions | Displayed, but may not render correctly. Avoid unions; use groups instead or style elements individually. |
| Vertical trim (Cap height to baseline) | Not supported. Using this may break the design. |
Other design properties
Many other Figma properties, such as text alignment, color gradients, letter spacing, multi-color text, and letter case settings, are fully supported in deckd and can help refine your designs.
For a full overview of Figma’s design properties, check out Layer properties and text properties and text properties.