Hot Spot

Smart Image Cropping Tool powered by
Object & Face Detection

Add to Figma Buy License on $5

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

The detection process uses TensorFlow 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.

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