wasiful alam - Design Engineer | ContraWork by wasiful alam
wasiful alam

wasiful alam

Research and analysis

New to Contra

wasiful is building their profile!

Cover image for Advanced Curvature Extraction Tool for Figma Make Sandbox
Curvature Project link Link to Curvature https://www.figma.com/make/cXF6ey0n5jDt3MC1GoY5vq/Curvature?t=9B96hf3YeJKWheDY-1 This computer vision tool called Curvature Extractor & Piecewise Reconstructor, developed entirely within the Figma Make ecosystem. The application allows you to upload an image, draw a freehand polygon over an object, and mathematically extract and model the curves and edges inside that area. Every detected segment is fitted with a parametric polynomial equation. The reconstruction canvas in the Figma environment supports zooming, panning, and hovering over segment labels to read their equations inline. The entire application was built, iterated, and compiled inside the Figma Make sandbox, utilizing a live Vite, React, and Tailwind environment to preview the app in real time. To handle the visual design and structural framework directly within Figma Make, I leveraged the create_make_theme MCP tool to establish a dark brutalist-technical aesthetic. This tool generated the specific color palettes and configured the font pairing of Inter and JetBrains Mono. To guide these design decisions, I used the Figma make:aesthetic-stance skill, which dictated the layout principles, typography hierarchy, and overall craft rules for the interface. The newly Updated Ai tool is really helpful. Across this development session in the Figma Make sandbox, the original HTML and vanilla JS codebase was fully ported to TypeScript and React, using refs for imperative canvas access. I resolved a critical OpenCV.js loading bug within the sandbox by implementing polling for WASM runtime readiness instead of trusting the standard script onload event. The final UI reflects the Figma Make theme configuration, featuring a near-black background, cyan accents, numbered section headers, and corner bracket canvas decorations. Functional additions built into the sandbox environment include an equations panel with color-coded segment cards, cursor-centered scroll zooming, drag-to-pan functionality with a reset option, interactive hover equation popups, and a transparent PNG export tool. Video of the walk through https://youtu.be/zg8ocCRqm_I
1
3
259