wbDesign Wiki
Storybook

Drawer — Figma Assembly Rules

Скачать .md ↓
Figmaorganism

Status: verified assembly contract for the standard End/M/Default desktop Drawer.

Evidence

Fresh read-only Plugin API inspection and screenshot on 2026-09-22:

  • Source file EO9tuCsqwuHL8cZ4Eb2psR, page 21725:54056, Drawer set 22170:4962, owner key 04b59583bece8ac2afcb896aa0a71ed4a3927104.
  • End/M/Default variant 22167:4802, key 1fd48f370ed8cf2c4eb1b8a5564dce631d6e6302, is 680×908.
  • Header 22167:4821: horizontal Fill/Hug, padding 20/20/20/24px (top/right/bottom/left), gap 8px, baseline height 64px.
  • Body native Slot 22167:4845: horizontal/vertical Fill, vertical Auto Layout, padding 24px, gap 16px, baseline 680×768.
  • Footer 22167:4864: vertical Fill/Hug, padding 16/24/16/24px, baseline 76px; action rail 22167:4866 is horizontal Fill with 44px fixed height.
  • Close 22167:4835 retains IconButton set c0df83d8febc4593994cbb22f5e1e255e10006d6 and exact native Icon/cross-S 2245:12860, key 2540a2b8191a51549ca84aab0051fea3016370ca. This is verified native direct glyph anatomy inside the Button, not a request to insert or redraw a separate icon wrapper.
  • Source footer buttons use ButtonSecondary set 5b5668e5ed01e671d1ba96a854506d9192752b34 and ButtonPrimary set 0c6c44b67388904a1517702f2d7216554dde4d0e, both covered by Button.
  • Shell fill bg/level-1 key b9959f23e8be6c2d543bfd4478b6468131965829; header/footer bg/level 1 base key c5ece31d227299c075a15c46d7c1b189287998af; secondary stroke key ed508cedb139e60ffd8035610463fc51b5f358d4.

Assembly Rules

  • Dependency classification: Button is optional because footer and close/back/ navigation controls can be hidden. Icon is optional for visible native glyph controls. Both are Used when the selected standard Close remains visible. Arbitrary Body or metadata Slot contents are separate screen-selected roles, not fixed Drawer dependencies.
  • Rule ID: drawer.published — retain the published Drawer instance and exact owner/variant keys. Do not detach, rename, redraw or replace its shell.
  • Rule ID: drawer.native-slots — insert record content through Body's native Slot; use the other native Slots only when their corresponding published visibility control is enabled. Do not replace Header/Footer frames or add content outside the panel to bypass the component boundary.
  • Rule ID: drawer.layout — preserve the selected 680px width and published Header/Body/Footer Auto Layout chain, padding and token bindings. Body fills remaining height; header/footer hug their content. Keep content within the Body width and verify overflow rather than silently clipping important text.
  • Rule ID: drawer.controls — configure Title/Subtitle and control visibility through published properties. Retain real nested Button/Icon instances. A screen-authorized action may select another mapped Button-family instance in the existing footer action position, with its native size/label/state, while preserving the 44px action rail and surrounding layout. This is not permission to invent a Button variant or a replacement action cluster.
  • Preserve native Close glyph Icon/cross-S and its IconButton. Do not add manual vector or wrapper replacements inside that published control.
  • Title placeholder Tags/Badges are hidden in the verified state and remain hidden here. Other placements and those hidden decorations require separate scoped verification before use; this document does not claim all exposed combinations have been tested.

Verification

  • drawer.published: instance main key and set key match the verified source.
  • drawer.native-slots: authored record content descends from the native Body Slot; any enabled secondary Slot matches its published control.
  • drawer.layout: fresh bounds/layout readback confirms panel width, Fill/Hug chain, padding and bindings; screenshot checks readable content.
  • drawer.controls: selected controls retain mapped component owners; hidden controls stay absent; action text and appearance come from Button properties.

Documentation Task

LUU-427 · GitHub Issue 10 · verified member danil-lebedev, GitHub ID 50231562 · agent Codex / Specs · run/session luu427-drawer-20260922.

WB Logistics · Design SystemСборка 91da5ae

Поиск по Wiki

Начните вводить название или текст