​
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

We currently do not support all of Figmas design properties. If you notice display issues, use the bug report form or reach out via email. Below are some unsupported properties to be aware of:
PropertyAdditonal info
Inner and outer strokeDisplayed, but may not render correctly. Use center stroke instead to avoid issues.
Strokes of unionsDisplayed, 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. For a full overview of Figma’s design properties, check out Layer properties and text properties and text properties.