Clappers

Example preview

When building a card component in Figma, you’ll need to set various properties:

• Set the card’s width to Fixed, and set both of its child layers’ widths to Fill
• Set the width of the placeholder instance to Fill
• Check that the card frame is set to a Fixed width and a Hug contents height
• For rounded corners, you may need to enable Clip content, so that the contents of the card don’t spill outside of the corners of the card frame!

How to write clappers in Chalk

The simplest way to add a clapper (UI label) is with ::Label::.

Clappers are used to mark UI element labels, settings, or options that appear in interfaces. They render as bold, sans-serif text to distinguish them from regular content.

Examples:

• ::Fixed:: - for fixed width/height settings
• ::Fill:: - for fill width/height settings
• ::Hug contents:: - for auto-sizing settings
• ::Clip content:: - for clipping options
• ::Auto Layout:: - for layout features

Clappers preserve the exact text you write, including capitalization and spacing. They’re designed to be simple and straightforward—just wrap your label text in double colons.