Local Images
Match local image and folder names to Figma nodes with #Hide and #ImageFit rules.
Local Image Fill works directly with files on your computer. It matches filenames or folder names to Figma nodes, so the images do not need to be imported to an Assets page first.
Single product
Select local images. ProdFill removes each file extension, matches the filename to a node name, and fills the matching node.
Image file: sofa-01.jpg
Rectangle: sofa-01Multiple products
Select the parent directory that contains your product folders. ProdFill matches folder names to frame names, then matches filenames inside each folder to node names.
#Hide(n) for missing images
#Hide(0)hides the current image layer when no matching file exists.#Hide(1)hides the parent.#Hide(2)hides the grandparent.
#ImageFit edge fitting
Add #ImageFit to a node name to preserve the full image and resize the destination layer to the image proportions.
Target layer: Hero#ImageFit
Local file: Hero.png- A landscape image in a square node keeps the width and reduces the height.
- A portrait image keeps the height and reduces the width.
Select a nested folder with slashes
Add a slash-delimited path to the product frame name when images should come from a specific product subfolder:
Lounge Chair/
Lounge Chair/Details/
