Make It Responsive
A Figma plugin that automatically converts designs across different screen sizes using responsive layout logic, reducing hours of manual resizing to seconds.
- Type
- Design Automation · Figma Plugin · Product Engineering
- Role
- Creator · Design Engineer
- Contribution
- Product design · Plugin development · Layout logic
The problem
Designing for more than one screen size usually means rebuilding the same frame by hand for every breakpoint: resizing containers, reflowing columns, adjusting spacing and checking that nothing overlaps. For designers producing desktop, tablet and mobile versions of every screen, that is hours of repetitive work that adds no new design thinking, and it is exactly where inconsistencies between breakpoints creep in. Make It Responsive set out to automate that adaptation inside Figma, where the work already happens.
What I built
Make It Responsive is a Figma plugin that takes an existing frame and produces versions of it for other screen sizes. Rather than scaling everything proportionally, it reads the structure of the design first: which layers are containers and which are content, how elements are grouped, and how each one relates to its parent.
From that structure it infers how each part of the layout should behave at a new width, whether a row should wrap into a column, whether an element should stretch, hold its size or reflow, and only then applies the transformations that generate the new frame. The output is an ordinary, editable Figma frame, so a designer refines the result rather than starting again. Conversion completes in around two seconds, and the plugin has grown to more than 10,000 users.
Approach
From one frame to every screen
Key decisions
Preserve parent–child relationships
Layers are adapted inside the hierarchy they already sit in, so groups and nested components keep their structure instead of being flattened into loose shapes.
Infer behaviour before transforming
The plugin decides how each element should respond, stretch, wrap or hold, before it moves anything. Scaling a frame first and fixing it afterwards is what produces distorted layouts.
Automate most of it, leave room to refine
The aim was to remove the repetitive bulk of the work, not to replace judgement. Output stays fully editable so the last details are finished by hand.
Outcome
- Responsive conversion
- ~2 s
- Conversion accuracy
- 80–90%
- Users
- 10K+
The plugin turns a task measured in hours into one measured in seconds, with most layouts converting accurately enough to need only light refinement. It has grown to more than 10,000 users.
- Tools
- Capabilities
Working on something similar?
Start a conversation