Figma Widgets

Figma Widgets

  • Guide
  • API Reference
  • Updates

›Widget Development

Getting Started

  • Introduction
  • Prerequisites
  • Setup Guide
  • Widgets vs Plugins
  • Widget Manifest

Widgets 101

  • How Widgets Run
  • Making Network Requests
  • Using the Plugin API

Widget Development

  • Widget Development
  • Handling User Events
  • Text Editing
  • Widget State
  • Widget State & Multiplayer
  • Working with Lists
  • Images in Widgets
  • Managing Multiple Widgets
  • Working with Widgets
  • Adding Hover States
  • Undo/Redo for Widgets

Other

  • Best Practices
  • Testing & Debugging
  • Stability and Updates
  • Samples
  • What's Supported
  • Get Help

Text Editing

<Input /> component

To allow users to exit text directly in your widget, use the Input component.

The Input component provides an onTextEditEnd callback that fires when the user blurs the Input component.

⚠️ onTextEditEnd does not fire on every key stroke.

The Input component also allows you to specify and style:

  • The text itself
  • A placeholder (via placeholderProps)
  • A wrapping frame (via inputFrameProps)

Usage Example

Typically, you will use a synced variable (eg. useSyncedState or useSyncedMap) to store text displayed by the Input component which is specified via its value prop. In the onTextEditEnd callback, you can then update the synced variable accordingly.

Here is an example widget that uses the Input component.

Example input component

const { widget } = figma
const { useSyncedState, AutoLayout, Input } = widget

function InputWidget() {
  const [text, setText] = useSyncedState("text", "")

  return (
    <Input
      value={text}
      placeholder="Type name"
      onTextEditEnd={(e) => {
        setText(e.characters);
      }}
      fontSize={64}
      fill="#7f1d1d"
      width={500}
      inputFrameProps={{
        fill: "#fee2e2",
        stroke: "#b91c1c",
        cornerRadius: 16,
        padding: 20,
      }}
      inputBehavior="wrap"
    />
  )
}

widget.register(InputWidget)
← Handling User EventsWidget State →
  • <Input /> component
  • Usage Example
Learn more about Figma