Week 3: From Figma Make to ReactJS

Please see the following updated prompts that is suitable for Figma Make. Without these, Figma Make might add unwanted design libraries or styles, which could cause issues in future development.

Updated Prompt for Project Initialization

Following is the updated prompt for initializing the Figma Make project.

Prompt for Page Content Creation

Here is the updated prompt for Figma Make projects. Since tools like Figma Make already includes common UI components in its project folder, you can ask it use them when possible.

Here is another full project demo on Figma Make using a different prompting approach:

Demo: Create a Responsive Multi-Timer

What does it mean by "Share?"

When you share a Figma Make project, you will invite others to view or edit your project file. They will be able to view your version history, generated code, and all the prompts you wrote.

Example of the link to the shared project: https://www.figma.com/make/TBp7p0ojXETe3EHsme2esZ/Responsive-Multi-Timer?t=ShfsdgWVvnERqZb8-1

How to share a project?

What does it mean by "Publish?"

When you publish, Figma Make will build your project for final production. You will get a published link for your final users. They will only see the functional site, not your prompts.

Example of the link to the published site: https://multi-timer.figma.site

How to publish an app?

You can also customize the domain name of the published app. So, instead of using a random name like "fried-admin-19324788.figma.site", you will have a more meaningful domain like "multi-timer.figma.site."

How to change or customize domain name?

Node.js & NPM: The Work Bench of your project

What is Node.js?

Node.js is like the print shop for your printing project - it provides a environment that you can work on your project. For your vibe coding project in the next step, you will need this to support the development process.

Node.js does not have a graphical user interface. The way developers interact with it is through the command line or an integrated development environment (IDE). That is also how AI assistants can help you with your development tasks.

What is NPM?

In the real-world web application development, deverlopers will existing code (called "packages, libraries, or dependencies") so that they don't have to write everything from scratch. In this process, you can think of NPM (Node Package Manager) as the App Store where you can find and use these pre-built components. Examples of such packages includes but not limited to: UI components, animations, style libraries, automated scripts, and much more.

Install Node.js and NPM on Windows

Install Node.js and NPM on macOS

How does FigmaMake, Base44, and Lovable help user make web apps easily?

What is React.js?

Real-world apps have dozens of pages, shared headers, reusable cards, and live data — managing all of that in plain HTML/CSS/JS becomes unmaintainable fast. This is why the industry uses frameworks: structured systems that make large projects manageable. React.js, created by Meta in 2013, is the most popular one — powering Facebook, Instagram, Airbnb, and Netflix. Its core idea: build your UI out of components, just like in Figma.

Why UX designers who code with AI should learn React

Developers use React every day. If you understand it, you can turn design ideas into working features, communicate more clearly with engineers, and contribute to the actual product instead of only handing off mockups. React is the shared language between design and development.

Built on ReactJS, a Figma Make project heavily relies on existing code and resources, we call them "packages" or "dependencies." If you go to code of a Figma Make project, you will see a file called package.json which lists all the packages and their versions. Here are some you'd better to know:

• Radix UI: This library provides the unstyled UI elements that could be customized later. This is the “backbone” of tools like Figma Make, Base 44, and Lovable. When you create, these tools will not create new elements for you, they will select existing ones from this library.
• Lucide: A collection of SVG icons for React applications. The AI agent will select icons from this library based on the devleopment needs. See what icons are available: https://lucide.dev/icons/
• Motion (or Framer Motion): A library for creating smooth animations. Please double-check their website (https://motion.dev/) to see what kinds of animation they have so that you can know what to say in your prompts. Alternatively, you also ask your AI agent to install other packages, like anime.js (https://animejs.com/) or GSAP (https://gsap.com/)
• Recharts: A library for creating responsive charts and data visualizations. See what charts are available and their names: https://recharts.github.io/

By learning these packages, you can know the terms to use in your prompts and better communicate with the AI agent.

Of course, during the development process, AI agents might install additional packages or update existing ones to meet your project's requirements. If there are specific packages you want to use, you can ask the AI agent to install them for you. Here are some powerful libraries you might find useful:

• Aceternity UI: A collection of pre-built React components with beautiful designs and smooth animations.
• Animata: A lightweight UI animation library with reusable motion patterns for modern interfaces.
• Three.js: A popular JavaScript 3D library for rendering interactive scenes, models, and effects in the browser. (The particle system of this website is built with Three.js)
• Bits UI (by Magic UI): A component collection focused on polished animated UI blocks and interaction effects.
• Zdog: A pseudo-3D JavaScript engine for playful, hand-crafted isometric illustrations and animations.
• Matter.js: A 2D rigid-body physics engine for building realistic motion, collisions, and game-like interactions.
• Anima.js: A flexible animation engine for sequencing and controlling CSS, SVG, and DOM animations.
• GSAP: A high-performance animation platform for complex timelines, scroll interactions, and motion choreography.

Make sure to Google the documentation for each library to understand how to use them effectively in your projects.

Note 1: before you can work with a React project, make sure you have Node.js installed on your computer. Please view "Node.js and NPM" section for installation instructions.

Note 2: never save a React project in a cloud folder such as OneDrive or Dropbox. The project will contains tens of thousands of files that can cause synchronization issues for your cloud storage.

Wrapup: After opening the project in Cursor exported from Figma Make, you need to do following:

• Ask your agent to check if your system is ready to work on this project
• Ask the agent to install dependencies (if not yet installed) or do it manually.
• Ask the agent to run the preview or do it manually.

Please find more details and the prompts in the video above.

What if I want to start a new React project from scratch without Figma Make?

That is easier than exporting from Figma Make. To do this, create a new folder, and open the folder in your code editor (e.g., Cursor). Then, ask the AI agent to help you create a new React project using a prompt like this:

What does "build" mean?

In React, "build" means to create a production-ready version of your app that could be published to a web server. Every time you click on the "Publish" button in Figma Make, it will rund the "build" process and host the app on Figma's server.

In AI IDEs like Cursor, the AI agent might build the app for you after the update. But that is not guaranteed due to the random nature of AI. But you can always build it manually in following two emthods.

Method 1: Ask AI agent to build

You can ask an AI agent to help you build your React app by providing it with the prompt like following.

"build this app for me so that I can deploy it on a web server as a static web applidation. "

Method 2: Build manually in terminal

If you know a little about command line, you would prefer to build your React app manually. Because it is more convenient and faster, just enter following commands in the terminal:

npm run build

This will create a production ready version of your app in the dist/ folder, which you can then publish to Netlify or similar hosting services.

Publish the app

Either method 1 or method 2 will create a production-ready version of your app in the dist/ folder. You can then publish this folder to Netlify or similar hosting services.

Mini Project - Week 3

1. Complete the tasks below following the instructions of week 3: ai.aaronyang.me/week/week-3
2. Install Node.js.
3. Select a new topic that contains 2 - 3 user tasks. (10 points)
4. Complete the first user task in Figma Make (30 points)
5. Publish your Figma Make project with the completed first user task. (10 points)
6. Download the code from Figma Make and use Cursor to complete the second (and third if you have it) user task. (20 points)
7. Build your web app and publish it to Netlify by uploading the dist/ folder to a new project.(10 points)

What to Submit

Submission Link: https://canvas.iastate.edu/courses/127779/assignments/2814319

1. Report how many prompts you used in total (including FigmaMake and Cursor or similar).
2. Provide 2 - 3 screenshot of your work progress showing your major prompts and outputs in Cursor (Figma Make is not needed). (10 points)
3. Please share 5 - 8 prompts that work well. (10 points)
4. Please share some prompts that don't work well, challenges you faced. Then explain what you see and how you fixed it. You can use screenshots. (10 points)
5. Submit following three links (20 points):
• A Shared link to your Figma Make project with the completed first user task. Make sure I have access to view your project and code.
• A Published link to your published Figma Make project.
• A Published link of Netlify to your web app completed in Cursor

Course Project - Week 3

1. Finalize your user flow/site map diagrams and descriptive text.
2. Collect UI designs for your references on layout and styling. Here are some resources:
• https://www.awwwards.com/
• https://dribbble.com/
• https://mobbin.com/
3. Create sketches for your project based on your userflow and site map. Here is a video tutorial for skecthing: https://www.youtube.com/watch?v=xfSia00k0jg
4. Make sure you add all items for your course project to the Figma Design file you submitted last week.