Timeslot UI Figma - Scheduling Kit and Design System

Supercharge your workflow and save dozens of hours with this scheduling UI kit.

This kit is perfect for designers and developers working on a software that contains any of the following flows or screens:

• Calendars and event list views
• Availability schedules and advanced scheduling settings
• Booking page template
• Booking widget with date picker, time selector, and personal details inputs
• Checkouts for appointments

What's included?

Every purchase includes a single-user license with free lifetime updates for every user.

With Timeslot UI you can save dozens of hours in rebuilding components and difficult calendar screens. You'll also discover the most common patterns and settings in scheduling products.

What's inside:

400+ global styles and variables

• effective typography system stored in global styles
• primitive variables for spacing, border radius, and color
• intelligent token system for coloring calendar event cells

200+ component variants

• button, calendar components, inputs, and many more- built from scratch, with auto-layout
• open-source icons
• documented common use cases
• examples of calendar cells in all colors found in the kit
• hover, pressed, succes, and error states for several interactive components

12 scheduling product patterns in 94 screens

• 46 desktop screens and 48 mobile screens that cover major flows in any scheduling app
• 10 calendar views: empty, daily, weekly, monthly, yearly, event list, settings, integrations, and filters
• manual event creation with an "Add event" modal that comes in 8 states
• availability scheduling with advanced availability settings
• empty states and default states for: list of services, table of customers, online payment methods, analytics
• the most common settings pattern in a scheduling software, including personal, company, notifications, booking page settings, and calendar apperance customization
• booking widget with date pickers, time selectors, and checkout, coming in three variants: free appointments, paid appointments, and full-screen widget version
• booking (services) page template

FAQ

What software should I use Timeslot with?

Figma.

What if I don't know how to use variables?

Working with the variables system is straightforward. Make sure you read Timeslot's documentation (found in the Figma file in the Documentation page), where I provide examples on how to change variables for calendar event cells and how to play with the components found in the file.

Are there going to be any future updates?

Yes. Some of the updates I plan are: dark mode, more components, low-fidelity screens, and advanced availability schedules for teams.

Are updates going to be free?

All updates are going to be free for everyone who purchases the Timeslot UI kit once.

Is there a dark mode?

Currently, no. Dark mode is going to be part of one of the future updates.

Can I use this kit in commercial projects?

Yes. You can use Timeslot UI in any commercial project without worrying about copyright, but you're not allowed to re-use, re-distribute, or re-sell the components and screens as part of another UI kit or design system on your website or any marketplace.

Any questions?

Email me at work@florianpopescu.com and I'll help you in any way I can.