Design System

A collection of reusable components, guidelines, and standards that ensure consistency across a product and team. Design systems speed up development, maintain brand coherence, and enable designers and developers to speak the same language. Framer supports design systems through components, variables, and styles.

Related terms

Related terms

Dropdown

An interactive element that reveals a list of options when clicked, saving space while providing multiple choices. Dropdowns work best with 5-15 options—fewer suggests radio buttons, more suggests search or typeahead. Ensure dropdown menus are keyboard accessible and work well on touch devices.

Form

An interactive element that collects user input through fields like text boxes, dropdowns, and checkboxes. Well-designed forms balance collecting necessary information with respecting user time and effort. Keep forms short, use clear labels, provide helpful validation messages, and consider progressive disclosure for complex forms.

Modal

A dialog overlay that requires user attention before interacting with underlying content, used for alerts, forms, or focused tasks. Modals should have clear purposes and obvious dismissal methods—don't trap users in unexpected dialogs. In Framer, build modals as overlay components with appropriate entrance and exit animations.

Navigation

The system of links and menus that helps users find content and move through a website. Good navigation is consistent, clearly labeled, and reflects user mental models about site structure. Test navigation with real users to ensure your labels and organization make sense to your audience.