Framer introduces Blocks-AI to auto-generate responsive components and micro-interactions

Design · 5 min read

Blocks-AI inspects a design frame and suggests component implementations, including animations for hover, focus, and loading states. It exports components with prop-driven APIs and isolated style scopes, making them easier to integrate into existing codebases. Framer also added a testing harness to preview component behavior under different props and data shapes.

The company emphasized a developer-forward approach: the generated components include unit test skeletons, storybook entries, and a mapping to common state-management solutions. Teams can accept, tweak, and re-run generation cycles to refine interactions without losing linkages to the original design.

Some developers reported minor issues with CSS specificity and non-semantic markup in edge cases. Framer responded by releasing a ruleset editor so teams can customize generation heuristics and enforce coding standards for component output.