16 no-code and low-code computer science projects for beginners and pros

You don’t need to write a single line of code to build something real. No-code and low-code tools have changed who gets to build things. Now anyone with a big idea and a browser can go from concept to working product.

Whether you’re a student building your first app, a designer prototyping a tool, or a product team validating an idea before handing it off to engineers, no-code and low-code projects let you move fast, learn by doing, and collaborate across disciplines. And with tools like Figma Make, you can describe what you want, watch it get built in real time, connect it to real data, and embed the finished app directly in your Figma files.

Read on to learn:

• What no-code and low-code mean (and how they're different)
• 16 project ideas with Figma Make templates to get you started
• Tips for building better no-code and low-code projects

What's the difference between no-code and low-code?

No-code tools let you build fully functional apps, websites, automations, and more without writing any code at all. Visual drag-and-drop interfaces do the heavy lifting. Low-code tools offer a bit more flexibility because they have visual builders at their core, but allow developers (or ambitious beginners) to add custom code when needed.

Both approaches are built around the idea that you should be able to make things without a computer science degree as a prerequisite.

Figma Make sits at the intersection of both worlds. It's a prompt-to-app tool built into Figma that lets you describe what you want, watch it get built in real time, and keep refining — all without writing code. You can connect it to Supabase for real data, add user authentication, and embed the finished app directly in Figma Design, FigJam, or Figma Slides.

Here are 16 projects, from beginner-friendly to advanced, to help you build, learn, and co-create with your team.

Project 1: Interactive product prototype

Before writing any code, teams need to know what they’re building. An interactive prototype lets you map out user flows, test navigation, and validate design decisions, all without touching a codebase.

Use Figma Make to describe your product idea and get an interactive prototype up fast. Or start in Figma Design to build a clickable, screen-by-screen mockup with full control over visual details. Either way, you end up with something you can share, test, and iterate on before your engineers write a single line of code.

Why it works: Prototypes compress the gap between imagination and reality. You get real feedback before a single sprint begins, which means fewer surprises in development.

Template: Low Fidelity Website Wireframes by Deepak Dazzles

Project 2: Personal portfolio website

Your portfolio is your first impression. A no-code website builder lets you design and publish a professional portfolio without writing HTML or CSS from scratch.

Use Figma Make to prompt your way to a working portfolio layout. Enter something like “a portfolio site for a data science student with a project grid, skills section, and contact form.” You can then refine the design, swap in your content, and publish. To go live directly from Figma, you can even use Figma Sites.

Why it works: Designing and building in the same tool keeps you in the flow. You spend less time switching between apps and more time making exactly what you want.

Template: Data Science Portfolio Website by siddhesh m

Project 3: User research dashboard

Turn raw survey data into a shareable insight hub. No-code tools like Airtable and Notion let you build custom databases and dashboards without SQL. Figma Make takes it further. Just prompt your way to a visual dashboard and connect it to real data through Supabase.

First, use FigJam to map your research questions and affinity-sort responses as a team. Then build your dashboard in Figma Make and share a link with the whole product team.

Why it works: Research dashboards make it easier for everyone—designers, PMs, and engineers—to stay grounded in user needs throughout a project.

Template: GraphQL Data Analytics File Upload Dashboard by Daph

Project 4: Automated workflow tool

Every team has a process that wastes time. Approvals that happen over Slack, status updates that live in someone’s head, handoffs that fall through the gaps. Building a simple workflow tool around that process is one of the highest-value no-code projects you can tackle.

Use Figma Make to build a lightweight tool that visually maps the process: intake forms, status tracking, and notifications. For pure automation logic like triggering emails or connecting apps, tools like Zapier work well alongside it. Before you build anything, start by mapping the workflow in FigJam to define the triggers, actions, and handoff points.

Why it works: Visualizing a workflow before building helps you catch edge cases and communicate the logic to teammates who aren’t in the tool with you.

Template: Business Process Flow Diagram by Sandeep Kumar

Project 5: Mobile app (no-code)

Building a mobile app used to take months and a full engineering team. Not anymore. With Figma Make, you can describe your app idea in plain language like “create a civic issue reporting app where residents can submit problems, add photos, and track resolution status,” and watch it take shape in real time. Use follow-up prompts to refine your design, then connect it to Supabase to store real data. You can even share a working link with users to test.

Why it works: The faster you can put something in front of a real user, the faster you find out if your idea actually works. And every iteration you run is one fewer assumption you’re carrying into the build.

Template: Civic Issue Reporting App by neetu singh

Project 6: Internal tool for a team process

Every team has a manual process that’s quietly costing them time: a tracker living in a spreadsheet no one trusts, a request that gets lost in Slack, a status board that’s always a week behind. The best internal tools come from the person who’s tired of the broken process.

Start in FigJam with the people who feel the pain most. Map the current workflow, name the friction points, and agree on what “fixed” looks like. Then bring that brief to Figma Make. Describe the tool you need, watch it take shape, and connect it to Supabase so it works with real data from day one.

Why it works: The best internal tools solve real problems for real people. Starting with a FigJam session gets buy-in from the people who’ll actually use the tool and gives you a clear brief to prompt from.

Template: Coffee Shop Admin Dashboard by Mehul Rana

Project 7: Data visualization project

A data visualization project takes a public dataset (weather patterns, economic trends, health metrics) and turns it into something people can actually understand and act on.

Use Figma Make to build an interactive dashboard around your dataset. Prompt your way to charts, filters, and summary cards, then connect to a live data source through Supabase. For standalone chart embeds, tools like Flourish and Datawrapper also work well alongside Figma Make.

Why it works: Data visualization is a core computer science skill. Learning to communicate data clearly is just as important as knowing how to process it.

Template: Animated AI Data Flow Visualization by Aditya Kumar

Project 8: Startup landing page

A landing page is the fastest way to test whether your idea has legs before you build anything. Type something like “a landing page for an AI agency with a hero section, services overview, client logos, and a contact form” into Figma Make and you’ll have a complete, styled page in minutes.

Use Figma Slides to present your landing page concept to stakeholders before you publish. Walk them through the value proposition, visual hierarchy, and call-to-action flow, then collect live feedback with built-in polling tools.

Why it works: Getting alignment on a landing page before you build saves you from redesigning it three times after launch.

Template: AI Agency Website by sitenoobs ceo

Project 9: AI-powered app

What counts as an AI-powered app is wider than you might think: a voice interaction app, a document editor with smart suggestions, an assistant that responds to context. Figma Make can get any of them off the ground fast.

Map your core user flows in FigJam first. Define the key interactions, edge cases, and error states before you start prompting. Then build in Figma Make and test with real users as early as possible.

Why it works: AI-powered apps are only as good as the experience around the AI. Thinking through the design before you build—and testing a working version quickly—makes for a much better product.

Template: AI Voice Interaction App by Nessi.Huang

Project 10: E-commerce store

E-commerce design decisions—product layout, cart flow, checkout copy—directly affect whether someone buys or bounces. Prompt Figma Make with exactly what you need: an online supermarket with a product grid, cart, checkout flow, and order confirmation page. Build it, test it, and find out where people drop off before you commit to a platform or connect a payment processor.

Use Figma Slides to walk stakeholders or clients through the shopping experience before you finalize the build. Embed your Figma Make prototype directly into the slides so they can interact with it in the room.

Why it works: Iterating in Figma Make is faster and cheaper than iterating in a live store. Every round of feedback you collect before launch is a round of rework you don’t have to do after it.

Template: Supermarketprotype by toroitich grace

Project 11: Educational app or LMS

Every learning tool starts with the same question: what does a student actually need to see? Start there. Prompt Figma Make with something specific—a student dashboard that shows enrolled courses, assignment deadlines, grades, and a progress tracker—and build from what comes back.

Once it feels right, connect real data through Supabase and share with classmates to test.

Why it works: Building something educational forces you to understand your topic deeply. It’s a project that teaches you twice.

Template: Student Dashboard LMS Application by Sakshi Parashar

Project 12: Task management app

There’s a reason task managers are a classic CS project. They touch everything. Tell Figma Make you want a kanban board where you can create tasks, assign them to columns, set priorities, and drag to reorder. Then start breaking it. Use follow-up prompts to keep refining: add a due date field, change the color scheme, adjust the layout. Connect to Supabase to persist your data, and you’ve gone from idea to working app in a single session.

Why it works: Task management apps touch almost every core UI pattern—lists, forms, drag-and-drop, state management. Building one teaches you a lot about product design and data modeling fundamentals.

Template: Kanban Board Application by dimorin

Project 13: Social media content scheduler

Every team that publishes regularly has the same problem: content lives in three places, nobody knows what’s scheduled, and something always falls through the gaps. Describe the tool that fixes that to Figma Make. Mention specifics like “include a calendar view, post composer, and status tracker,” and watch it appear in a single session.

Before you build, use FigJam to plan your content strategy and calendar structure with your team. Map the workflow, define the statuses, and agree on the data structure so you know exactly what to prompt.

Why it works: This project combines data modeling, workflow design, and visual design—three skills that matter across every product role.

Template: Notifications and Announcements Page by Dina Adwan

Project 14: Budget or finance tracker

A budget tracker is a practical no-code project that’s useful the moment you finish it. Prompt Figma Make to build “a personal finance dashboard and budget tracker with spending categories, a monthly summary, and a chart showing expenses over time.” Then connect it to Supabase to store real transactions.

Why it works: Budget trackers teach you about relational data, filtering, and aggregation—core database concepts—through a problem you already care about.

Template: Healthcare Dashboard for primary care setting by Ayesha Fathima

Project 15: Design system starter

A design system is a shared language for everyone who touches a product. Building one in Figma is a low-code CS project that has lasting impact on how a team works.

Use Figma Make to generate a component library scaffold, then move your components into Figma Design to refine them, document usage, and publish the library to your team. Dev Mode in Figma makes the handoff to engineers easy. Developers can inspect components, copy code snippets, and access specs without leaving the file.

Why it works: Design systems reduce duplicated work, improve consistency, and help designers and engineers collaborate better. They’re one of the highest-leverage things a product team can build together.

Template: Ready for Dev Mode? by Kevin To

Project 16: Hackathon pitch and prototype

Hackathons run on two things: a working prototype and a clear presentation. Figma Make handles both. Use it to build your prototype during the event, then embed it directly into Figma Slides so judges can interact with your product without switching tabs.

Figma Slides includes live engagement tools like polls, alignment scales, and voting, so it’s easy to collect audience feedback during the presentation. Co-create the deck with your team in real time, even if you’re all in different seats.

Why it works: A great hackathon pitch tells a story: here’s the problem, here’s what we built, here’s why it matters. When your prototype lives inside your slides, that story lands harder.

Template: Make-A-Thon Spinner by Brett McMillin / Figma Advocates