Documentation

How Draft works.

What each part of Draft does, with pictures of how it looks. Pick a topic.

Create a project, drag pieces, change them, try them and take the code.

47 widgets in six categories, each with what it does and what you can change.

36 ready-made sections: lists, forms, product cards, chat messages, bottom sheets.

16 screens to start from, one of them blank.

8 style packs, text, color, borders, glass and micro-interactions.

Tap your design like an app: buttons, switches, fields, keyboards and sheets answer.

Flutter (Dart) for a widget or a whole page, React with TypeScript and Tailwind, and a description for an AI.

Your projects on your computer; with Pro, in the cloud too.

Draft designs the screens and gives you the code to take to your project. It does not write your app's logic, data or real navigation.