Documentation

The Signature Pad component brings interactive signature functionality natively to Framer.

After purchasing, you’ll receive:

• Two component URLs – Light and Dark mode.

• A JSON style file – for automatic light/dark mode switching (covered later).

This guide focuses on using the Signature component, adding it to your canvas, Framer form and customizing it.

1. Getting Started

Adding the Light Signature Pad

1. Copy the Light Signature component URL.

2. In Framer, paste the URL into your canvas.

3. The component is now added to Assets → Netoum / Signature.

Using the Signature Pad in a Form

1. Insert a Framer Form (Insert → Form).

2. Drag the Signature Pad component inside the form.

3. Set the form’s Send To Email property for testing purposes.

4. Preview the canvas and submit a signature.

After submission, the user receives a Base64 string representing the signature.

Previewing the Signature

• Use a Base64 viewer like https://jaredwinick.github.io/base64-image-viewer/.

• Or directly add it as an img source in HTML:

<img src="data:image/png;base64,..." />

2. Customization

Detaching and Editing the Signature Pad

To customize the component:

1. Double-click the component on the canvas.

2. Detach all instances to unlock editing.

3. You will now see the SignatureConfig component with all props:

   • Export settings (Base64 / SVG paths)

   • Input name

   • Stroke width, color, and other drawing settings

4. The linked Signature State component can also be detached for customization.

3. Signature State

The Signature State component controls the visual feedback for the signature pad. It uses three Framer variant states:

1. Empty – default state when no signature is present.

2. Signing – temporary state while the user is drawing.

3. Signed – final state after the user completes their signature.

Signature State Structure

After detaching, you’ll see:

• Label Frame – contains a text layer for accessibility (screen readers).

• Control Stack – wraps interactive controls, such as buttons and icons.

• Segment – the drawing area where users create their signature.

• Clear Trigger – a button to reset the signature.

• Clear Trigger Icon – the visual icon inside the clear button.

• Optional Guide Frame – can show a guide for signing.

Each element is fully customizable. The three variant states allow you to style Empty, Signing, and Signed differently, providing clear visual feedback to the user.

Example Customizations

• Change stroke color or background for each state.

• Add animations when transitioning between states (e.g., fade in the Signed state).

• Customize label text or clear button for better UX.

4. Automatic Dark Mode Using Frame Styles

Framer currently doesn’t provide a built-in way to ship component styles with a component. To support automatic light/dark mode, you can use the provided JSON Styles file with the Style IO plugin.

Importing the Styles

1. Download the provided JSON Styles file.

2. In Framer, open the Plugin panel and search for Style IO.

3. Import the JSON file.

4. The imported styles will appear on the left-hand side panel.

Applying Styles to the Signature Pad

SignatureConfig

• Select the Drawing Color property.

• Choose Style → SignaturePad - Drawing.

SignatureState – Variant: Empty

1. Label – select Text Color → Label style.

2. Segment – select Fill Color → Segment style.

3. Segment Border – select Border Color → Border style.

4. Guide – select Fill → Guide style.

5. Clear Frame – select Fill → Clear style.

6. Clear Icon – select Fill → Clear Icon style.

SignatureState – Variant: Signing

1. Segment Border – select Border Color → Border Focus style.

By applying these styles, your component will automatically respond to light and dark mode, maintaining consistent visuals across all states.