What are the most effective strategies to convert Figma/UI wireframes into clean, responsive HTML/CSS or React components?

I am building a web application using React and Tailwind CSS (or standard CSS). I have created UI wireframes and high-fidelity mockups in Figma (including landing pages, dashboards, and form components). Now, I am converting these visual designs into actual frontend code.

The Problem / Challenge: Simply copying and pasting CSS properties directly from Figma's Inspect/Dev Mode tab often leads to bloated, non-responsive code with absolute positioning and redundant styles. I want to build a clean, scalable component structure that is easy to maintain.

Specific Questions:

Figma Auto Layout to CSS: What is the best mental model for mapping Figma's Auto Layout (direction, padding, gap) directly to CSS Flexbox or Grid properties in React?

Component Architecture: How do you decide when to break down a single Figma frame into smaller reusable React components versus keeping them in one file?

Design Tokens & Variables: What is the standard way to export Figma color palettes, typography, and spacing variables into a React project (e.g., using Tailwind config or CSS custom properties)?

Figma-to-Code Tools: Are automated tools or AI plugins (like Anima, Builder.io, or Locofy) worth using for production code, or is writing the code manually from scratch still the industry standard for clean code?

What I Have Tried:

Manually inspecting dimensions and translating them using flex, flex-col, gap-4, and p-4 in Tailwind CSS.

Setting up CSS variables for primary colors and fonts.

Any advice, best practices, or recommended design system workflows would be greatly appreciated!