Smart Transform is a free Figma plugin for perspective, distort, skew, warp and 3D rotation that keeps the original layer editable. Apta’s Creative Director, Tcharles Coutinho, built it in about two days using Claude, plain JavaScript and the Figma Plugin API.
It started with a mockup he needed to update and became a tool other designers can now use in their own work.
The mockup problem that started it
Tcharles was updating mockups that had already been approved, without access to the original files. New artwork needed to fit the existing composition, including its angles and curved surfaces.
He had tested several Figma plugins for this kind of work, but the functionality was spread across different tools: one for perspective, another for tilt, another for 3D rotation.
Some had bugs or lacked controls he needed. Others required adjustments inside the plugin’s own preview window, making it harder to judge the artwork against the mockup on the canvas.
He wanted to work directly where the design was happening, see the result as he adjusted it and keep those controls together.
Building one feature at a time
Perspective came first. Before expanding the plugin, Tcharles focused on getting the corner controls to work directly on the Figma canvas.
That interaction was the most demanding part of development. During testing, undo caused bugs, control points did not always move as intended, and Figma’s frame outline interfered with the experience.
Tcharles mapped out how the interaction should behave, including what should happen when a designer moved a point or reversed an action. He then used that logic to work through the implementation with Claude.
He designed the interface and developed the plugin himself, adding each feature after the previous one worked. Smart objects followed perspective, then Warp and the remaining transformation modes.
The development took approximately two days.
Where Claude fit into the process
Tcharles used Claude to implement the behaviour he had defined and work through the logic behind the controls.
His experience as a designer gave him a concrete reference for what the interaction needed to accomplish. He could evaluate whether moving a corner felt right, whether the preview helped him position the artwork and whether the content remained practical to edit.
The plugin uses plain JavaScript and the Figma Plugin API. Its main code handles selection, transformation data and the resulting layers, while an HTML, CSS and JavaScript panel provides the interface.
Throughout development, Tcharles tested the interaction and refined how it should respond before moving to the next feature.
What this Figma perspective plugin can do
Smart Transform works with images, shapes, text, frames, groups and components, including several layers at once.
Its transformation modes cover different applications:
Distort: position each corner independently to fit artwork to a surface.
Perspective: move neighbouring corners in opposite directions to adjust perspective.
Skew: slide corners along the edges to change the slant.
Warp: bend a composition using a 4×4 mesh with 16 control points or start from one of 15 presets.
3D rotation: rotate artwork on the X, Y and Z axes and adjust the lens strength.
The controls work directly on the canvas with a live preview. Designers can also enter exact corner values in the panel, make smaller adjustments with the arrow keys and undo changes.
Output can be vector or image. Vector output preserves text and shapes as crisp transformed paths, while image output renders photos, effects and masks at up to 4× resolution. Auto selects the output and explains its choice.
The plugin works offline, makes no network requests and collects no data.
Keeping the content editable
For Tcharles, editing after the transformation was an essential part of the tool.
With some plugins he had used, transforming the artwork made subsequent content changes difficult. He wanted new or edited elements to inherit the same perspective or warp already applied.
Smart Transform keeps the original content and the rendered result together in one frame. Choosing Edit content opens the original beside the result. Changes inside it update the transformed version live.
A designer can replace a photograph, revise a headline or add an element while preserving the transformation. Edit transform and Refresh are also available from the right sidebar.
This supports a familiar part of client work: the presentation has been approved, but the content still needs to evolve.
A solution built at Apta, available to every designer
A production problem gave us a clear brief for a tool. Tcharles defined the interaction, designed the interface and used Claude to build a working plugin that brings those controls into the designer’s canvas.
That expands what we can do when a workflow gets in the way. We can examine the problem, define how a better interaction should work and build a solution around it.
With Smart Transform, that solution is available for free. Designers can use it for their own mockups and visual explorations, with perspective, warp, rotation and editable source content together in one tool.
A notebook screen and a cylindrical surface are two applications Tcharles identified for demonstrations. Perspective and rotation help position artwork on a screen, while Warp can shape a composition for a curved surface.
For our agency partners, this is also a look at how we approach production at Apta. We bring design judgement into the workflow itself, including the tools used to create and revise the work.
Feedback from designers will help shape what comes next. Tcharles plans to continue developing the plugin as people explore its applications and share what they need.
