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