Insta2Figma
Turn Instagram layouts into editable Figma designs
In plain English
A tool that takes an Instagram post and recreates it as a proper Figma design file, so designers stop rebuilding references by hand.
My role
Solo developer
Timeline
6 weeks
Team
Solo
Status
Open source
Design
Product tour
Section 01
The problem
Social media designers collect references constantly and then rebuild them manually in Figma to remix. That is slow, repetitive work that produces nothing new — it is transcription, not design.
Section 02
How I approached it
Extract structure from a post — layout regions, dominant colours, typography characteristics — and generate a corresponding Figma document through the Figma API, so the result arrives as editable layers rather than a flat image.
Outcome
A reference goes from screenshot to editable design file without the manual rebuild step.
Section 03
Going deeper
Structure, not pixels
Pasting an image into Figma gives you a picture you cannot edit. The value is entirely in reconstructing separable layers: background, image regions, text blocks, and colour styles that a designer can actually manipulate.
Working with the Figma API
The Figma REST API has real constraints around document creation and node structure. Much of the work was mapping an inferred layout tree onto valid Figma node hierarchies that open cleanly in the editor.
Section 04
The build process
Understand the target format
Reading Figma's node model closely before extracting anything, so extraction produced something expressible.
Build extraction
Layout region detection, dominant colour sampling, and typography inference.
Generate documents
Translate the extracted tree into Figma nodes and push through the API.
Section 05
How the pieces fit together
Each layer has one job. Read it top to bottom — that's roughly the path a request takes through the system.
NestJS service
Handles extraction requests and orchestrates document generation.
Layout and colour extraction
Infers regions, palette, and text characteristics from source content.
Figma REST API
Creates node hierarchies that open as editable layers.
Section 06
What it does
Layout extraction
Identifies structural regions instead of flattening everything.
Palette detection
Pulls dominant colours into reusable Figma styles.
Editable output
Real layers, not an embedded screenshot.
Section 07
The hard parts
Ambiguous structure
Inferring layout from a rendered image is fundamentally lossy, so the output is a strong starting point rather than a perfect clone.
API constraints
Figma's document creation surface required careful mapping to produce valid, clean node trees.
Section 08
What I took away
- Automation that saves a designer thirty minutes a day beats a clever feature nobody uses.
- Design the output format first when the output format is rigid.
Type
Design automation
Output
Editable Figma layers
Backend
NestJS
API
Figma REST
Let's build something worth shipping
Available for freelance projects, full-time roles, and technical consulting. Tell me what you're building and I'll tell you honestly whether I'm the right person for it.
Based in Rio de Janeiro, Brazil · Working with teams in any timezone · Fluent in English and Portuguese