Figma WYSIWYG

Preview

Figma WYSIWYG

Figma WYSIWYG Template

WYSIWYG, or 'What You See Is What You Get,' is an interface pattern that displays content as it will appear when published online from the text editor interface.

The WYSIWYG editor interface combines essential text editing tools and controls with a live preview of your content.

WYSIWYG interfaces are commonly used for content creation and management, email marketing platforms, and document editing software.

The WYSIWYG UI consists of multiple components, including a toolbar, buttons with the most common application commands, the content zone, and a bottom footer with stretching controls. The WYSIWYG component is fully resizable and able to adapt to multiple screen resolutions using Breakpoint variables.

For more tips on using our WYSIWYG UI kit, be sure to check our full guide: How to Design a WYSIWYG Text Editor in Figma.

WYSIWYG Anatomy

Set	Variants	Properties
Toolbar	3	Size Small, Medium, Large
TextEditor	3	Size Desktop, Tablet, Mobile

The WYSIWYG editor is three sets — a TextEditor in Desktop, Tablet and Mobile sizes at 1180px wide, a Toolbar in Small 56, Medium 108 and Large 128px heights, and ToolbarButton in Label Left, Label Right and Icon x2 types at 24 and 28px — a resizable rich-text interface with a live content zone and a stretching footer.

WYSIWYG AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a WYSIWYG text editor interface in Figma as three sets. ToolbarButton: a compact control in Label Left and Label Right types pairing an icon with a text label, and an Icon x2 type for paired icons such as undo and redo, at Small 24 and Medium 28px, with Default, Hover and Active states. Toolbar: a bar of ToolbarButton instances grouped by dividers — paragraph style select, bold, italic, underline and strikethrough, text colour, alignment, ordered and unordered lists, link, image, code block and more — in Small 56px as a single row, Medium 108px as two rows, and Large 128px with a tab strip above the rows. TextEditor: the full editor at 1180px in Desktop, Tablet and Mobile sizes — the Toolbar on top, a content zone with a sample document of a heading, paragraphs, a quote and an image, and a footer with a word count, a zoom control and a resize handle. Wire a prototype where clicking Bold toggles its Active state, and bind colours to variables for light and dark mode.

Source