Figma provides a range of text, element, and layer properties that can be used to structure your template layouts. For positioning elements, you can:
  1. Use auto-layout for structured, responsive positioning.
  2. Arrange items freely within a frame.

​
1. Avoid using hug 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 and causes unpredictable behavior in deckd. Instead of hug, use fixed or fill to ensure consistent layout behavior.
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.
  1. Avoid placing grouped layers on top of text or image elements that need to be edited in deckd.
  2. 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.

​
Additional 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.