Figma
Allt komponentbiblioteket har för Figma: en tokenfil och en ikonfil.
Använd
Färger, mått, skuggor och textstilar i sex teman, ljust och mörkt gånger tre färgteman; namnen på 78 komponenter; ikonerna som används.
- Installera Suisse Intl, som biblioteket är satt i.
- Läs in tokenfilen i Tokens Studio, eller klistra in det kopierade i dess JSON-vy.
- Välj ett tema och skapa variabler och stilar ur det.
- Dra in ikonfilen i Figma och gör varje lager till en komponent.
- Bygg komponenterna med namnen i listan nedan, varianterna som egenskaper.
Innehållet
Samma sak uppdelad, för den som synkar mot repot i stället för att läsa in en fil.
Filerna var för sig
| Fil | Innehåll |
|---|---|
core.tokens.json | Palett, typografi, avstånd, radier |
theme-light.tokens.json | Rollerna i ljust tema |
theme-dark.tokens.json | Rollerna i mörkt tema |
accent-grey.tokens.json | Färgtemat Grå |
accent-blue.tokens.json | Färgtemat Blå |
accent-green.tokens.json | Färgtemat Grön |
$themes.json | Sex teman: ljust och mörkt, gånger tre färgteman |
$metadata.json | Ordningen mellan filerna |
components.json | Komponenterna, varianterna och delarna |
malm-ui.icons.svg | Ikonerna i bruk, ett namngivet lager var |
78 komponenter, med varianter och delar
| Komponent | Varianter | Delar |
|---|---|---|
btn | block, danger, ghost, icon, lg, marked, primary, secondary, sm | |
ws-anchor | ||
ws-avatar | lg, sm, xl | |
ws-avatar-stack | ||
ws-badge | accent, danger | |
ws-breadcrumb | ||
ws-btn-group | ||
ws-card | ||
ws-cell-max | ||
ws-change | compare, removed | arrow, delta, from, label, none, to, values |
ws-character-count | status (over) | |
ws-chart | caption, data, defs, drawing, foot, head, key (dot, line, rect, tile), legend (list), legend-name, legend-share, pie, plot (pie, ratio), source, subhead, subtitle, title | |
ws-chart-tip | row, title | |
ws-check | hint | |
ws-code | light, lines, prose, scroll, shell, wrap | body, file, header, line (add, del, mark) |
ws-combobox | chips, code, control, empty, group, label, list, meta, option, panel, section | |
ws-confirmation | body, title | |
ws-day-split | list | bar, handle, inset, label, part, row, rows |
ws-day-strip | date, day (quiet), mark (away, done, draft, warn), name, step | |
ws-diagram | caption, error, scroll | |
ws-dialog | wide | body, footer (spread), header, title |
ws-doc | body, section | |
ws-doc-hero | art, kicker, lead, meta, ring, text, title | |
ws-element | blue, dots, half-bottom, half-left, half-right, half-top, orange, yellow | |
ws-empty | inline, lg | body, icon, title |
ws-error-page | actions, mark, title | |
ws-error-summary | body, list, title | |
ws-field | auto, error, grow, narrow, wide | error, hint, label, optional, value |
ws-fieldset | error | |
ws-finding | head, part, title, todo | |
ws-heatmap | ||
ws-heatmap-key | swatch | |
ws-icon | 24, 32, lg, sm, spin | |
ws-input-group | hours, search | affix |
ws-kbd | ||
ws-loader | lg, sm | circle, label, mark, plate, quadrant |
ws-login | card, foot, inner, lead, or, provider-mark, title | |
ws-logo | inverse, lg, sm, xl | |
ws-mark | lg, sm, xl | |
ws-menu | header, item (danger), label, separator | |
ws-meter | budget, near, over, sm | |
ws-multi-select | submit | |
ws-name | mono | main, sub |
ws-nav | scroll, stack | group-label, separator |
ws-nav-link | active, active-green, active-purple, active-slate | |
ws-nav-menu | item, label, separator, sub, text | |
ws-notice | band, error, info, success, warning | actions, body, icon, title |
ws-page-header | actions, meta, qualifier, status, text, title | |
ws-pagination | count, ellipsis, page, pages | |
ws-panel | accent, flush, sunken | body, footer, header, qualifier, title, toolbar |
ws-panel-caption | brand | |
ws-period | capitalize | label, range, step |
ws-popover-panel | ||
ws-progress | ||
ws-resizing | ||
ws-richtext | bar, preview, tools | |
ws-segmented | ||
ws-shell | no-aside | actions, aside, brand, header, main, me, nav, sign-out |
ws-skeleton | circle, text, title | |
ws-sparkline | ||
ws-spinner | lg | |
ws-stack | ||
ws-stat | end, lg, sm, text | delta (down, flat, up), label, meta, unit, value |
ws-status-pill | accent, error, info, neutral, success, warning | dot |
ws-subheading | ||
ws-summary-list | actions, key, row, value | |
ws-swatch | ||
ws-switch | ||
ws-table | dense, fixed, min-lg, min-md, no-sticky, nowrap, top | row-link |
ws-tabs | flush | |
ws-tag | on | remove |
ws-timeline-axis | ||
ws-timeline-strip | ||
ws-toast | error, info, success, warning | |
ws-toolbar-action | warning | |
ws-toolbar-row | fields | count |
ws-tooltip | ||
ws-tree | down, stack | children, count, crumb, crumb-value, empty, hit, item, level, map, name, node, note, rest, scroll, text, tools, trail, value |