Cut/paste a portion of an image similar to Sketch?

Sometimes I need to tweak an existing web design. In my Sketch days if I didn’t/couldn’t have a source file, I might take a screenshot and in Sketch they have this great tool where you can select a portion of an image and copy/paste it. Need to move this down 100px and add a line of copy? I can do it in 30 seconds in Sketch.

In Figma, I know there’s the crop tool, but it seems to be this manual resize and then I need an uncropped copy too, etc.

Is there some option in Figma I’m missing? A plug-in that could help? I’ve tried HTML to Figma but the pages I need to capture make the plug-in freeze up.

Slice tool is what you are looking for:

Slice tool in Figma

1 Like

As far as I can tell, this is in the ballpark of what I’m asking for, but not exactly it. It appears a slice sits above the image and I could export a piece of it and bring it back into the file, which is different than what I’m describing in Sketch, where you can directly edit the image and cut/paste pieces out of it. If I could post a vid or gif showing what I mean, I would.

4 Likes

You can copy the image instead of exporting in the desktop app (Shift + Cmd/Ctrl + C).

2 Likes

Figma sucks at it

11 Likes

To clarify further, if you place a slice in front of the portion you want to copy, then press Shift + Command/Ctrl + C, it will copy the contents of the slice, and you can then paste it where you need it.

4 Likes

The slice feature isnt accomplishing that for me! Can you please advise if Figma has a way to copy and paste parts of an image.

4 Likes

Thanks for this! Also, it seems to past at 2x do you know how to change that?

1 Like

Because the screen is retina display, it gets the 2x image, as @Kim_Boyenga mentioned. Is there a way to have the same width and height?

1 Like

Following! Same question!

1 Like

@PolinaNik add export property of 1x size to the object you are copying, it will be copied at 1x

1 Like

I know I’ve done this before in Figma. Use some basic rectangle select tool and copy that window of an image and then paste it. So you can past a screen shot and slice it up and make basic updates without recreating these from scratch every time. Any luck with suggestions?

That destroys the high res image details. :-1:

The beauty of Sketch’s implementation is that the detail AND size were preserved on copy & pasting of selected image area. Without having to add cumbersome slice elements to the stage. More useful and intuitive than Figma’s default image manipulation on stage.

Quick crop by pressing Option+double clicking image (or select image and tap the ‘crop image’ icon in top bar ) is what I’ve been using recently, but it’s not as quick and fluid as Sketch’s double tap image > drag cursor > copy & paste.

1 Like

I want to paste a screenshot and cut a part of it (a product description on a product detail page). Then make the screenshot taller with more white space at the bottom. Move the description lower. Add a widget in between. This widget is the actual part I want to wireframe. Didn’t expect this operation to be so complicated in Figma

1 Like