figma guide
Designing IP allowlist and network restrictions UI in Figma: access control and handoff
Design IP allowlist and network restriction UI in Figma with CIDR rules, enforcement modes, bypass flows, geo blocks, and Dev Mode specs for enterprise security admin.
- Published
- Updated
- Jul 14, 2026
- Read time
- 7 min
- Level
- Intermediate
Quick answer
IP allowlists restrict org access to approved office, VPN, or datacenter ranges—configured under Organization → Security → Network. Design an allowlist rules table (CIDR, label, status, last hit); enforcement mode toggle (monitor vs enforce); a login blocked screen when IP is denied with VPN guidance; break-glass bypass for locked-out admins tied to 2FA re-auth; optional geo restrictions; and SCIM/SSO compatibility notes when SSO IdP sits outside allowlisted ranges. Log rule changes and blocked attempts to audit activity. Start from the Figma guides hub and pair with Dev Mode handoff for CIDR validation and enforcement specs.
Who this is for
- Product designers building enterprise Security settings, login error states, and IT admin consoles.
- Design system teams aligning network policy UI with session timeout and active sessions views.
- Engineers implementing CIDR matching, monitor mode metrics, and fail-safe admin bypass.
Network policy entry points
| Location | Audience | Actions |
|---|---|---|
| Org → Security → Network | Security admin | CRUD allowlist rules |
| Login denied page | End user | Read-only guidance |
| Admin onboarding checklist | New enterprise | ”Add office IP before enforce” |
| API / SCIM | Automation | Read policy status |
Verdict: one Network access settings page—do not split IPv4 and “trusted networks” across unrelated menus.
Allowlist rules table
| Column | Spec | Notes |
|---|---|---|
| Label | ”HQ Toronto”, “Corporate VPN” | Required for audit |
| CIDR / IP | 203.0.113.0/24 or single IP | Validate format inline |
| Status | Active / Disabled | Soft disable without delete |
| Last matched | Timestamp or “Never” | Monitor mode insight |
| Added by | Admin name + date | Link to audit |
| Actions | Edit, Disable, Delete | Confirm on delete |
AllowlistTable
├── Toolbar: [ Add rule ] [ Import CSV ] Monitor | Enforce toggle
├── Rows...
└── Footer: "12 rules · 3 matched in last 7 days"Import CSV for IT: columns label,cidr,notes with preview and validation errors before commit.
Add / edit rule modal
| Field | Validation | Helper text |
|---|---|---|
| Label | Required, max 64 chars | Shown in audit |
| CIDR | Valid IPv4/IPv6 CIDR | ”Use /32 for single IP” |
| Description | Optional | Internal notes |
| Effective | Immediate / scheduled | Change window for IT |
AddRuleModal
├── Label: [ Corporate VPN egress ]
├── CIDR: [ 198.51.100.0/24 ] ✓ Valid
├── Preview: "256 addresses"
└── [ Cancel ] [ Save rule ]Reject 0.0.0.0/0 and overly broad /8 ranges with warning—not hard block, but require extra confirm.
Enforcement modes
| Mode | Behavior | UI indicator |
|---|---|---|
| Monitor | Log would-be blocks; allow all | Amber banner: “Not enforcing” |
| Enforce | Block non-allowlisted IPs | Green banner: “Active” |
| Scheduled enforce | Monitor until date | Countdown on banner |
First-time enforce flow:
EnforceConfirmModal
├── "Users outside these ranges will be blocked immediately"
├── Affected estimate: "~4 members logged in from non-allowlisted IPs"
├── ☑ I have added VPN egress IPs
└── [ Cancel ] [ Enable enforcement ]Recommend 7-day monitor before enforce—show blocked-attempt chart during monitor.
Login blocked screen (end user)
When IP not on allowlist at enforce time:
AccessBlockedPage
├── Icon: lock / network
├── Headline: Access restricted to approved networks
├── Body: "Sign in from your company VPN or office network."
├── Details (collapsible): Your IP: 203.0.113.45 · Org: Acme
├── Actions: [ Try again ] [ Contact IT ]
└── Footer: Org admin? [ Break-glass access ]Do not expose full allowlist to end users—security through obscurity plus reduced support noise.
Copy should name VPN product if org configured help URL in settings.
Break-glass bypass
Prevent admin lockout when enforce misconfigured.
| Step | UI |
|---|---|
| 1. Link on blocked page | ”Org admin emergency access” |
| 2. Verify admin | SSO + 2FA |
| 3. Time-limited token | 1-hour session from any IP |
| 4. Audit + alert | Email all Owners; audit break_glass.used |
| 5. Fix prompt | Banner: “Add your current IP” with one-click add |
Limit break-glass to Owner / Security Admin roles—max 2 uses per 24h per account.
VPN and SSO interaction
| Setup | Consideration | UI note |
|---|---|---|
| SSO + allowlist | IdP may be cloud-hosted | Allowlist IdP callback IPs doc link |
| SCIM provisioning | Server IPs not user IPs | SCIM endpoint separate policy |
| Mobile apps | VPN per device | Mobile-specific help article |
| Split tunnel VPN | User IP may leak | IT doc warning in admin UI |
Settings sidebar callout:
SSO users must still connect from an allowlisted IP unless
Mobile SSO exemption is enabled (Enterprise).Geo restrictions (optional add-on)
| Control | Spec |
|---|---|
| Allowed countries | Multi-select ISO codes |
| Block list mode | Deny sanctioned regions |
| Override | Same as IP break-glass |
| Conflict with IP rule | Both must pass (AND) |
Show combined policy summary: “IP allowlist AND allowed countries: CA, US, GB.”
Session and device tie-in
Link from active sessions table:
| Session column | Add |
|---|---|
| IP address | With geo flag |
| Allowlist match | ✓ Allowed / ✗ Would block |
| Action | ”Add this IP” (admin only) |
When admin sees member session from unknown IP during monitor mode, one-click Add to allowlist pre-fills CIDR as /32.
API and automation access
API keys and webhooks often originate from servers—not user browsers.
| Access type | Default policy | UI |
|---|---|---|
| Browser login | Subject to allowlist | Enforced |
| API keys | Separate server IP list or exempt | Toggle in Network settings |
| SCIM | Dedicated endpoint allowlist | Link from SCIM setup |
NetworkSettings
├── User access (browser/mobile): Enforce allowlist
├── API access: ☐ Apply same allowlist to API keys
└── SCIM endpoint: [ Configure SCIM IPs ]Compliance and export interaction
Compliance exports download links may need same-network restriction:
| Setting | Effect |
|---|---|
| Restrict export downloads to allowlist | Download URL checks IP |
| Violation | ”Download from approved network” error |
Toggle under Network or Compliance—cross-link both settings pages.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Enforce without monitor period | Company-wide lockout | Monitor + chart first |
| No break-glass | Admins locked out | Owner bypass + audit |
| Allowlist blocks IdP | SSO login fails | Document IdP IP ranges |
| Overly broad CIDR | Defeats purpose | Warn on large ranges |
| No “last matched” column | Stale rules accumulate | Show usage |
| Block page leaks internal IPs | Recon aid | Show user IP only |
| API subject to browser rules | Integrations break | Separate API policy |
| Delete last rule while enforcing | Open or closed ambiguity | Confirm + auto-disable enforce |
| IPv6 ignored | Bypass via IPv6 | Support v6 or block v6 explicitly |
| No audit on rule change | SOC2 fail | Log CRUD + enforce toggle |
Recommended workflow
- Design allowlist table with add/edit modal and CIDR validation states.
- Add monitor vs enforce toggle with confirmation and affected-user estimate.
- Build login blocked page and break-glass admin flow.
- Extend sessions table with allowlist match column and quick-add IP.
- Document API/SCIM exceptions toggles on same Network page.
- Hand off CIDR parser rules and enforce middleware spec in Dev Mode.
- Link audit events for rule changes, blocks, and break-glass use.
FAQ
Does allowlist apply to external collaborators invited via member invitations?
Usually yes for org-guest login to org resources—configurable per enterprise policy.
Remote workers without static IP?
VPN egress CIDR is standard pattern—document in admin helper text.
Allowlist vs domain verification?
Complementary. Domain verification controls who can join; allowlist controls from where they authenticate.
Mobile offline then sync?
Network policy applies at auth time—offline cached sessions need separate product policy; note in mobile FAQ.
Can members see if they are blocked vs wrong password?
Use distinct copy for IP block vs auth failure—reduces password reset noise for IT.
Next steps
- Design SSO and enterprise login UI in Figma — IdP + network policy together
- Design active sessions and device management UI in Figma — IP visibility per session
- Design audit log and security activity UI in Figma — rule changes and blocks
- Design compliance exports and legal hold UI in Figma — restrict export downloads
- Design two-factor authentication and security settings UI in Figma — break-glass verification
§ Keep reading