Hot Spot

Smart Image Cropping Tool powered by
Object, Face & Subject Detection

Add to Figma Buy License on $5

“Hot Spot” is a Figma plugin that detects objects, human faces, and salient subjects within image nodes to enable smart image cropping.

The detection process uses machine learning models and is fast with the power of Worker and WASM (WebAssembly).

ML Models

🦉 Object Detection (Coco SSD)

Coco SSD is a lightweight object detection model capable of identifying 80 common objects—such as people, animals, and vehicles—in a single image. It provides both the position (bounding boxes) and labels for each detected object. Running efficiently in modern browsers, it’s an ideal solution for general-purpose image analysis and classification.

person, bicycle, car, motorcycle, airplane, bus, train, truck, boat, traffic light, fire hydrant, stop sign, parking meter, bench, bird, cat, dog, horse, sheep, cow, elephant, bear, zebra, giraffe, backpack, umbrella, handbag, tie, suitcase, frisbee, skis, snowboard, sports ball, kite, baseball bat, baseball glove, skateboard, surfboard, tennis racket, bottle, wine glass, cup, fork, knife, spoon, bowl, banana, apple, sandwich, orange, broccoli, carrot, hot dog, pizza, donut, cake, chair, couch, potted plant, bed, dining table, toilet, tv, laptop, mouse, remote, keyboard, cell phone, microwave, oven, toaster, sink, refrigerator, book, clock, vase, scissors, teddy bear, hair drier, toothbrush

😃 Face Detection (BlazeFace)

BlazeFace is an ultra-fast face detection model developed by Google. It can instantly detect the position of faces and key facial features (eyes, nose, mouth, etc.) in just milliseconds.

🎯 Subject Detection (U2-Net)

u2netp is a lightweight Salient Object Detection model that identifies the region that visually stands out from the background. Unlike Coco SSD, which is limited to a predefined set of 80 classes, it detects the most prominent area in an image regardless of the subject's category, making it well suited for general-purpose subject detection.

Mask Types

Cropping of image nodes is done by masking with vector nodes. There are three types of masks to choose from: rectangular, elliptical, and custom shapes of your own creation.

2 types of crop mode

Widely

Crop the original image by taking advantage of the extracted hotspot, leaving the original image wider.

Around

Crop around the extracted hotspot.

Aligment Function

Multiple image nodes can be processed simultaneously and aligned with specified width and spacing.

Third-party Libraries

This plug-in loads and uses the following third-party libraries:

  • TensorFlow.js

    Copyright (c) 2018 Google LLC

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  • ONNX Runtime Web

    Copyright (c) Microsoft Corporation

    MIT License

  • U2-Net (u2netp)

    Copyright (c) 2020 Xuebin Qin, Zichen Zhang, Chenyang Huang, Masood Dehghan, Osmar R. Zaiane, Martin Jagersand

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0