DEV Community: Sergio Pereira

From Old-School to AI-Driven: Creating Professional React Code from Figma

Sergio Pereira — Tue, 26 Aug 2025 13:07:47 +0000

You’ve got a sleek Figma file and need professional React code. For years, teams have done this by hand—effective, but slow and repetitive. In this article, we’ll first walk through the traditional workflow developers use today, then show how Bitloops (our Frontend AI Agent) automates the boring parts in about a minute, keeping code quality front and center.

Who this is for

Developers who want a clear mental model of design-to-code (even if you’ll automate it).
Teams seeking a faster path to consistent, responsive, component-based React codebases.
Engineers evaluating where AI can help without dumbing down the stack.

The Traditional Workflow

Professional devs still need to know the fundamentals. Here’s the common path—tightened to 6 steps.

1) Analyze the design

Break the Figma layout into reusable parts (buttons, inputs, cards, nav bars, sections). Map those to React components.

2) Set up the environment

Initialize the app and install common dependencies.

npx create-react-app my-app
cd my-app
npm install react-router-dom framer-motion styled-components

3) Establish structure

Consistent architecture reduces friction:

src/
  assets/        # images, icons, fonts
  components/    # reusable UI components
  pages/         # page-level components
  styles/        # globals/tokens if not using CSS-in-JS
  hooks/         # custom hooks
  utils/         # helpers/constants

4) Build components

Turn UI pieces into composable React components. Keep props meaningful; avoid hard-coding.

// src/components/Button.jsx
export default function Button({ variant = "primary", onClick, children }) {
  return (
    <button className={`btn btn--${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

5) Style, assemble, and route

Translate design tokens into CSS (CSS Modules, styled-components, or Tailwind). Compose layouts, wire routes, and make it responsive.

// src/App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home.jsx";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>} />
      </Routes>
    </BrowserRouter>
  );
}

6) Refine and Test

Iterate for pixel fidelity, accessibility (semantic HTML, keyboard navigation, ARIA), performance, Storybook stories, and component tests.

Why this is a grind

Converting a Figma design into React manually may sound simple, but in practice it involves dozens of repetitive, detail-heavy tasks. Developers often spend hours (sometimes days) on things like:

Downloading and organizing assets: Exporting every image, icon, and illustration from Figma, optimizing them for the web, and placing them into a clean folder structure.
Extracting fonts and styles: Identifying the correct font families, weights, and sizes, then configuring them in CSS or through font loaders.
Analyzing the design: Carefully reviewing the Figma file to decide what becomes a component, what’s just a UI element, and what should be structured as a larger section or layout.
Identifying states and variants: Determining whether components need hover states, focus states, disabled variants, size variations, or themes—and implementing each one.
Recreating spacing and alignment: Translating exact paddings, margins, and constraints from Figma into CSS, ensuring consistency across all screen sizes.
Handling responsiveness: Writing media queries, flexbox/grid layouts, or utility classes to make sure the design works across desktops, tablets, and mobile devices.
Building interactivity: Wiring up button clicks, input states, navigation, and animations to match the intended user experience.
Writing boilerplate: Creating React files, defining props, and repeating patterns for every component (buttons, cards, modals, navigation, etc.).
Testing and documentation: Adding component tests, responsiveness checks, and Storybook stories to ensure components work in isolation and scale safely.
Pixel-perfect adjustments: Constantly going back and forth between the running app and the Figma file to tweak small details until they visually match.

All of these steps are necessary for professional-quality code—but most of them are tedious, repetitive, and not the best use of a developer’s creativity.

The Bitloops Way 🚀

Bitloops is a Frontend AI Agent that automates the repetitive design-to-code work while preserving best practices—without locking you out of the developer’s seat.

Instead of just spitting out code blindly, Bitloops analyzes the design like an experienced frontend engineer would:

Structural Analysis: Breaks down the design into sections, components, and UI elements—deciding what should be reusable, what belongs in a layout, and how everything fits together.
Editable Architecture: Proposes a clean, component-based structure that you (the developer) can adjust if you prefer a different approach.
Asset & Token Extraction: Exports all images, icons, and fonts from Figma, finds and applies the correct design tokens (colors, spacing, typography), and organizes them into a proper folder structure.
Component Naming & Boilerplate: Identifies repeated elements as shared components, names them consistently, and generates the boilerplate React code.
Responsiveness & States: Bakes in responsiveness and detects common states (hover, disabled, variants) so you don’t start from scratch.
Testing & Documentation: Generates unit tests and Storybook stories so components are documented and validated out of the box.

A 90/10 Approach

Bitloops doesn’t claim to be 100% perfect. Instead, it gets you 90% of the way there automatically:

The repetitive, gritty work is done for you.
Any mismatches, errors, or edge cases are flagged clearly.
You can then tweak, refine, and focus on the high-value engineering tasks—business logic, UX polish, and performance tuning.

In short: Bitloops gives you a professional-quality React codebase in minutes, while keeping you in full control. It automates the boring 90% so you can spend your time on the interesting 10%.

Why it matters

Bitloops doesn’t replace frontend developers. Instead, it removes repetitive steps so you can focus on what matters: building logic, refining UX, and shipping faster.

Whether you’re a solo developer or part of a team, this means more productivity and less time wrestling with boilerplate.

Try Bitloops

We’re currently in closed alpha. Join the waiting list and we’ll get you access ASAP.

Not all features are available yet, but we’re iterating fast—and if you’re really keen, email the founders with your top 3 books, podcasts, or movies, and we’ll expedite your access.

Bitloops is here to make frontend development smarter, faster, and more enjoyable. Why spend hours copying designs when you could start coding in minutes?

From padawan to Jedi - boost your dev skills with the Ultimate Todo App

Sergio Pereira — Wed, 05 Apr 2023 15:00:31 +0000

Building software has come a long way over the past few years, but at the same time, it has become increasingly complex. With new technologies, databases, frameworks, and deployment methods emerging all the time, it's hard to keep up.

As developers, we understand the importance of building software that not only functions correctly, but also adds real value to the end-users. This is why we strive to focus on the core business logic and the features that directly contribute to the user experience, rather than spending countless hours on the mundane tasks that often come with software development.

We of course streamline the development process and try to minimize the amount of time spent on non-essential tasks, but it's still overwhelming. Requirements change, deadlines always seem impossible, the world of software continues to evolve at an ever-increasing pace, it seems that the challenge of keeping up is here to stay.

Ultimately, we want to create software that has a greater impact on the world, while also making our jobs as developers more fulfilling and enjoyable.

That's why we decided to take a step back and really focus on software architecture. We dug deep into Hexagonal Architecture, Event Driven Architecture, and other patterns like CQRS and Event Sourcing. We also dove into Domain Driven Design and Behaviour Driven Development.

The result?

Well, after months of learning and working on the Bitloops Platform (join waiting list - release in a few months), we created the Ultimate ToDo app that follows all of these great design patterns and principles.

Now, we know what you're thinking, a ToDo app might not need to be this over-engineered. But trust us, this app is a great example for building awesome software that's easy to understand and easy to change.

You can find the entire codebase in our GitHub Repo: ddd-hexagonal-cqrs-es-eda. We've used TypeScript / NodeJS and built it with Nest.JS.

The repo and codebase has been designed to help you learn, leverage and copy to build software that's organized, easy to understand, and easy to change.

And the best part, it uses available open-source technologies and has integrations setup for MongoDB, PostgreSQL, NATS, JWT (for authentication), Jaeger and Prometheus, but of course, all of these can be changed or adapted if you wish.

Let me break down the example for you!

Overarching software architecture and design patterns

Hexagonal Architecture, which is a great approach for building modern software applications, is a core inspiration, as well as domain-driven design (DDD) for the design of the domain logic.

The combination of these two software patterns / principles makes it really easy to build tests, create new features, and change stuff, without having to worry about unintended consequences.

At their core, both hexagonal architecture and DDD preach the separation of business logic code from infrastructure code. This ensures your code is organized, easy to understand, and easy to change.

Therefore, in the example provided, we clearly separated the domain and application code from all the other code, including the website, authentication, database, and tracing and observability tools we use.

Understanding the domain

Now, when it comes to understanding the domain, we use Event Storming to help us out. It helps us get all of our domain experts, product managers, and developers on the same page, speaking the same language, and aligning on what's required.

In this particular example, we created three bounded contexts and different number of processes within each:

IAM
- User Login process
- User Registration process
Todo
- Todo Process
Marketing
- Onboarding Process

Clarification: the event storming yielded many interesting and valid ideas for the ToDo app - the options are almost limitless. However, the purpose of this example was to demonstrate the software design and architecture, not ToDo App features!

Focusing on the Todo process as it is the core domain, we've identified five commands that are separate use cases:

Add Todo
Complete Todo
Uncomplete Todo
Modify Todo Title
Delete Todo

Each of these use cases should be separate from the other, and that's why this step is so important. If you do this well, you'll find that the actual coding is quite simple.

For more details do checkout the Github repo.

Building the App

We have a clear project folder structure that follows the output of the event storming. The business/domain logic code is where the high-value code lies.

This is what differentiates your application from others, so it's important to keep it well organized and easily changeable.

For the Todo process, we've set up the application to coordinate the activities and hold the use cases.

Why do we need all this?

The commands trigger the command handlers
Contracts specify how the todo module communicates with other modules
The domain contains all the elements using DDD
Ports represent the interface between the application and infrastructure
Queries trigger the query handlers
Tests include all the behavior driven tests that were identified

The code is all there in the repo, but its actually not the most interesting part. Setting it up and designing the application correctly is what makes the code so simple and practical.

So, how can this example help you?

Well, we believe that it can help developers of all levels as one of the main benefits is that the overheads and complications of using these design patterns and principles have been taken care of for you.

More experienced developers can use it as a template to more quickly and efficiently build projects that follow these design patterns and best practices. It serves as a quick reference guide or a cheat sheet on the side - a cheat sheet that you can easily tailor to your liking or contribute back if you have other things to add. The structure of the codebase alone will make your life easier when it comes to coding.

If you're a developer with intermediate experience, this implementation reference is gonna be your sidekick in helping you implement best practices. It'll make your software more organized and easier to understand, so you can save time and focus on things that are way more important.

And if you're new to this whole development game, this is your chance to get **exposure to a modern tech stack **that's gonna make you feel like you're in the big leagues. So don't be afraid to jump in and give it a shot, you might just surprise yourself.

If you found any of this interesting, I recommend taking a look at the project itself - we have all the code there.

Our ultimate goal is to build a platform that will help developers design and build scalable, resilient and easy to maintain applications like this example, but in an easier and even faster way.

This implementation reference is a sneak preview of what our platform will offer: empowering developers to focus on what really matters, the features that add value to your users.