React + TypeScript Layout Designer: creating UI components from Figma for a desktop application
We are looking for a front-end developer with React + TypeScript to implement the layout of UI components based on a ready design from Figma for a desktop application.
Scope of Work
- Approximately 28 main screens (based on the ready design).
- Layout of presentation (clean UI) React components.
- Responsiveness: for standard PC/laptop screens and small laptops (MacBook 13" and similar) according to the design.
The interface should be flexible and correctly adapt when the window width changes (including sizes exceeding the design mockups).
Elements should redistribute based on available space (for example, increasing the number of cards in a row), without visual artifacts or breakages. - Clean, reusable components.
Important:
This is specifically the layout of components, not the development of the entire application. Logic, state, component integration, and other development will be handled by a separate front-end developer.
Requirements
- At least 1.5 years of development experience.
- Confident knowledge of React (functional components, hooks) + TypeScript.
- Experience in animation development.
- Experience with Tailwind CSS and Framer Motion.
- Excellent HTML skills.
- Experience working with Figma.
- Attention to detail, pixel-perfect, and clean, well-structured code.
- Proficiency in Git.
Tech Stack
- JavaScript/TypeScript
- React
- Tailwind
- Sass
- Framer Motion (for animations)
- Git
- Vite
What to Provide When Responding:
- Links to live websites you have created or examples of React component layouts from Figma.
- Briefly: experience in laying out similar projects (how many screens/components you have done).
- Willingness to complete a small paid test task.
At the selection stage, a small test task (part of a real project) is provided. The test is given to a limited number of candidates and is paid to the performer whose result is chosen.
The task is to layout a dialog window according to the mockup in Figma.
If the result meets the requirements, the work is accepted and paid for, and further cooperation may be possible.
Format - secure transaction through the freelance platform.
Conditions:
- Remote work.
- The project will be divided into stages.
- The project cost is fixed and confirmed in advance before the start of cooperation.
Additional Information
- Application description and all necessary information will be provided immediately after agreement.
- The design will be provided only after signing the NDA.
-
I will create the layout for 28 screens, clean presentation React components. Tailwind with CSS Grid auto-fill for redistributing cards across the window width, Framer Motion for animations, props are typed through interfaces. Ready for testing. Is there a minimum width for the cards in the layout, or is the number of columns fixed by breakpoints?
-
Hello! I understand that you are looking for a layout designer to create responsive UI components from Figma for a desktop application. The main challenge will be ensuring the responsiveness of the interface so that elements are properly redistributed depending on the width of the window. I suggest implementing the layout with an emphasis on a component structure, using React, TypeScript, and Tailwind CSS for speed and code cleanliness, as well as Framer Motion for animations. Regarding risks, it is important to clearly understand what animations you plan to use and what level of responsiveness you want to achieve to avoid potential visual artifacts. Additionally, I recommend discussing the details of the test task before it is completed. Let's clarify the requirements in more detail so that I can start working faster.
-
265 Good day, I am writing on behalf of the company Devoxen. We specialize in your task. We can do it without unnecessary questions and time costs. We also provide a guarantee and support if desired.
-
8589 26 0 1 Understood, you need a specialist who will carefully layout clean, reusable React + TypeScript UI components based on Figma with a focus on responsiveness and pixel-perfect, without implementing business logic. I have experience with similar work: I have done dozens of screens with Tailwind + Framer Motion, I adhere to responsive layout and correct behavior of components at any widths. I am ready to show examples and complete a paid test (dialog window) in your style. I can quickly get started and work step by step through a secure deal.
-
15075 32 0 1 Good day!
My name is Valentin, and I represent Arctic Web Agency. We are a team that specializes in creating modern and effective solutions for business. I can provide examples of our similar work in personal messages. We are ready to take your project to work!
Sincerely,
Arctic Web Team
Freelancehunt
-
310 Hello! I can carefully convert UI components from Figma to React + TypeScript so that they are clean, reusable, and correctly adapt to different desktop sizes without visual breaks. I work with Tailwind, Vite, responsive design, and a component-based approach, so I can prepare code that your frontend developer can easily integrate into the application. I am ready to complete a paid test task.
-
313 Hello!
I specialize in interface layout using React + TypeScript (2+ years), focusing on clean and reusable UI components.
I have worked on projects with similar requirements:
– responsive interfaces with "rubber" behavior (flex/grid with element redistribution)
– UI components without logic (for integration by another developer)
– pixel-perfect according to Figma
– animations using Framer Motion
…
I use: React, TS, Tailwind, Vite.
I have a good understanding of how to layout components that behave correctly on wide screens and do not break when resizing.
-
10365 30 0 3 Good day! I develop in Python, have worked on similar projects with React/Node.js, and am ready for collaboration.
-
421 Good day!
I will quickly complete your task.
I combine frontend + AI, so I save your time and provide results.
Examples of work in the portfolio.
1.5 years of experience with React.
I am ready to take on the work.
-
242 Hello!
https://smart-hubmvk.com/
https://rokka-site-v2.vercel.app/
I work with React, modern UI libraries and tools, including Tailwind CSS. I create responsive, efficient, and structured web applications and pay great attention to code quality,
Clear execution of the technical specifications and active communication.
I constantly improve my skills, am open to new technologies, and ready for interesting challenges.
I would be happy to have the opportunity to complete a new task!
-
1396 6 1 Good day, Alex!
For a more accurate assessment of the project, please clarify:
1. Are there any specific requirements for the animations that need to be considered during development?
2. Do we need to use any specific libraries or frameworks for styling, aside from those mentioned?
My approach to work:
1. I carefully study the layouts in Figma and create responsive, adaptive components that display correctly at all specified resolutions.
2. I use Tailwind CSS for styling and Framer Motion for creating smooth animations, making the interface not only functional but also pleasant for the user.
… 3. Each component will be reusable and easily integrable, as well as adhere to the principles of pixel-perfect and clean code.
Experience and work examples:
- I have developed interfaces for applications with a similar number of screens (28+ screens), including complex UI components.
I am ready to complete a test task to demonstrate my skills and approach to work. Please send the dialog window layout for assessment.
I look forward to your response to discuss the project details and start our collaboration.
-
234 Hello! I have reviewed the task, I have experience in layouting React + TypeScript components from Figma, I work with Tailwind, Framer Motion, and responsive "flexible" layouts. I have done similar tasks with a large number of screens and UI components. I am ready to complete a test task. I can send examples of my work and discuss the details.
-
309 Hello, we are a small team that has been developing turnkey web solutions for over 4 years and we have significant experience in creating presentation components for large systems using Tailwind and SASS. We will build a logical hierarchy for your 28 screens, implement strict typing in TypeScript, and ensure the correct behavior of cards and lists when the window width changes without any breaks. Our experience of over 4 years allows us to guarantee a high product culture, technical cleanliness of the Git repository, and full readiness to complete a paid test task; be sure to check our completed projects: freshagro.com.ua, farfieworldwide.com, rivnekolo.com.
-
184 Good day, my colleague and I have been professionally engaged in technical design and layout of complex desktop interfaces for over 4 years, so we will help you transform Figma layouts into a set of reliable and animated React components. We will conduct a frontend audit of your layouts to choose the optimal responsiveness strategy, configure Tailwind for supporting responsive layouts, and ensure smoothness of the interface through Framer Motion. Our experience of over 4 years is confirmed by successful cases of developing UI kits in TypeScript/Vite, where code cleanliness and redistribution of elements depending on available space were priorities. Please check our quality of work: drkukharevich.rivne.ua, crave-agency.com.ua, jk-solution.com.ua.
-
1182 13 0 3 Hello, my partner (designer + full-stack) and I have been specializing in creating high-quality interfaces using React and TypeScript for over 4 years, so we will professionally implement the layout of your 28 screens with a focus on "responsive" adaptability and Pixel Perfect. We will design the architecture of clean UI components in Figma to ensure their full reusability, implement complex animations using Framer Motion, and set up a flexible grid with Tailwind CSS for perfect display on MacBook 13" and larger monitors. Our experience of over 4 years allows us to create structured code that is easily integrated by a frontend developer, ensuring no visual artifacts when resizing the window. Check out our technical works: hyperfi.tech, espressolab.com.ua, hudi.com.ua.
-
1066 7 0 Hello!
I am interested in your project. I have experience in developing interfaces using React (functional components, hooks), and I confidently work with HTML/CSS and responsive layout.
I have worked with layouts based on Figma, paying attention to details and code cleanliness. I have basic experience with TypeScript and am actively developing in this area.
I am ready to complete a test task and demonstrate my skills in practice.
I can send examples of my work in private messages. I am open to phased work and long-term collaboration.
-
1315 2 0 28 screens and responsive design for MacBook 13" - the scope is clear. I recently developed an admin panel with 40+ screens, purely presentation components on React + Tailwind, animations on Framer Motion. Pixel-perfect from Figma and responsive without artifacts during resizing - this is my usual mode. I will attach links to live projects and examples of layouts. I am ready for a test task, I will create a dialog window according to the layout. One question: are there component states (hover, focus, disabled) in the layouts or is this discussed separately?
-
3082 9 0 Good day!
I have reviewed the technical specifications — everything is clearly outlined. The stack fully matches: React + TypeScript, Tailwind, Framer Motion, Vite, Figma — all in use.
28 screens with clean reusable components, pixel-perfect and responsive adaptability — the task is clear. I have done similar volumes of work.
I am ready for the test assignment.
Examples:
https://ai-desk.ai / https://momicro.com
GitHub: https://github.com/axbuglak
Write to me, we will discuss the details.
Sincerely, Buglak Alexey
-
475 2 0 Hello! Ready to discuss and complete your order.
-
2092 32 0 Hello!
I have reviewed the task — the work format is completely clear. I specialize in the layout of UI components in React + TypeScript based on Figma, focusing on clean architecture and reusability.
What I can guarantee:
🧩 Component approach
• isolated, reusable UI components
• clear structure (atomic / feature-based if necessary)
… • convenient integration for the developer who will connect the logic
🎯 Pixel-perfect + responsive
• exact correspondence to Figma layouts
• "rubber" layout without strict breakpoints
• correct operation on large screens and small laptops (including 13")
• redistribution of elements (grids, cards, etc.) without breaking
⚡ Stack and approach
• React (hooks) + TypeScript
• Tailwind + Sass if necessary
• Framer Motion — neat, non-overloaded animations
• Vite + Git
• clean, readable code with understandable naming
🎬 Experience
• laid out interfaces with a large number of screens (20+), including complex dashboards
• created responsive component systems with dynamic layouts
• experience working with design systems
I am ready to complete a test task (dialog window) — no problem.
Regarding timelines and costs:
I suggest breaking it down into stages (by screens or blocks), after reviewing the layouts I will be able to accurately assess the volume.
I would be happy to review the design after the NDA and discuss the details.
Thank you!
-
10123 117 0 Hello.
I am a NodeJS developer. I am ready to take on the task. Write to me, we will discuss.
-
1074 5 0 Hello!
I am ready to take on the work.
The price will be 15,000 UAH.
Write to me, I will be happy to collaborate. )
-
258 Good day! We have reviewed your project and have relevant experience. We are ready to perform high-quality layout of React components based on Figma while adhering to pixel-perfect standards and responsiveness.
What we can offer:
• Layout of UI components in React + TypeScript
• Clean architecture and reusable components
• Responsive "flexible" layout for different resolutions
• Correct interface behavior when changing width
• Animations using Framer Motion
• Tailwind / SCSS (as per project requirements)
… • Careful work with spacing, typography, and states
Experience:
• We have laid out complex interfaces (20+ screens)
• We have created desktop UI with adaptation for different window sizes
• We have worked with Figma, Git, Vite
We are ready to complete a test task and quickly get involved in the project.
Our website: https://benefit-it.net/
Sincerely, Benefit Studio
-
7575 13 0 Hello, I have the necessary experience, I will do it without problems, also answers to questions:
1) A couple of links
https://zem.center/
https://chess-217-154-170-186.nip.io/
2) Dozens of projects and hundreds of screens, I have fully developed web applications as well as created individual components with Storybook and handed them over
3) I can complete a paid test task
Just in case, my GitHub https://github.com/onyx144
-
1024 2 0 ✌️ Hello
• I am a senior developer with over 8 years of experience
👉 The task is clear — layout of UI components according to Figma for a desktop application on React + TypeScript
• If you want to save your time and nerves, I am the developer you are looking for.
👉 Recent projects: billionbahis.com, isolar.com.ua, mevis.ua, take-transfer.com
Ready to complete a test task.
I see no reason why our collaboration would not work out 🤝
-
1013 21 0 Good day! I am ready to start immediately after agreeing on the terms. I am a React developer with over 4 years of experience. I have experience in developing React (Next.js) applications of various complexity and scale, including dashboard systems. Several projects developed by me are currently in production, for example, https://good-divorce.vercel.app/ - developed using Next.js. There is also a dashboard written using Material UI, but access is restricted, so unfortunately, I cannot provide the link. I also saw in the requirements that Tailwind is needed - I have been working with it in 90% of my projects over the last 2 years. We will need to decide whether to use it or SASS, as I do not see the point in combining these technologies. I also have experience with framer-motion, a very convenient library for React applications.
I look forward to collaborating :)
-
3071 11 0 1 Hello, Alex!
I am ready to join the project as a React + TypeScript front-end developer. I have experience building UI components from Figma for desktop applications with a focus on clean architecture and responsive "rubber" layout.
Briefly about my experience:
I have developed interfaces for 20–40+ screens (dashboards, SaaS, admin panels)
I work with Tailwind, SCSS, Framer Motion (animations and micro-interactions)
Pixel-perfect, attention to detail, neat component structure
I consider interface scaling (wider than the layout, different resolutions)
…
What I do:
Clean, reusable UI components
Responsive and "rubber" layout without artifacts
Proper breakdown into components for further integration
Animations using Framer Motion
Preparation for convenient work for another front-end developer
I work with Git, Vite, and adhere to naming conventions and project structure.
I am ready to complete a paid test task.
Here you can take a look at some of my projects:
1. https://6weeks.marketing/
2. https://grandex.de/
I suggest we discuss the details and get started!
-
976 4 0 Hello
My name is Dmitry
I have reviewed the task — I am ready to get involved in the layout of UI components using React + TypeScript
I work with the following stack: React, TypeScript, Tailwind, Framer Motion, Vite. I have experience building interfaces from Figma with a focus on pixel-perfect and reusable components
How I approach the task
— I create clean functional components with a clear structure
— I consider responsiveness not only for breakpoints but for actual width changes (flex/grid, fluid layout)
— components are easily scalable and reusable
— I carefully implement animations through Framer Motion (without overload)
… I have worked on projects with 20+ screens and a large number of UI components, so I understand how to maintain consistency and not "break" the interface when scaling
Readiness
— I am ready to complete a test task
— I work through Git (clean commits, normal workflow)
— I meet deadlines and do not prolong stages
I will send examples of my work and components in private (I have real projects, not templates)
I am ready to discuss the details and get started
-
842 3 0 Good day. I am interested in your project. I work with this stack every day, here are examples of my work:
https://acacia-studio-astro-v611.vercel.app/
https://vanshare.pl/
https://delicio-ai.vercel.app/
All the websites were developed entirely by me. I am ready to complete the test task. I will be waiting for your response.
-
93816 1268 1 10 Hello. I have been working with React/Node.js for over 9 years. I am ready for collaboration.
-
673 5 0 Hello, I worked on the project "SaaS Dashboard Interface" with tag: 7748 - created 35+ UI components for a web application with responsive design for different screen sizes, including MacBook 13". I used React + TypeScript + Tailwind CSS.
How long does it usually take to create animations for dialog windows in Framer Motion, and do you plan to integrate with the existing component system?
I suggest we get in touch, I will provide you with free technical consultation and we will create a development plan + I will tell you about my team!
-
Вітаю. Ви вже вчетверте постите це завдання. І жодного закінченого проєкту.
Хотілось би все ж побачити ваш макет.
Прошу надати деталі, якщо вас цікавить виконання проєкту.Дякую за увагу.
-