I have questions for Frontend developers

[mini0192]

Select Topic Area

Question

Body

Hi everyone
i have questions for Front end programmers

How do you usually develop ui?
How do you usually communicate with designers?

[Shashankdotio]

Most of the times, I first look at the design in Figma or whatever the designer shares. I break it into small components like buttons, cards, sections etc. and then start building the layout first.
If something in design is not clear or not practical in code, I just ask the and we adjust it a bit. As a freelancer it’s usually pretty direct and informal.

[mzulqarnainch]

Hi there greate

[MHassan-Tariq]

To "rise" in the GitHub community with this discussion, it’s best to frame it around the modern handoff and development cycle of 2026, where the lines between design and code (like "Design-to-Code" AI tools) are blurring.

Here is a high-quality, professional draft for your GitHub Discussion:

Title: Beyond the Handoff: Modern UI Development and Designer Collaboration in 2026
GitHub Feature Area: UI/UX
Body:
Hello fellow frontend developers,

As the ecosystem shifts toward more automated design-to-code workflows and AI-assisted UI generation, I’m interested in how your day-to-day collaboration with designers has evolved. Whether you are building with React/Next.js, Vue, or Svelte, the "handoff" is no longer a single event but a continuous loop.

I’d love to hear your insights on two specific areas:

1. The Development Workflow
   Component-Driven Development: Are you still starting with atomic components in Storybook, or are you moving directly to layout composition using utility-first frameworks like Tailwind CSS or Shadcn UI?

AI Integration: How are you using GitHub Copilot or v0 to interpret design tokens? Do you find it more efficient to have AI generate the initial structure from a screenshot, or do you prefer hand-coding for better accessibility/semantic HTML?

2. Communication & Handoff
   The Tools: Beyond Figma, are you using Figma-to-Code plugins or Design Tokens (W3C standard) to keep your CSS variables in sync with the design system automatically?

The "Grey Area": How do you handle animations (like GSAP or Framer Motion) that are often hard to capture in static designs? Do you pair-program with designers, or do you use a "motion spec" tool?

GitHub for Design: Does your design team participate in GitHub Discussions or Pull Request reviews to verify UI accuracy, or do you keep feedback strictly in design tools?

What I'm currently doing:
I personally focus on a MERN stack workflow where I use Shadcn UI for speed, but I often find the biggest friction point is "pixel-perfect" implementation versus "functional-perfect" responsiveness.

Looking forward to hearing about the tools and "soft skills" that make your frontend life easier!

[Stewie-pixel]

Bro you really copy paste the whole thing from chatgpt?

[rohanvanvi]

How I Usually Develop UI and Work With Designers

Hi! Front-end developer here 👋

My UI development workflow usually looks like this:

1. Understanding the Design
First I review the design files (usually from tools like Figma). I try to understand:

• Layout structure
• Spacing system
• Typography
• Color tokens
• Component states (hover, active, disabled)

If something is unclear, I ask the designer early before coding.

2. Breaking the UI Into Components
Instead of building a page directly, I split the UI into reusable components such as:

• Buttons
• Cards
• Navigation
• Forms
• Modals

This makes the UI scalable and easier to maintain.

3. Design System / Tokens
I usually extract design tokens like:

• colors
• spacing
• typography
• border radius

Then I map them into CSS variables or a system like Tailwind config. This keeps the UI consistent across the project.

4. Implementing Responsiveness
I implement responsive layouts early using:

• Flexbox / Grid
• breakpoints
• container constraints

I test across different screen sizes while developing.

5. Communication With Designers
My communication with designers is usually through:

• Figma comments for specific UI issues
• Slack / Discord / GitHub discussions for decisions
• Design review meetings when needed

Typical questions I ask designers:

• What should happen on hover / focus?
• How should this behave on mobile?
• Is this component reusable in other places?

6. Iteration
UI rarely ships perfectly on the first pass. Usually it goes through:

• Designer review
• Small adjustments
• Accessibility checks
• Final polish

---

In short:
Design → Component breakdown → Design tokens → Implementation → Feedback → Iteration

This process helps keep the UI consistent and collaboration smooth.

Curious to hear how other front-end developers approach this as well!

[Stewie-pixel]

The first most important thing is to visualize your idea in figma mate. You sketch the design using buttons, shapes and patterns and more. You can also test the UX on figma to improve user experience then only need to code the visual.

For the second question, its always better to talk directly to your co-dev on zoom or microsoft team (i personally use this) about the idea first. You guys work on each branch in vscode and make pull req on github with at least 2 people to review the code.

Thats it, hope it helps you mate. Have a good one

[SuyashT0911]

Ok, so I will answer both of your questions shortly and sweetly,

1. How do you usually develop UI?
   I usually start by understanding the requirements and design mockups, practising the structure, or, you can say, the skeleton of the project in Figma, then building the UI using HTML, CSS, and JavaScript (or a framework if needed). I focus on responsive design, reusable components, and testing the interface across different devices and browsers.

2. How do you communicate with designers?
   I usually communicate through design tools like Figma or shared documentation, discussing layouts, spacing, and interactions. If something is unclear or not technically feasible, I discuss it early to find a practical solution together.

At least that's how I do it, and it helps.

[Ronit049]

Select Topic Area

Question

Body

Hi everyone i have questions for Front end programmers

How do you usually develop ui? How do you usually communicate with designers?

I typically start by reviewing the design specifications (Figma, mockups, or design system guidelines) to understand layout, spacing, typography, and component behavior. Then I break the UI into reusable components and build them step-by-step. I focus on responsiveness, accessibility, and keeping the code clean and maintainable. I also test the UI across different screen sizes and browsers to ensure consistency.

How I communicate with designers:
Communication usually happens through tools like Figma comments, Slack, or project management tools. If something in the design is unclear (spacing, states, responsiveness, interactions), I ask early before implementing it. I also share previews or screenshots of the implemented UI so designers can review and suggest adjustments. Regular feedback loops help ensure the final product matches the intended design.

Overall, clear documentation, quick feedback, and collaboration between developers and designers make the UI development process much smoother.

[enrlzzz]

I generally use CSS and JS quite a bit, it's a good combination, but Tailwand is full of great features, and I also use LinkedIn for conversations.

[Wishwas-Meghawal]

1. Understand the requirements

First I understand:

what the feature should do

user flow

business requirements

responsive behavior (mobile / tablet / desktop)

Usually this comes from:

product manager

designer

task in Jira / Trello / GitHub

2. Check the design

Designs usually come from tools like:

Figma

Adobe XD

Sketch

From the design I check:

spacing

colors

typography

responsive layouts

components

[mikailamin-master]

I usually build UI by turning design mockups into code with HTML, CSS, and JS frameworks like React. For designers, I use Figma comments, Zeplin, or chat to clarify spacing, colors, and animations, making sure the design works well in the app.

[Gyan987]

Developing UI

• Start from the design tool: Most developers begin with Figma, Sketch, or Adobe XD files. They study the layout and break it down into reusable components (buttons, cards, modals, navigation bars).
• Component-driven approach: Frameworks like React, Vue, or Angular encourage building small, isolated pieces first, then assembling them into full pages.
• Responsive design early: Developers often set up grids, flexbox, or CSS frameworks (Tailwind, Bootstrap) to ensure the UI adapts across devices.
• Iterative building: Instead of coding the entire page at once, they implement sections step by step, testing interactions and accessibility as they go.
  Communicating with Designers
• Shared tools: Figma comments, Slack channels, or Jira tickets are common ways to ask questions directly on the design.
• Clarifying feasibility: If something looks great in design but is tricky in code (e.g., complex animations, pixel-perfect spacing), developers discuss trade-offs and suggest alternatives.
• Design systems: Many teams rely on a design system or style guide. This reduces back-and-forth since both designers and developers work with the same set of rules.
• Regular syncs: Short meetings or async updates help catch misunderstandings early before too much code or design work is done.

[muh4mmedh]

We build reusable components (like buttons or navbars) using a "Component-Driven" approach.

Tools: React, Vue, or Next.js.

Styling: Tailwind CSS or CSS Modules.

Process: We break a design into small parts, code them individually, and then assemble them into a full page.

2. How do we communicate?

We use Figma as our shared "source of truth."

Designers build the visuals and layouts.

Developers use Figma's "Dev Mode" to inspect exact colors, spacing, and fonts.

Syncs: we talk early (before coding starts) to make sure the design is actually possible to build within the deadline.

[HiruthikN]

Hi,

UI development usually depends on the project and the team workflow, but most front-end developers follow a similar process.

For UI development, we typically start with the design files provided by designers (often from tools like Figma, Adobe XD, or Sketch). From there, we break the design into reusable components and implement them using HTML, CSS, and JavaScript frameworks such as React, Vue, or Angular. Many developers also use component-based design systems, CSS frameworks, or UI libraries to maintain consistency and speed up development.

Communication with designers is very important. Usually, we collaborate through design tools where developers can inspect spacing, colors, and typography directly from the design file. We also discuss edge cases, responsive behavior, animations, and user interactions. Communication often happens through tools like Slack, Jira, or project meetings where both developers and designers clarify requirements and review feedback.

Regular feedback loops, design reviews, and shared style guides help ensure that the final UI matches the design while remaining technically feasible and maintainable.

[shivrajcodez]

For most frontend work, the UI development process usually follows a few steps.

1. Start from the design system or mockups
   Developers typically work from designs created in tools like Figma or Adobe XD. The layout, spacing, colors, and components are taken from those designs and translated into code using HTML/CSS and a framework like React or Vue.js.

2. Build reusable components
   Instead of coding every page separately, most teams create reusable UI components (buttons, cards, forms, modals). This keeps the interface consistent and makes future development faster.

3. Communication with designers
   Communication usually happens through design tools and issue trackers. Developers review the design files, leave comments, ask about edge cases (responsive behavior, hover states, loading states), and clarify anything that isn't obvious from the mockups.

4. Feedback loop
   After implementing the UI, developers often share a preview build so designers can check spacing, responsiveness, and interactions. Small adjustments are common during this stage.

In practice, the best workflow is when designers and developers collaborate early so that the UI is both visually correct and technically practical to implement.

[arveyy]

For UI development, I usually start by breaking down the design into components—buttons, forms, cards, etc.—and then build them in a modular way so they’re reusable. I often use frameworks like React, Vue, or plain HTML/CSS depending on the project. For styling, I rely on CSS modules, Tailwind, or styled-components to keep things organized.

When working with designers, communication is key. I review design mockups carefully, ask for clarifications on spacing, colors, and interactions, and use tools like Figma, Zeplin, or design handoff plugins to make sure the implementation matches their vision. Frequent check-ins and sharing progress early helps avoid surprises.

[fardinshaikh21]

Hi mini0192

As a front-end developer, I usually start by reviewing the design files provided by the design team (mostly in tools like Figma). I break the UI into small reusable components and then implement them using HTML, CSS, and JavaScript or a framework like React/Vue/Angular. I also make sure the UI is responsive and works well across different screen sizes and browsers.

For communication with designers, we typically collaborate through tools like Figma where I can inspect spacing, colors, typography, and download assets. If something is unclear (for example interactions, responsive behavior, or edge cases), I usually ask questions directly in the design comments or discuss it with the designer through Slack or meetings.

Good communication between developers and designers helps ensure the final UI matches the design and provides a good user experience.