TLDR
Has anyone found a good solution to getting the original images in Sketch / FramerX / Figma files?
Problem
I'm primarily a UI developer so a lot of my daily work involves referencing UI designs. The software for these has been really competitive over the last few years, but most projects these days have been in one of:
- Sketch
- Figma
- FramerX
These tools are great because I can easily inspect measurements, colors, typography, and more.
Unless I'm missing something though, there is a giant hole in handing off designs in these tools: images.
Often I'll get a design that has background images (photos or illustrations) that have been cropped or resized for the screen at hand. Maybe the design includes a Hero image at 1200x675 and a gradient overlay. In all of these tools I can just "export" the frame into a PNG and get that exact image, but often the overlay needs to be animated or the I need some image bleed because it can be shown at different aspect ratios or with parallax.
For example, in this screenshot of Figma you can see the original image is a square, but it only exports the designed landscape image. How do I access the original square image?
I generally need the original image so I can get the bleed and manage overlays and styles at different screen sizes, in different contexts, and for animations.
Hacky Solution
For some of these I've found I can inspect the project file as a directory and find all images (sometimes a hundred or so) at their original sizes with hashed names that are completely unsearchable, but it seems like there should be a better way.
Recommendations?
Has anyone found a good solution to getting the original images in Sketch / FramerX / Figma files?
Photo by Sean Lim on Unsplash
Top comments (4)
I'm not sure if this is helpful/what you're looking for exactly, but I use the tool zeplin to upload designs and if the layers are named in a certain way by the designers, I can download the images/assets from zeplin. (zeplin.io)
Thanks Lynne, I'll take a look at Zeplin!
Well, Figma has that out of the box - just pick the asset you need and setup export config(s) for it, then... Export ;)
Idk the others hands-on, bug Fig is on top of it
I'm not sure I understand... in Figma I see the same export panel as in Sketch and FramerX, which only shows the export at the designed aspect ratio, not an export of the original asset.
For example, in this screenshot of Figma you can see the original image is a square, but it only exports the designed landscape image. How do I access the original square image?
Edit: I'm adding this clarification to the main post, as it is easy to misinterpret.