figma guide
Designing SIEM log ingestion and data source connectors UI in Figma: pipelines, parsers, and handoff
Design SIEM log ingestion and data source connector UI in Figma with source catalog, pipeline health, parser mapping, retention tiers, and Dev Mode specs for enterprise Security admin.
- Published
- Updated
- Jul 23, 2026
- Read time
- 8 min
- Level
- Intermediate
Quick answer
SIEM ingestion UI lets Security teams connect log sources, validate parsers, and prove telemetry coverage—not dump raw files into a bucket and hope. Design a source catalog with connector type, status, volume, and last event; connector wizard with credentials, scope, and shipper config; parser mapping for field normalization; pipeline health dashboard with lag, drop rate, and schema errors; retention tier assignment tied to data retention policies; and coverage gaps surfaced on the security posture dashboard. Start from the Figma guides hub and pair with audit log, alerting rules, webhooks, API keys, and Dev Mode handoff.
Who this is for
- Product designers building connector wizards, pipeline monitors, and parser editors for enterprise Security, IT, and platform admin consoles.
- Design system teams aligning status badges with badges, inline alerts, and tables.
- Engineers implementing shipper agents, webhook receivers, schema validation, and backfill jobs tied to compliance exports.
Source catalog (admin hub)
SourceCatalog
├── Header: Log ingestion · [ Add source ] [ Pipeline health ] [ Parser library ]
├── Summary: 24 active sources · 1.2M events/h · 2 degraded · 1 schema warning
├── Filters: Type · Environment · Status · Owner team · Retention tier
└── Row: Acme App — Auth events · Webhook · Healthy · 48k/h · Last event 12s ago| Column | Content |
|---|---|
| Source name | Human-readable: “Production Auth API” |
| Type | Webhook, Agent, S3 pull, API poll, Cloud trail, SaaS integration |
| Environment | Production / Staging / Sandbox |
| Status | Healthy / Degraded / Paused / Error / Configuring |
| Volume | Events per hour with 24h sparkline |
| Lag | Time since last indexed event |
| Parser | Linked parser version or “Unmapped” warning |
| Retention tier | Hot 30d / Warm 1y / Archive 7y |
| Owner | Security or platform team |
Verdict: catalog answers “what telemetry do we actually have?”—unmapped or stale sources must stand out before auditors ask.
Connector wizard (add source)
ConnectorWizard — Step 2 of 4: Authentication
├── Source type: Webhook receiver (HTTPS POST)
├── Endpoint: https://ingest.acme.com/v1/logs/auth
├── Auth: HMAC signature · Secret ref: vault://ingest/auth-hmac
├── IP allowlist: Optional · Link [IP allowlist UI](/designing-ip-allowlist-and-network-restrictions-ui-in-figma/)
├── Test: [ Send sample payload ] · Expected: 200 + event_id
└── [ Back ] [ Next: Parser mapping ]| Wizard step | Purpose |
|---|---|
| Choose type | Cards for webhook, agent, cloud, SaaS—show prerequisites |
| Authentication | API key, OAuth, mTLS, HMAC—never show raw secrets; link credential vault |
| Scope & filters | Which event types, apps, or regions ship |
| Parser mapping | Map raw JSON to canonical schema |
| Retention & routing | Tier assignment and index destination |
| Verify & enable | Test fire + enable with rollback option |
Use progress stepper across steps; combobox for SaaS app search.
Test payload: show parsed preview side-by-side with raw—highlight unmapped fields in yellow before go-live.
Parser mapping and schema normalization
ParserEditor
├── Raw sample (left): { "user_id": "u_123", "action": "login.success", ... }
├── Canonical schema (right): actor.id · event.type · geo.country · device.id
├── Mapping rules:
│ ├── user_id → actor.id
│ ├── action → event.type (lookup table)
│ └── ip → network.client.ip + geo enrichment
├── Validation: 3 required fields missing in 0.2% of samples
└── [ Save parser v3 ] [ Run backfill on last 24h ]| Pattern | UI detail |
|---|---|
| Field mapper | Drag-drop or dropdown per canonical field |
| Lookup tables | Map vendor codes to standard enums |
| Enrichment badges | Geo, ASN, threat intel—show optional add-ons |
| Version history | Parser v2 → v3 diff; rollback with impact preview |
| Schema errors | Queue of rejected events with fix suggestions |
Canonical fields should align with audit log columns so alert rules and hunts use one vocabulary.
Backfill warning: changing parser on high-volume source shows estimated re-index time and cost—require confirmation for production.
Pipeline health dashboard
PipelineHealth
├── Global: Ingest lag p95 8s · Drop rate 0.01% · Schema reject 142/h
├── Source cards:
│ ├── Auth webhook — Healthy · Lag 4s
│ ├── Admin API agent — Degraded · Lag 4m (agent offline?)
│ └── S3 archive pull — Paused · Maintenance until 6 PM
├── Top errors: Invalid signature (23/h) · Payload too large (5/h)
└── [ Open dead letter queue ] [ Notify owners ]| Metric | Threshold UI |
|---|---|
| Ingest lag | Green <30s · Yellow 30s–5m · Red >5m |
| Drop rate | Alert if >0.1% sustained 15m |
| Schema reject rate | Link to parser editor with sample failures |
| Agent heartbeat | Last seen timestamp; offline >10m = degraded |
| Quota usage | Daily cap for sandbox sources |
Feed gaps into posture dashboard: “Admin API logs missing 6h — SOC2 CC7.2 gap.”
Pair with security alerting—prebuilt template “Ingestion lag >5m for production auth.”
Retention tiers and routing
RetentionAssignment
├── Hot index (30d): Real-time search, alert rules, hunts
├── Warm storage (1y): Search with slower query · Compliance queries
├── Archive (7y): Export-only · [Legal hold](/designing-compliance-exports-and-legal-hold-ui-in-figma/) override
└── Per-source override: Auth logs → Archive 7y (SOC2)| Tier | Typical use | UI copy |
|---|---|---|
| Hot | Active detection and dashboards | Default for security-critical sources |
| Warm | Investigations older than 30d | ”Query may take up to 60s” |
| Archive | Regulatory retention | Export job required; no ad-hoc search |
| Legal hold | Freeze deletion regardless of tier | Badge on source row |
Link data retention policies—ingestion tier must match org policy; conflicts show inline error on save.
Prebuilt connector templates
| Template | Default parser | Pairs with |
|---|---|---|
| Platform audit stream | Canonical audit schema | Audit log UI |
| Auth / SSO events | Login, MFA, session | Login UI, 2FA |
| API key usage | Token create, rotate, revoke | Credential vault |
| Webhook delivery logs | HTTP status, retry | Webhook admin |
| SCIM provisioning | User lifecycle | Directory sync |
| DLP blocks | Policy, file hash | Data exfil alerts |
| Cloud trail / VPC flow | Network egress | IP allowlist |
Template picker uses cards with “Requires agent” or “Webhook only” chips.
Dead letter queue and replay
DeadLetterQueue
├── Row: Auth webhook · Invalid HMAC · 47 events · Last 2h ago
├── Actions: [ View samples ] [ Fix parser ] [ Replay after fix ] [ Discard ]
└── Bulk: Select failed · Export for vendor ticket| Action | When to use |
|---|---|
| View samples | Inspect raw payload without indexing |
| Replay | After parser fix—dedupe by event_id |
| Discard | Test traffic; requires reason + audit entry |
| Notify owner | Slack to source owner team |
Replay shows progress bar and estimated completion—use loading states for long backfills.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| No test payload before enable | Silent data loss in production | Wizard verification step required |
| Secrets in connector config UI | Credential leak in screenshots | Vault references only |
| One parser for all environments | Staging noise triggers prod alerts | Environment tag on every source |
| No lag monitoring | Breach undetected for days | Pipeline health + alert template |
| Unmapped fields ignored | Alert rules miss critical attributes | Parser validation gate on enable |
| Retention mismatch with policy | Accidental early deletion | Policy sync check on tier assign |
| No dead letter visibility | Events vanish without trace | DLQ with replay and audit |
| Agent install without owner | Orphaned shipper when engineer leaves | Owner team required field |
| Archive tier on hot-only use case | Investigators cannot search recent fraud | Tier guidance per source type |
| Duplicate sources same stream | Double indexing cost and alert noise | Duplicate detection on create |
Recommended workflow
- Design source catalog with type, status, volume, lag, parser, and retention columns.
- Build connector wizard with auth, scope, parser, retention, and test-fire steps.
- Create parser editor with raw/canonical preview and version rollback.
- Add pipeline health dashboard with lag, drops, schema errors, and agent heartbeat.
- Wire retention tiers to org data retention policies.
- Add dead letter queue with replay and discard audit trail.
- Surface coverage gaps on posture dashboard; annotate field mappings in Dev Mode.
FAQ
Ingest platform audit vs customer app logs?
Separate source types—platform audit log uses canonical schema; customer apps need custom parsers.
Sandbox sources in production SIEM?
Default deny—sandbox events tagged and routed to low-priority index unless explicitly promoted.
Who can add a new source?
Security Admin or Platform Admin—tie to team roles; read-only for auditors.
Export for compliance bundles?
Archive tier export job—show source list, date range, format (JSON/CSV), and legal hold respect checkbox.
Agent vs webhook for API key events?
Webhook if platform emits; agent if customer must ship from their VPC—wizard explains tradeoffs.
Next steps
- Design security alerting rules and notification routing UI in Figma — rules depend on indexed fields from ingestion
- Design audit log and security activity UI in Figma — canonical schema target for platform events
- Design webhooks and event subscriptions UI in Figma — outbound mirror of inbound webhook ingestion
- Design data retention policies and auto-deletion UI in Figma — retention tiers must align
- Design security posture dashboard and compliance checklist UI in Figma — telemetry coverage KPIs
§ Keep reading