Transforming my Figma design into responsive HTML and CSS - challenges with layout and button styles

Other Questions Figma
1

I’m in the process of translating my Figma design into code, but I’m facing quite a few challenges.

As a beginner in web development, I aim to create a responsive landing page according to my mockup. While the image placement seems fine, I’m struggling with:

  • Positioning text elements accurately
  • Customizing button colors and sizes appropriately
  • Ensuring responsiveness across various screen sizes

HTML Markup:

<!DOCTYPE html>
<html>
<head>
    <title>Launching Soon</title>
    <link rel="stylesheet" href="stylesheets/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="logo">
        <img src="Transparent%20Logo.png" alt="Logo">
    </div>
    <div id="logo-text">
        <h1>Split Shield</h1>
    </div>
    <div id="slogan">
        <p>Next-gen internet security coming soon...</p>
    </div>
    <div id="content-button">
        <button>Explore our concept</button>
    </div>
</body>
</html>

CSS Styles:

body {
    background-color: #2F2F41;
}

#logo img {
    max-width: 31.2%;
    margin-left: 8.6%;
}

#logo-text h1 {
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-weight: bold;
    font-size: 64px;
}

#slogan p {
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-weight: normal;
    font-size: 32px;
}

#content-button button {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background-color: #FFCC00;
    font-size: 24px;
    padding: 10px 20px;
}

What approaches can I implement to ensure my design layout is accurately reflected and to adjust my button styles effectively?

2

your css is too basic for what ur going for. ditch the ids and switch to container divs with flexbox instead. that button looks bland - throw in some box-shadow and transitions to make it stand out. and those font sizes won’t work on mobile. use vw units or calc() to make them responsive.

3

Your positioning problems come from messy layout structure. Wrap your content in containers and use CSS Grid or Flexbox - you’ll get way better control. Your buttons need border-radius and border properties to look polished. Don’t forget hover states either. Big issue: you’re using pixels for fonts, which breaks accessibility. Switch to rem units and set up a proper typography scale. For responsive design, go mobile-first with your CSS, then add media queries as you scale up. That margin-left percentage on your logo will mess up alignment across different screens. Use margin auto or flexbox centering instead.

4

for real! using classes instead of ids is key. and flexbox? lifesaver for layouts! also don’t forget rems for fonts - super easy for rescaling on different screens. media queries are a must-have to make it all responsive too!

5

You’re manually coding when you should automate the whole Figma-to-code process. Been there - wasted hours tweaking CSS when I could’ve automated everything.

Skip hand-coding. Build an automated pipeline that pulls Figma assets, generates responsive CSS, and handles positioning automatically. Pull design tokens straight from Figma API, run them through automated rules, and get clean HTML/CSS that matches your mockup.

For button styling? Automate color extraction and use dynamic CSS variables. Text positioning? Use automated layout calculations instead of guessing margins.

I built something similar for our team’s design system. Takes Figma designs and spits out production-ready responsive code in minutes. Handles media queries, font scaling, and cross-browser compatibility automatically.

Responsiveness issues vanish when you automate breakpoint generation based on your Figma frames. No more guessing what works on different screens.

Latenode makes this workflow automation pretty straightforward. Connect Figma API to your code pipeline without complex backend logic.

6

Your problem is absolute positioning without proper layout flow. Stop using percentage margins and separate divs for everything. Use semantic HTML and let the document flow naturally. Wrap everything in a main container with max-width and center it. Your buttons are missing basic stuff - add border: none, border-radius, and cursor: pointer. That yellow background probably fails accessibility tests. Try white text and check the contrast. Don’t forget transition properties for smooth hovers. Your fixed font sizes will break on mobile. Use clamp() functions or viewport units instead. Start with 320px breakpoints and scale up. That 31.2% logo width is going to cause headaches - switch to CSS Grid or flexible units for better viewport control.