React + TypeScript Layout Designer: creating UI components from Figma for a desktop application
601 USD 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 31 main screen (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 must be flexible and correctly adapt when the window width changes (including sizes exceeding 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.
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.
Additionally
- Application description and all necessary information will be provided immediately after agreement.
- Design will be provided after the start of cooperation and only after signing an NDA.
-
461Work example:
1 day557 USD
1 day557 USD
I see the task as a quality UI layout without unnecessary logic: here, pixel-perfect, neat responsiveness, and clean reusable components are critical. I work with React + TypeScript, Tailwind, and Framer Motion, so I can assemble screens in a way that they correctly redistribute at different widths without breaks and artifacts.
At NovaCore Solutions, I manage the full cycle of SaaS/UI products and separately layout complex CRMs and desktop interfaces. I can quickly get involved in testing and provide an estimate for the entire scope after reviewing Figma.
-
20 days560 USD
20 days560 USD
Hello! I clearly see the task: it is important not just to "attach" Figma, but to assemble clean, reusable React components that hold up well at different widths and do not break when the window is resized. I work with React + TypeScript, Tailwind, and Framer Motion, so I can immediately lay down the structure, responsiveness, and smooth animations without unnecessary code. I have experience in UI layout from Figma for complex interfaces and I love pixel-perfect. I am ready to show examples and take a test.
-
12 days601 USD
12 days601 USD
Good evening.
I am ready to take on your project, entirely and completely.
I have no questions about the task, only a clarification: is everything structured in Figma, are all states, sizes, margins, assets, and animations described properly? I had an experience with a large company where there was chaos, many hidden states, modals, tables, hover/focus/empty/loading scenarios, and "it's obvious" without description.
-
14 days557 USD
14 days557 USD
I will layout 31 screens of clean React components based on Figma with responsive adaptation for PC and MacBook 13". Approach: atomic components using Tailwind with CSS Grid for dynamic redistribution of cards, typing through TypeScript interfaces for props, animations using Framer Motion variants for reuse without code duplication. Question: is there a unified Design System in the design with color and typography tokens, or is each screen laid out independently?
-
5 days601 USD
5 days601 USD
After studying your project, I understand that the task requires the layout of UI components based on ready-made designs from Figma for a desktop application. The main objective here is to create adaptive and reusable components that correctly redistribute when the window width changes. This may require attention to detail, especially when working with different screen sizes. As for the technical implementation, I suggest using functional React components with hooks and incorporating animations through Framer Motion to ensure a smooth interface. Considering the volume of 31 screens, the lifting risk lies in the need to carefully monitor responsiveness and cross-browser compatibility to avoid visual artifacts. I would like to clarify if there are specific requirements for animations or transitions between screens? Also, is there a possibility to access the designs for a more accurate assessment of complexity? According to my estimates, the project cost will be 30,000 hryvnias, with a completion time of 5 days. This amount takes into account the complexity of the work, the possibility of integration, and adaptation. The actual cost will be higher than 27,000 hryvnias, as this is the technical limit of the platform. I am ready to start working on a test task to demonstrate the quality of my work.
-
1 day601 USD
262 1 day601 USD
The scope looks significantly larger than the budget. Approximately this is 120+ hours of work. I can offer staged payment or review the budget after the first stage.
-
15 days601 USD
3025 37 0 1 15 days601 USD
Hello. I will give a discount for work with React. I mainly work with Angular. But I am currently studying React. Everything mentioned above is familiar; I work with it every day except for React. I will layout all components. We will discuss the price in private messages.
https://mallorcab.com/en/home/
-
23 days601 USD
4429 80 1 4 23 days601 USD
Trust a professional with over 10 years of experience! The rates and deadlines are current! I will be happy to cooperate! Experience in commercial development of online stores on CMS, business portals, and corporate websites - 11 years! +CMS: WordPress (+Woocommerce) PrestaShop/Opencart/Joomla/Bitrix/MODX/DLE/Shopify php/html/css/js/Mysql, PhotoShop/Figma Examples of work (from scratch, turnkey): https://amari.net.ua/ https://heypretty.gr/ https://thaibalispa.pl/ https://wildandorganic.com/ https://cryptosignals.org/ https://ecnbot.com https://locs-ua.com/ https://www.grower.com.ua/ https://www.alternativemedicine.com.ua/ https://silkkiss.ua/ https://v12coffee.com.ua/ https://smrtalgo.com/ https://sengero.no/ https://beautybysim.no/ https://sonatagalleri.com/ https://www.solmy-realestate.com/ https://www.emmanuel.com.ua/ https://www.onsitecomputersinc.com/ https://express-tehbud.com/ https://korostenporcelain.com.ua/ https://sladok.com.ua/ https://pricemds.com/ https://picupmedia.com/ https://www.serasar.com/
-
7 days557 USD
1090 11 1 7 days557 USD
Hello! I am a developer with experience in React and TypeScript, ready to take on the layout of UI components for your desktop application. I am confident that I can create a responsive and pixel-perfect design according to the Figma layouts. I am ready to complete a test task and provide examples of my work with React components. Let's discuss the details!
-
45 days560 USD
136 1 0 45 days560 USD
Hello!
I have over 5 years of experience in frontend development, working with React + TypeScript, Tailwind, and component architecture. I have experience in layout design for dozens of screens with a focus on pixel-perfect, responsiveness, and reusability of components.
I understand the task: clean UI components without logic, with correct "rubber" behavior of the interface for different screen sizes.
💼 I will send project examples in private messages.
📊 Experience:
… I have worked on projects with 20–50+ screens, building design systems and UI libraries for further integration.
💰 Estimate:
Approximately 500–700 USD for the entire volume (I will clarify after reviewing the layouts)
I am ready to work in stages.
-
1 day561 USD
265 1 day561 USD
Good day!
I have 3+ years of experience in frontend development using React + TypeScript, UI component layout according to Figma, working with Tailwind CSS, Sass, Framer Motion, Vite, and Git.
I can create layouts for clean presentation components based on ready designs: responsive for desktop and small laptops, flexible interface behavior, reusable components, neat code structure, and pixel-perfect according to the layouts.
I suggest discussing the details, as well as the cost and deadlines in private messages.
-
123 days559 USD
446 1 0 123 days559 USD
Good day, I have experience. Here is the latest website, also in the portfolio + github
Anular/React/Next
Backend: Asp.net, axum, nest
https://avero-doors.com.ua/
-
29 days601 USD
15075 32 0 1 29 days601 USD
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
-
1 day557 USD
298 1 day557 USD
Alex, good afternoon!
Can we clarify regarding the desired start date and deadlines? And is this hourly payment or fixed price?
-
14 days560 USD
307 1 0 14 days560 USD
Hello!
I am interested in your offer — I specialize in UI component layout on React + TypeScript with a focus on clean architecture and reusability.
A little about me:
— Over 1.5 years of commercial experience in frontend development
— Confidently work with React (hooks), TypeScript
— Have practical experience with Tailwind CSS and animations through Framer Motion
— Excellent command of HTML/CSS, adhere to pixel-perfect and pay close attention to details
— Regularly work with Figma (including complex design systems)
— Use Git in daily work
… I also work with a broader stack:
Next.js, React, Node.js, Express, PostgreSQL, MongoDB — this helps to better understand architecture and write more universal and scalable components.
Regarding similar tasks:
— I have done layout of UI components and pages (20–40+ screens within projects)
— Worked with responsive and "flexible" layouts for various resolutions
— Built component systems with scalability in mind
Portfolio:
https://www.7flows.studio/uk#portfolio
I am ready:
— To evaluate the project after receiving details
— To complete a test task
— To work in stages within your process
I would be happy to discuss the details and project evaluation after reviewing the technical specifications.
Thank you!
-
5 days557 USD
346 5 days557 USD
Good day! I am ready to take on the layout of UI components for your application.
Briefly about my experience:
Stack: React/Next/TS/Tailwind/Framer Motion/Vite.
I have worked on projects with 30-50 screens with full responsiveness for desktop.
Examples of responsiveness - https://rentlem.com/
…
Cost: starting from $25,000 for the entire project.
Test task: I am ready to complete it.
NDA: no problem.
Please write to me privately to familiarize yourself with the project description.
-
7 days556 USD
1872 9 0 7 days556 USD
Good day! The project is clear. 31 screens from Figma, clean presentation layout of components in React + TypeScript + Tailwind, Framer Motion for animations, pixel-perfect, responsive adaptability without breaking on resize. We do not touch the logic and state, only the UI components. I propose the following format. The main performer on our side is a front-end developer, with whom I have worked for a long time, specializing specifically in React layout from Figma. Tailwind and Framer Motion are his daily stack; he has done complex animations with orchestration, variants, layout animations, and gesture interactions. Pixel-perfect by default, without reminders. I am in the team as a coordinator and insurer. I am a full-stack developer in React + TypeScript, so if the front-end developer has questions about the structure of components from the perspective of future integration (props, composition pattern, forwardRef, how to best break down into atomic/molecule, where to keep styles so they do not interfere with your front-end developer connecting logic) — we solve it on the spot, without bothering you. This is a common problem in such projects: the front-end developer makes it look nice, but then the front-end developer rewrites half of it because the structure of the components is inconvenient for state management. We will not have this. Regarding your points: Responsive adaptability with card redistribution — this is through CSS Grid with auto-fit/minmax plus container queries where needed, not through media breakpoints. This way, the grid truly adapts to any width without artifacts, even beyond the design layouts. A classic mistake is to do everything with flex and fixed breakpoints, and then at 1600+px gaps appear. Framer Motion — we use LazyMotion to avoid pulling the entire bundle, AnimatePresence for transitions, layout animations where appropriate according to the design. All animations are written so that they can be turned off via prefers-reduced-motion — this is a small detail, but it shows the level. Cleanliness of components — each component is self-sufficient, styles through Tailwind + cva (class-variance-authority) for variants, prop types are extracted, nothing extra in the DOM. The front-end developer who picks it up will be able to add logic without rewriting the markup. Regarding the test. We are ready to perform. If possible — let’s do 1-2 screens of medium complexity with animations, so you can see both the layout and motion right away. This shows the level better than a simple card. Regarding terms and cost — after the NDA and reviewing the layouts, I will provide an exact estimate. Approximately 31 screens with animations and responsive adaptability — this is up to 7 days of work (to speed up the work, I can call in a team). Breaking it down into stages — okay, we often work this way, it’s convenient for everyone.
-
14 days601 USD
976 4 0 14 days601 USD
Good evening
My name is Dmitry, I represent the company King Kong Lab
I am ready to join the project as a React + TypeScript developer and complete the task on UI components without interfering with the business logic
Experience
I have done interface layouts in React (20–50+ screens)
I work with a component-based approach (reusable UI)
Pixel-perfect according to Figma
Adaptive "rubber" interfaces for different screen sizes
Stack
… React (hooks) + TypeScript
Tailwind / SCSS
Framer Motion (animations)
Vite
Git
How I work
I create clean, isolated components
I adhere to the project structure for easy integration later
I consider interface behavior when changing width (not just adaptive, but responsive layout)
Minimum revisions after submission
By volume
31 screens — I understand the scale, I do it through a component system to speed up development
By deadlines
2–4 weeks
I am ready to complete a test task
I will send examples of my work in private (React UI + layout according to Figma)
I look forward to collaborating
-
1 day560 USD
11616 44 0 1 day560 USD
Hello, I have relevant development experience. I am ready to sign an NDA. Please write to me privately. I will be happy to help you!
-
10 days560 USD
309 10 days560 USD
Greetings! We are a small team that has been engaged in web development and creating scalable UI systems for over 4 years, and we are ready to complete the layout of 31 screens for your project "turnkey." We will implement a quality component structure on Vite, ensure strict typing in TypeScript, and set up a flexible grid on Tailwind CSS that will correctly redistribute content. Our experience of over 4 years allows us to guarantee a high technical culture of code, cleanliness of SASS styles, and smooth animations, which are essential for premium desktop software. Please check examples of our work: freshagro.com.ua, farfieworldwide.com, rivnekolo.com. Experience: 4 years in creating design systems and component libraries. Cost: ~$1500 (fixed), ready to discuss details in private messages. Test task: No problem, ready to start.
-
14 days560 USD
184 14 days560 USD
Good day! My colleague and I have been professionally engaged in technical design and frontend development using the React/TS/Tailwind stack for over 4 years, so we will help you prepare a quality UI base for your application. We will conduct a frontend audit of your layouts in Figma, create a system of reusable components that support various resolutions (from 13" MacBook to wide monitors), and implement interactive elements through Framer Motion. We will ensure the technical perfection of the layout execution without visual artifacts when resizing the window; our experience is confirmed by successful cases: drkukharevich.rivne.ua, crave-agency.com.ua, jk-solution.com.ua.
-
12 days534 USD
1182 13 0 3 12 days534 USD
Hello! My partner (designer + full-stack) and I have been specializing in high-quality interface layout on React and TypeScript for over 4 years, so we will professionally implement a UI kit for your desktop application. We will develop the architecture of components in Figma before coding to ensure perfect "responsive" adaptability and pixel-perfect compliance with the layouts, using Tailwind CSS for styling and Framer Motion for smooth animations. Our experience of over 4 years allows us to create clean, typed components that easily integrate into the main project; take a look at our work in terms of technical accuracy and aesthetics: hyperfi.tech, espressolab.com.ua, hudi.com.ua. Experience: 4+ years, implemented projects with 50+ unique screens with deep typing of components. Cost: Approximately $1200–1800 for the entire scope (I will clarify after reviewing the description). Test task: Ready to complete in the shortest possible time.
-
14 days568 USD
312 1 0 14 days568 USD
Hello, I will complete the work with high quality, I am proficient in the specified stack, you can see an example in my portfolio. Please send the link to Figma, I will assess the volume and tell you about the price and deadlines.
-
15 days560 USD
328 15 days560 USD
I will easily do everything, I have experience with React, Tailwind CSS, Figma, and also with various libraries.
-
7 days557 USD
246 7 days557 USD
Good day!
I am interested in your project — layout of UI components from Figma for a desktop application.
A brief about myself:
— 10 years of experience in frontend development
— Confidently work with React + TypeScript, Tailwind CSS, Framer Motion, Vite, Git
— Have done the layout of reusable components from Figma, including pixel-perfect, responsiveness, and animations
— Understand the difference between UI component layout and full development — ready to work in tandem with a developer via Git
…
In terms of volume: I have worked on projects with 30+ screens, created 100+ components per project.
Regarding cost: I am ready to discuss after reviewing the application description.
I am ready to complete a test task. Message me privately — we will discuss the details.
-
30 days601 USD
93799 1268 1 10 30 days601 USD
Hello. I have been working with React/Node.js for over 9 years. I am ready for collaboration.
-
14 days601 USD
274 14 days601 USD
Hello, I will complete everything quickly and efficiently, feel free to contact me, I will be happy to help.
-
5 days579 USD
7575 13 0 5 days579 USD
Hello, I have a very large experience in React and I am confident that I will complete your task at the highest level, an example from my recent work https://zem.center/
-
7 days560 USD
558 3 0 7 days560 USD
Hello! Ready to take on the work. Portfolio here - https://mcarrow.online.
Sincerely, Sergey
-
10 days557 USD
1994 14 1 10 days557 USD
Hello 😊
I am immediately attaching a code example
https://github.com/Orangeeeeeeeee/template.toka.energy
I suggest we move to private messages 📩 and discuss the details 💬
I will do everything quickly ⚡️ and efficiently ✅
I am also attaching a few of my works 💼:
… 🌐 https://www.slaters.co.uk/
🌊 https://www.salt-watersandals.eu/
-
15 days560 USD
10123 117 0 15 days560 USD
Hello.
I am a NodeJS developer. I have experience with React. I am ready to take on the project. Write to me, we will discuss.
-
7 days557 USD
488 4 1 7 days557 USD
Good day
I am interested in the project
I am ready to do the layout as quickly and qualitatively as possible
I am a Front-end developer with 6 years of experience and I am familiar with React and layout
I am ready to do a test task
Feel free to contact me and let's discuss the project
-
10 days560 USD
5032 47 0 10 days560 USD
Hello, I am interested in the project and would like to discuss in more detail about the price, deadlines, and work. I can easily work in tandem with another developer through git. I have strong practical knowledge of your stack that is needed for the job. I will be waiting for your response and please also send the layout, I am interested to see and analyze the volume, thank you!
-
7 days560 USD
573 5 0 7 days560 USD
Hello, I worked on a project with "Folder" with "tag:7748" - developing React components with TypeScript for a desktop application with 40+ screens, where I created over 150 reusable UI components from Figma designs with pixel-perfect layout and responsiveness.
Is there a plan to use an existing design system in the project, or will components be created from scratch based on the layouts?
I suggest getting in touch, I will provide you with free technical consultation and we will create a development plan + I will tell you about my team! ⚡
-
Предоставьте дизайн (можно часть) для ознакомления.
Бюджет окончательный за 31 екран???
-
Current freelance projects in the category HTML & CSS
Error correction, conversion optimization, and UX improvement in a Shopify storeAn experienced Shopify developer is required to address the following tasks: 1. Fixing critical JavaScript errors (priority) In several user sessions, errors are recorded when adding products to the cart, which prevent order completion. Errors are reproduced on different… HTML & CSS, Java ∙ 3 hours 25 minutes back ∙ 13 proposals |
SCSS HTML JS FIGMA Layout
22 USD
Need a layout of the template from Figma without dev mode. Well-structured SCSS, responsive at your discretion, everything by sections. If you use Claude code, that's a big plus. It needs to be done by yesterday. Please specify the price. Need to start today and finish as soon… HTML & CSS ∙ 7 hours 1 minute back ∙ 62 proposals |
WordPress website online store
445 USD
A good website is needed (on WordPress) for an online store (selling CBD products in the USA).The category is competitive, with many photos/many products, it needs to be original. There is some kind of technical specification. Later, it will need to be promoted on social media… HTML & CSS ∙ 7 hours 56 minutes back ∙ 43 proposals |
Fix the CSS/DOM layout of cards in the Chrome extension for localizing D&D BeyondThere is a Chrome extension Manifest V3 that localizes the D&D Beyond website into Ukrainian. The project is written in TypeScript + WXT. The extension works through a content script: it finds English text on D&D Beyond pages and replaces it with the Ukrainian translation. The… HTML & CSS, Javascript and Typescript ∙ 15 hours 58 minutes back ∙ 35 proposals |
I am looking for a person who can help fill the advertising agency website on WordPress.I created the pages in the cloud and now I have done everything on WordPress. I am looking for someone who can help fill the website with content. Quickly and efficiently, certain photos will probably need to be generated in GPT. I will try to help. There are about 15 pages. AI Content Creation, HTML & CSS ∙ 2 days 3 hours back ∙ 40 proposals |