Skip to content

Work / Trunk / Wiki / Surfaces

components-start-from

Surfacecanonicalverified 2026-10-21

SURFACE.WEB.COMPONENTS-EDIT.COMPONENTS-START-FROM

Summary

New component › From the kit: the whole Trunk Kit, searchable and grouped, with the picked component shown live in the product's Styles.

Raw wireframe

  • .context/designs/web/components-edit/components-start-from.html

Why it is drawn this way

A new component starts blank, the Figma way. New component offers three starts: Blank (one frame with auto layout), From the kit (this screen), and Duplicate an existing component. See components-new.

The kit is the catalogue, not a handful of tiles. All 66 components of trunk-kit, in eight groups down the side (Actions, Inputs, Selection, Navigation, Feedback, Overlays, Data display, Form layout) and as small previews in the middle, each already painted from Chitragupt's Styles. Search finds any of them by name.

The picked one is live in the inspector. Select is open with AY 2026-27 picked. Under it: the tokens it is painted from ("Painted from your Styles"), which of the four states are real for it, its properties and its interactions. Nothing is added to Styles.

Add to draft names it and puts it in the draft with its variants, properties and interactions, then opens its set (component-sets). It stays linked to the kit, so kit updates are offered for it (components-kit).

Import a kit is at the foot of the groups: components from another system (components-kit-import).

Related

Sources