
Design an order-flow in Figma that uses Chakra UI & React Icons
- or -
Post a project like this£80(approx. $109)
- Posted:
- Proposals: 7
- Remote
- #3844816
- Expired
Advanced AI & Custom Development | Built Platforms, Python & Plugins |Laravel & ReactJS | Bespoke Development

UI/ UX Designer | Product & Brand Designer | Graphic Designer | WordPress Developer | Webflow & Framer | Digital Marketer | Google & Meta Ads

Top-Rated Video Editor | Graphic Designer | Motion Graphics Expert | Adobe Premiere Pro & After Effects Specialist

UI / UX designer | FIGMA | CANVA | WEBFLOW | FRONTEND DEVELOPER | SOCIAL MEDIA | DATA ENTRY | VIRTUAL ASSISTANT
3306174799404335073528146356866163988855144360553
Description
Experience Level: Expert
Estimated project duration: less than 1 week
Hi,
I am looking for a website designer to design a customer order flow, I will personally be developing this using Chakra UI and it's components along with React Icons.
Please use as many components as possible from Chakra UI, their Figma design kit can be found here:
https://www.figma.com/community/file/971408767069651759
I also would like to ask that any icons used should be sourced from React Icons so they're easy to integrate in my React project.
Link to plugin for importing react icons to Figma: https://www.figma.com/community/plugin/921172243620367846/Import-React-Icons
The required design needs to be a light theme, with standardised colour pallete that can easily have a dark theme alternative created.
The Figma design should make use of REM and EM values where they should be used in best practice for example REM for font-sizes EM for padding, though if you do not understand thoroughly the use of EM/REM units and their use cases please do not submit for the job.
I will require an "Add to cart flow" that I expect to include a 2 column layout the main section on the left and the cart "drawer" on the right hand side.
The 1st section will have multiple steps the first being Product Selection
The 2nd being Product Extras
The 3rd being a repeater field for information
The cart draw should include a heading, a section for the listed cart item, a sub total, a delivery charge, and a total. There should be an order button at the very bottom.
Each cart item should include a picture, a product title, the added product extras and then the repeater field information, there should be an "Edit/Update" Button and a remove from cart button for each cart item.
The footer of the main section should have a next button, and a back button.
There will be 6 products to choose from on the 1st screen.
The 2nd screen will change depending on product chosen.
The 3rd screen should remain the same regardless of whatever products are chosen.
An example of a React order flow: https://budget.tjeffordlandscaping.co.uk/
I do not need a design for the checkout page purely the screens for product selection and the cart drawer.
The selected freelancer on completion of up to standard work will be asked to design other areas of the website and potentially more work going forward.
I am looking for a website designer to design a customer order flow, I will personally be developing this using Chakra UI and it's components along with React Icons.
Please use as many components as possible from Chakra UI, their Figma design kit can be found here:
https://www.figma.com/community/file/971408767069651759
I also would like to ask that any icons used should be sourced from React Icons so they're easy to integrate in my React project.
Link to plugin for importing react icons to Figma: https://www.figma.com/community/plugin/921172243620367846/Import-React-Icons
The required design needs to be a light theme, with standardised colour pallete that can easily have a dark theme alternative created.
The Figma design should make use of REM and EM values where they should be used in best practice for example REM for font-sizes EM for padding, though if you do not understand thoroughly the use of EM/REM units and their use cases please do not submit for the job.
I will require an "Add to cart flow" that I expect to include a 2 column layout the main section on the left and the cart "drawer" on the right hand side.
The 1st section will have multiple steps the first being Product Selection
The 2nd being Product Extras
The 3rd being a repeater field for information
The cart draw should include a heading, a section for the listed cart item, a sub total, a delivery charge, and a total. There should be an order button at the very bottom.
Each cart item should include a picture, a product title, the added product extras and then the repeater field information, there should be an "Edit/Update" Button and a remove from cart button for each cart item.
The footer of the main section should have a next button, and a back button.
There will be 6 products to choose from on the 1st screen.
The 2nd screen will change depending on product chosen.
The 3rd screen should remain the same regardless of whatever products are chosen.
An example of a React order flow: https://budget.tjeffordlandscaping.co.uk/
I do not need a design for the checkout page purely the screens for product selection and the cart drawer.
The selected freelancer on completion of up to standard work will be asked to design other areas of the website and potentially more work going forward.
Daniel V.
99% (17)Projects Completed
24
Freelancers worked with
18
Projects awarded
40%
Last project
3 May 2026
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies