Editing Directly with the Editor Tab
Use the Composer's Editor tab to change your converted section visually, without touching code.
Use the Editor tab to change your section visually, without touching code. It's a full visual builder for the converted section, pick this tab when you'd rather point-and-click than write code or describe the change in words.
What you can do
- See the structure. The layer panel shows the exact structure, so you can select, reorder, add, or remove any element: containers, headings, buttons, links, images, any HTML tag.
- Style anything. Pick an element and shape it through seven dedicated style controls: Typography, Layout, Spacing, Background, Border, Effects, and Custom CSS.
- Use your brand styles. Your synced Figma globals are ready as classes (for example,
.text-md-semibold,.display-lg-medium), and you can create your own with + Add class, next to a Local label. - Edit with confidence. Every change updates live in the preview, so you never edit blind.
Screenshot: the Editor tab, layer panel on one side, the style controls, and the live preview.
Design and Developer
The Editor tab has two sub-navigation tabs: Design and Developer. Both share the same style panels (Typography, Layout, Spacing, Background, Border, Effects, Custom CSS), but Developer adds a row above them for deeper element-level access:
- Element selector, a dropdown showing the selected element's tag (for example
<form>), so you always know exactly what you're editing. - + Add class, next to a Local label, create a reusable class instead of styling the element inline.
- Attributes, an extra panel (alongside the style panels) to add custom HTML attributes to the selected element with + Add Attribute.
- Mark as, a dropdown to mark the selected element as a loop or a form. Marking as a form is the same action described in Turn Any Element Into a Form, reachable here or via the Layers panel's right-click menu.
None of this row appears in Design mode, it's Developer-only. See Design vs Developer Mode for what each mode restricts.
How to make a change
- Select an element. Use the layer panel to pick any container, heading, button, link, image, or other element in the section.
- Style it. Shape the selected element through the seven style controls.
- Reuse your brand styles. Apply a synced Figma global class, or create a new one.
- Check the live preview. Every change updates instantly, so you always see the real result.