Components

Components are reusable design elements. Edit the main component and all its instances update automatically.

Browse Components

Open the Assets tab in the left panel to browse local components and enabled libraries. Use grid or list view, search by component name, and select a component to see its details. You can insert an asset by clicking it, pressing Enter, or dragging it onto the canvas.

Local assets are grouped by source page. Published library assets remain available when their revision has been downloaded, including when the remote provider is temporarily offline.

Creating a Component

Select a frame or group and press ⌥⌘K (Ctrl + Alt + K). The selection becomes a reusable component.

Any other layer, or several layers, is wrapped in a new white component at their bounding box, in the topmost layer's place in the layer list; a single wrapped layer gives the component its name.

Components display a purple label with a diamond icon above them.

Component Sets and Variants

Select two or more components and press ⇧⌘K (Shift + Ctrl + K) to combine them into a component set — a container with a dashed purple border and 20 px padding around its children, as in Figma. Sets made by scripts with figma.combineAsVariants() wrap their components exactly, as Figma's plugin API does.

Each component in a set can define values across multiple variant dimensions, such as Size=Small, State=Hover, and Theme=Dark. 4B Pen supports sparse combinations, so a set does not need every possible combination. The top-left variant is the default and is used as the fallback when an update no longer contains an exact combination.

Select a component and press Add variant in the panel header to turn it into a component set, as Figma does: the component becomes Property 1=Default and a copy named Property 1=Variant2 appears below it. On a set, Add variant copies its last variant with the next value. The set's variant properties are rows of its Properties list; click one to rename it or to add, rename, drag to reorder, or remove its values. Removing a value variants still use moves them to another value first, and variants that share every value are named in a notice that selects them.

Component Properties

Components and component sets support reusable text, boolean visibility, instance-swap, and slot properties. Select an instance to edit its values without detaching it. Properties and their values are preserved when saving and reopening .fig files.

To link a layer of a main component to a property, use the link button where its field lives: Typography for text content, Appearance for visibility, and the instance header for the swapped component. Create a property from the layer's current value or pick an existing one; the field then shows the property instead of its value. Typing into linked text sets the property — its default in the main component, the instance's value in an instance.

Select the main component to see its Properties. Click a property to rename it, change its default, see and unlink the layers it drives, or delete it, and drag properties to reorder them. + adds a text, boolean, or instance-swap property.

To show a nested instance's properties on instances of the component, choose + → Nested instances and tick it, as Figma's Expose properties from nested instances does. Instances of the component then list its properties under its name. Only an instance whose component has properties can be exposed.

Slots

A slot is a frame of a main component whose content each instance can change. Select a frame inside a main component and choose Create slot from the context menu or the Slots section, or select other layers to wrap them in a new slot frame. Slot settings set a description, the components it prefers, and how many items it holds; an instance outside those limits shows a warning. In an instance, add, reorder, and remove a slot's items, or reset it to the component's content.

Behaviours and Preview

A behaviour makes a main component or component set work like a real control, after Reka UI's primitives: Button, Text field, Textarea, Number field, Toggle, Switch, Checkbox, Radio, Radio group, Toggle group, Slider, Progress, Tabs, Collapsible, or Accordion. Select the component and use + in the Behaviour section to choose one.

The section lists what the control needs:

• Values — the property that holds each value: a variant or boolean property for On, Checked, Pressed, Open, Filled, or Disabled (with the variant values that mean on and off), a text property for a field's text, or a slider's own minimum, maximum, step, and default.
• Parts — the slot that draws each part, such as a switch's thumb, a slider's track, range, and thumb, or a tab list. A group's items slot holds instances of its radios, toggles, or collapsibles.
• States — a variant property whose values draw default, hover, pressed, focus, and disabled. Values named like those states are matched automatically.

Rows the control requires come first; the rest are under More options. When a component has nothing to bind yet, a row offers to create it: a text layer and text property, Off and On variants, or a slot, and States offers Add state variants, which adds a Default, Hover, Pressed, Focus, and Disabled variant of the component. A lone main component that gets variants this way becomes a component set, and a slot added to a set appears in every variant. Until the control works, a line under its name says what is still needed; clicking it goes there.

Press ⌥⌘↩ (Ctrl + Alt + Enter), choose View → Preview, or use ▶ next to Share to preview the canvas. Each top-level layer holding controls runs as live Reka UI components over the canvas, drawn by the component's variants: switches flip, sliders drag, tabs and accordions open, and text fields are real inputs with the browser's caret, selection, and paste. Preview never changes the document or its history. Reset puts every control back as designed, and Esc or the pill's close button returns to editing. In split view, each canvas previews on its own.

Behaviours are saved in .fig files and published with library components.

Component Libraries

A component library publishes reusable components as an immutable revision. Each published asset has stable library, asset, and revision identity, so different instances can remain on different revisions until you explicitly update them.

Publish a Library

1. Create the components and component sets you want to share.
2. Open Assets, then select Manage libraries.
3. Select Publish library.
4. Enter a stable library ID and display name. The library ID is locked after the first publication.
5. Optionally search the change list and enter a revision description.
6. Select the added, modified, renamed, or removed assets to include.
7. Confirm the destination and select Publish library.

On later publications, unchecked changes remain pending. Unchanged assets keep their previous published definitions, and removed definitions remain available while documents still reference their historical revision.

Enable and Insert Library Assets

Open Assets → Manage libraries to enable a published library. Its components appear in the Assets panel alongside local components. Insert one by clicking it, using the keyboard, or dragging it onto the canvas.

Published definitions are read-only in consuming documents. Edit the source document and publish another revision to change a definition. Instances linked to those definitions remain editable through their component properties and overrides.

Review and Accept Updates

Open Manage libraries → Updates to discover newer revisions. Discovery does not modify the document. You can review the current and updated instance side by side, navigate between affected instances, and then update:

• The selected instance
• All instances of one asset
• Instances on the current page
• Instances across all pages

4B Pen preserves compatible text, visibility, and instance-swap assignments. If an exact variant no longer exists, the review identifies the top-left fallback before you accept it. Applying an update creates an undo entry.

Local, Storage, and Offline Use

Libraries can use the local browser catalog or a configured storage provider. Remote publication uses immutable revision objects and a conditional latest pointer, preventing two publishers from silently overwriting each other.

Downloaded revisions are cached locally. A document can continue rendering and inserting downloaded definitions while offline. Integrity failures are reported instead of being hidden by cached data.

Saving Consumer Documents

Enabled-library bindings and materialized definitions are saved with .fig documents. Reopening a consumer file preserves its linked instances and revision identities, even when its remote library is unavailable.

Creating Instances

Right-click a component and select Create instance from the context menu. The instance appears 40 px to the right of the source component, visually identical.

Instance creation is available only through the context menu — there's no toolbar button.

Detaching an Instance

Select an instance and press ⌥⌘B (Ctrl + Alt + B) to detach it. The instance becomes a regular frame with no link to the original component. All overrides are baked in.

Go to Main Component

Right-click an instance and select Go to main component. The editor navigates to and selects the main component, switching pages if needed.

Live Sync

When you edit a component, all its instances update automatically, as in Figma: every property an instance does not override follows the component. That covers size, fills, strokes and their weight, alignment, caps, joins, and dashes, effects, opacity, blend mode, corner radii and smoothing, layout settings and grids, clipping, shared styles, and text, from its font and size to letter spacing, line height, case, decoration, alignment, and styled ranges.

A layer inside an instance also takes its position, rotation, flips, constraints, and mask from the component. Move or rotate a layer in the component and it moves in every instance. When an instance has a different size than its component, the layer is placed by its constraints, so a layer pinned to the right keeps its distance from the right edge. Inside auto layout, the layout places it.

Sync triggers automatically after node updates, moves, and resizes within a component.

Overrides

Instances can override specific properties without breaking the sync link. When a property is overridden on an instance, that property is skipped during sync — other properties continue to update from the main component.

Overridable Properties

A layer inside an instance can override its name, text, styled ranges, and font, every visual and text property listed above, its size, and whether it is visible or locked. Its position, rotation, flips, constraints, and mask cannot be overridden: they always come from the component. Scripts that set its position, rotation, constraints, or mask get Figma's error. Slot content is the instance's own and stays editable.

Overrides in a .fig file come back as overrides when you open it, and are saved the way Figma writes them.

New Children

When you add a child to a component, all existing instances gain a cloned copy automatically. Child order in instances always matches the component.

Hit Testing

Components and instances are opaque containers — clicking on a child selects the component itself, not the child. Double-click to enter the component and select children inside it.

Visual Treatment

Element	Appearance
Component label	Purple with diamond icon, always visible
Instance label	Purple with diamond icon, always visible
Component set border	Dashed purple outline

Keyboard Shortcuts

Action	Mac	Windows / Linux
Create component	⌥⌘K	Ctrl + Alt + K
Create component set	⇧⌘K	Shift + Ctrl + K
Detach instance	⌥⌘B	Ctrl + Alt + B
Preview	⌥⌘↩	Ctrl + Alt + Enter

Tips

• Editing text inside an instance creates an override — the text won't be overwritten when the component changes.
• Use component sets to organize multidimensional variants such as size, state, and theme.
• Publish reusable assets from their source document; published definitions are intentionally read-only in consumer documents.
• Review updates before accepting them when a revision removes an exact variant combination.
• See Context Menu for all component-related actions.