Frames X WYSIWYG Component

The WYSIWYG UI Component in Figma: Best Practices

WYSIWYG stands for "what you see is what you get." It refers to an interface that allows users to see exactly how content will look when published live or submitted to the web.

The WYSIWYG editors are designed to make it convenient for everyone to build and edit emails, landing pages, articles, and other text-based pages. They are reputationally easy to use and have become powerful tools for developing digital media without relying on HTML coding skills.

The rich text editor component allows you to modify text and add elements to a stackable content layout. It has a top menu bar for selecting available commands, a toolbar with quick actions for the most commonly used commands, and a content zone with a footer to provide a grabber for stretching the component content.

Layer structure

The Rich Text Editor component has multiple groups to display commonly used HTML elements, such as text, lists, images, etc. You can easily add more content by inserting it into the Content layer group.

The content group is set to fill vertically, making the main zone scrollable. This allows you to adjust and preview the component's content like in an actual browser window.

Variables support

The text editor supports variable modes for breakpoints, colors, and sizing. To adjust predefined modes, select the component and click on the variable icon in the Layer menu on the right sidebar. Then, select the mode in which you'd like to switch the component.

Instances and properties

The text editor consists of multiple variants for toolbar and toolbar buttons. The toolbar variants provide multiple-size support and include different quick actions. The toolbar buttons are more granular components to create quick action groups and provide more context to the command behind each action.

--

Credits: framesxdesign.com

Licensed under CC BY 4.0