DentaFlow — Dental Clinic UI Kit for Figma

DentaFlow is a complete Figma UI kit for dental clinic software. It includes an admin dashboard, a patient mobile app and a clinic marketing website, all built on one design system. If you design for dentists, orthodontists or multi-chair clinics, this kit gives you production-ready screens so you don't have to start from a blank canvas.

What makes it different
Most healthcare UI kits are made for generic doctor apps. DentaFlow is built specifically for dental workflows. At its core is a fully editable Tooth Chart (odontogram) that uses FDI numbering, with adult and child charts. Each tooth has 5 surfaces you can fill separately and 10 condition states, including caries, filled, crown, root canal, implant, missing and bridge.

What's included

• Clinic Admin Dashboard (1440px): dashboard overview, appointment calendar by chair and dentist, patient list, patient profile with dental chart, treatment plans, X-rays and documents, billing and invoices, staff, inventory, reports and settings

• Patient Mobile App (390px): onboarding, login, home, a 4-step appointment booking flow, treatment progress, aligner and braces tracker, reminders, payments, chat, family profiles and notifications

• Clinic Website (desktop + mobile): home page with before/after smile gallery, services, doctor profiles, online booking and contact

• Dental components: tooth, tooth chart, treatment plan item, chair schedule block, X-ray card and periodontal chart row

• Core components: buttons, inputs, date and time pickers, tables, cards, badges, modals, drawers, navigation, toasts, empty states and more

Key features

• Built entirely with Figma Variables: colors, spacing and radius, with no hardcoded values

• Light and Dark modes, switchable in one click

• Auto-layout throughout, with clean layer names and slash-named components

• Components with variants and properties (boolean, text and instance swap)

• WCAG 2.1 AA color contrast and 44px mobile touch targets

• Arabic RTL screens for Gulf and Middle East clinic projects

• Realistic sample data for a fictional clinic, ready for client presentations

• Uses free Google fonts: Inter and IBM Plex Sans Arabic

Great for

• Dental clinic management software (SaaS)

• Patient booking apps for dental chains

• Orthodontic and aligner treatment apps

• Dentist and clinic websites

• Client pitches, MVPs and prototypes

• Healthcare design portfolios

How it works

1. Download the file and open it in Figma. A free Figma account works.

2. Start with the Read Me page, which explains how the variables, modes and components work.

3. Change the brand colors in the variables, and the whole kit updates.

4. Build your own screens from the ready-made components, or edit the included ones.

File details

• Format: Figma (.fig)

• 1 Figma file, organised into pages: Foundations, Components, Dental Components, Dashboard, Mobile App, Website and RTL

• Fonts: Inter and IBM Plex Sans Arabic (free, Google Fonts)

• Images in previews are placeholders and not included