wbDesign Wiki
Storybook

File Uploader Card — Figma Assembly Rules

Скачать .md ↓
Angularmolecule

Status: active Figma assembly contract.

Scope

Use the published File Uploader Card master only for the compact empty image upload target. It owns the 120 × 108px drop surface, the optional supporting text, and its empty-card visual states. It does not own loaded-file content.

Source evidence

  • Published component set 1589:9995, key dd9869467bc9afed2e8fa97c32b5fb848484f899, verified through Figma metadata, design context, and variable definitions on 2026-09-02.
  • The master exposes Show text, State, and Filled; Filled currently has the sole allowed value No.
  • The required nested instance is Icon/plus (24px), represented by component.icon.
  • File Card 4854:78239 is deliberately excluded: it is the separate component.file master, not a nested dependency or a variant of this one.

Required assembly

  • Rule ID: file-upload-card.published — place a File Uploader Card instance; do not recreate the surface with a locally drawn frame.
  • Rule ID: file-upload-card.empty-target — keep Filled=No. A preview, filename, document icon, or file size needs a different component boundary; none is a hidden property of this master.
  • Toggle only Show text and select one of the published State values: Default, Hover, Drag-and-drop, Disabled, Focused, Error, Error Hover, or Error Focus.
  • Preserve the required Icon/plus instance and its 24px wrapper. Do not draw a replacement glyph or swap an approximate icon.

Tokens and state rules

  • Default uses white bg/level 1 base, a 1px dashed stroke/secondary border, radius/L, and text icon/secondary for supporting text.
  • Hover and disabled use bg/level2; disabled switches the border to solid and the icon/text to text icon/tertiary.
  • Drag-and-drop uses bg/level2 with a 2px stroke/accent border.
  • Focused keeps the inner dashed surface and adds a 4px bg/accent sec outer focus treatment.
  • Error uses a 2px text icon/danger border; error hover uses bg/level2. Error focus adds a 4px content bg/red outer treatment.
  • Supporting text uses the description role: ALS Hauss VF, 13px / 17px, regular weight, with an 8px gap below the surface.

Verification checklist

  • The instance resolves to component key dd9869467bc9afed2e8fa97c32b5fb848484f899.
  • Filled remains No, and Show text plus the selected state match the intended empty-card composition.
  • Icon/plus is an actual published Icon instance at 24px.
  • Size, radius, spacing, semantic colours, stroke widths, and focus/error treatments remain variable-bound with no local colour overrides.
  • No File Card, generic document, filename, file-size, or multi-file UI is presented as an instance or variant of this master.
WB Logistics · Design SystemСборка 91da5ae

Поиск по Wiki

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