# 🇯🇵 Made with Figma Make クリエイターが語る制作のプロセス Source: https://www.youtube.com/watch?v=OK79uXKKvI0 Recap page: https://rapidrecap.app/video/OK79uXKKvI0 Generated: 2025-12-21T22:33:26.131+00:00 --- ## Quick Overview The session featured creators Kuwahara and Miyamoto discussing their production processes for creating interactive works using Figma Make for a Shibuya Scramble Crossing campaign, detailing iterative prompting, building custom debugging tools within Make, and achieving high-quality, complex results through collaborative refinement. **Key Points:** - Kuwahara created the interactive work "Autumn Walk," where users walk through a 3D space filled with autumn leaves using joystick-like controls, which was displayed on the Shibuya Scramble Crossing screen. - Kuwahara's initial prompt was comprehensive, asking for a 3D space, colorful leaves, physics-based scattering, low-angle cinematic views, but the first result was stiff and slow, leading to iteration. - Miyamoto created "Party Type," an interactive piece allowing users to input text and manipulate particle effects, aiming for a greeting display suitable for the diverse nationalities at Shibuya Crossing. - Both creators emphasized an iterative process: Kuwahara learned the value of "Start Dirty" by making a quick, imperfect prototype first, and both stressed the importance of "Step-by-Step" quality improvement. - Kuwahara developed custom tools within Figma Make, such as a model viewer for GLB data and a camera parameter debugger, by prompting Make to create these necessary tools for better iteration. - Miyamoto often used a collaborative approach, sometimes involving real coding (React) with a teammate for fine-tuning parameters when natural language instructions proved insufficient for detailed effects. - Figma Make updates discussed included 'Make for MCP' for handing off code to editors, direct GitHub repository pushing, 'Make Connectors' for integrating external tools like Notion, and upcoming features like 'npm packages' and 'MakeKit' for design system integration. **Context:** This event, titled "Made with Figma Make: Creators Discuss the Production Process," hosted by Figma Japan Designer Advocate Tani, featured two creators, Kuwahara from OnePaku and Miyamoto from I3/DNA, who developed interactive digital artworks for a Figma brand campaign displayed on the Shibuya Scramble Crossing advertising screens. ## Detailed Analysis The session began with an overview of Figma Make, an AI-powered product announced in May that generates applications from text prompts, leveraging Figma design data for high design fidelity. The key benefits highlighted were starting from vague ideas (like 'vibe coding'), incorporating image sketches, testing new layouts from structured Figma data, and building highly interactive prototypes using API calls (camera, maps) beyond traditional Figma prototyping limitations. Kuwahara detailed his process for "Autumn Walk," starting with a single, large prompt, identifying performance issues, and then systematically improving the experience by first establishing a functional 3JS-based walking metaverse, importing a GLB model for shoe interaction verification via a custom-built model viewer, debugging the camera angle using numerical parameters revealed by Make, and finally detailing the leaf textures and particle effects. He summarized his learnings as 'Start Dirty,' employing a 'Step-by-Step' quality increase, and building 'Tools for Make' to aid the creative process. Miyamoto explained his journey with "Party Type," noting initial attempts to replicate past prototypes failed or yielded limited functionality, leading him to focus on interactive particle visualization. He intentionally limited himself to natural language prompts to test AI collaboration limits, often using positive reinforcement like "Good!" to guide the AI. When natural language failed for fine-tuning parameters or fixing background complexity, Miyamoto involved real coding (React) support. Both creators concluded that Figma Make significantly accelerates the initial concept visualization, allowing creators to spend more time on creative direction and less on tedious setup or manual coding, effectively augmenting their existing skills. ### Figma Make Overview - Generates applications from text prompts leveraging Figma design data - Allows starting from vague concepts or sketches - Enables high-fidelity prototyping using device APIs like camera or maps ### Kuwahara's 'Autumn Walk' Process - Started with one large prompt for a 3D leaf-kicking experience - Iterated by building a lightweight 3JS base first - Created custom debugging tools (model viewer, camera debugger) via prompting to refine details ### Miyamoto's 'Party Type' Development - Focused on interactive text input and particle visualization for Shibuya - Initially tested several concepts, realizing limitations in complex functional reproduction via pure prompting - Used positive feedback and explicit parameter requests to guide AI collaboration ### Iterative Prompting Strategy - Kuwahara advocates 'Start Dirty' for quick visualization and 'Step-by-Step' refinement - Miyamoto found success by explicitly requesting feature addition one by one, avoiding overly broad instructions that broke existing features ### Tooling and Collaboration - Creators built auxiliary tools within Make, like debuggers, to establish a common language for numerical tuning - Miyamoto frequently supplemented Make with external coding when complex parametric control was needed ### Figma Make Updates - New features include 'Make for MCP' for direct code handoff, Git integration for pushing code, and 'Make Connectors' to link with external knowledge bases like Notion.