Design Workflow to replicate code

Workflow for Transferring Design from Live HTML/CSS/JS Environment to Figma

[fromjaymaine]

Hello all,

I am currently working on a project where I need to replicate a live site's design (HTML/CSS/JS) into a Figma mockup and then implement that design using Oxygen Builder for WordPress.

I'm wondering if anyone here has experience with this specific workflow? If so, could you please share your process? I'm particularly interested in:

Best practices for translating a live site's design elements into Figma: Are there any tools or methods that can streamline this process?
Any potential issues or challenges I might encounter when taking the design from Figma and implementing it in Oxygen Builder?
Suggestions for ensuring that the final design in Oxygen Builder stays true to the original live site and the Figma mockup?
I understand the ethical considerations related to this and want to clarify that I have permission to replicate this design for the purposes of this project.

I appreciate any advice or guidance you can provide. Thank you in advance!

[tangor]

@fromjaymaine ... Welcome to Webmasterworld!

Personally don't use any of these tools, but I'll bet if just patient a bit and someone will chime in!

[Yolo1985]

Hello,

Replicating a live site's design into a Figma mockup and implementing it in Oxygen Builder can be a detailed process. Here are some suggestions to help streamline your workflow:

Translating Live Site Design into Figma:
Start by taking screenshots or capturing relevant sections of the live site to use as a reference in Figma.
Use Figma's design tools to recreate the layout, typography, color scheme, and other visual elements from the live site.
Pay attention to spacing, proportions, and details to ensure accuracy.

Streamlining the Process:
Figma offers plugins like Content Reel and Strokes to SVG that can help automate certain aspects of the design replication process. Explore these plugins to see if they can assist you in your project.
If available, ask for the original design files (such as PSD or Sketch) used to create the live site. This can provide a more accurate starting point for your Figma mockup.

Challenges in Implementing Figma Design in Oxygen Builder:
Keep in mind that the Figma design may not perfectly translate to Oxygen Builder due to differences in layout capabilities and available elements. Be prepared to make adjustments and compromises during the implementation process.
Oxygen Builder's documentation and community forums can be valuable resources for addressing specific challenges or issues you may encounter while implementing the design.

Maintaining Design Consistency:
Continuously refer to your Figma mockup as the source of truth during the implementation phase. Cross-reference it with the live site to ensure your design in Oxygen Builder remains faithful to the original.
Regularly check your work against the live site and make necessary adjustments to match the visual details, spacing, and overall look and feel.

Good luck with your project, and I hope these suggestions help you achieve your design replication goals. If you have any further questions, feel free to ask. Thank you!"

Thanks!<snip>

[edited by: engine at 10:03 am (utc) on Jul 10, 2023]
[edit reason] Please see Charter and WebmasterWorld TOS [/edit]