Timeslot UI Figma - Scheduling Kit and Design System

Build your next scheduling product with a design system focused on calendar views and systematic component architecture.

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

• Calendars
• Availability configuration
• Booking page template
• Booking widget with date picker, time selector, and personal details inputs
• Appointment checkout

What's included?

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

With the Timeslot design system, 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 events

340+ component variants

• button, calendar components, inputs, and many more- built from scratch, with auto-layout
• open-source icons
• documented common use cases
• comprehensive component documentation, including anatomy and best practices, ready for engineer hand-offs
• examples of calendar cells in all colors found in the kit
  

Scheduling product patterns in 60+ screens

• 33 screens that cover major flows in any scheduling app, with desktop and mobile versions
• 9 calendar views: empty, daily, weekly, monthly, yearly, settings, integrations, and filters
• 10 color schemes for events
• 3 distinct visual styles for calendar cells
• manual event creation with an "Add event" modal
• availability scheduling with advanced availability settings
• the most common settings pattern in a scheduling software, including personal profile , notifications, booking page settings, and calendar apperance customization
• booking widget with date pickers, time selectors, and checkout
• booking 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. For components and patterns (screens), there are Index frames with relevant links to their respective content.

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 downloads the Timeslot design system 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.