DawnM

Project 1:

Figma NavBar & Footer - With Dev Tools

For the first project working with Figma designs, we were tasked with recreating a website's navigation bar and footer. What made this project particularly efficient was having access to Figma's developer tools. This meant I could pull CSS values directly from the design, saving me a significant amount of time and ensuring pixel-perfect accuracy. When creating my own projects, I often get bogged down in the design of graphic assets, and being able to focus on the code with layout and assets provided was a lot more enjoyable than expected.

• HTML Structure:
  • I began by structuring the HTML semantically, using elements like <header>, <nav>, <main>, and <footer> to maintain clarity and accessibility.
  • Then, I meticulously crafted the CSS to match the Figma design, utilising flexbox for a responsive and adaptable layout.
  • I paid close attention to detail, especially in the footer, which had a complex layout with multiple sections and responsive elements.
• Working with Dev Tools:
  • Working with Figma's developer tools was an absolute pleasure. The ability to extract CSS values directly from the design significantly streamlined my workflow.
  • I could focus more on the code's structure and functionality, knowing the visual details were accurately represented.
  • The detailed visual layout provided a clear roadmap, allowing me to focus on translating the design into clean and efficient code.
  • The Figma design eliminated the need for me to design assets, and let me focus on the coding.

Project 2:

Figma Landing - No Dev Tools

For our second project working with Figma designs, I was tasked with recreating a visually stunning landing page. This time, however, we had no access to Figma's developer tools. This meant we had to rely solely on image references, which presented a unique set of challenges.

• HTML Structure:
  • I began by structuring the HTML to create a clean and semantic layout, with a header, hero section, carousel, reputation section, and footer.
  • Then, I meticulously crafted the CSS to accurately replicate the Figma design's aesthetic, including the colour scheme, typography, and layout.
  • Flexbox was used extensively for responsive design and layout control.
• Hero Section:
  • The hero section was particularly interesting, as it used a background image to create a visually striking effect.
• Reputation Section:
  • The reputation section also required careful attention to detail to match the Figma design's layout.
• Challenges and Collaboration:
  • Working from the Figma design was a challenging but rewarding experience. The stunning visual design pushed me to refine my CSS skills.
  • It really tested my collaboration skills, as we had to communicate effectively to ensure we were all on the same page.
  • Without access to dev tools, we had to be very precise in our measurements and interpretations of the design.
  • Special mention to George and Connor, who worked on the project with me.

Key Takeaways

Both projects provided valuable insights and reinforced key concepts:

• Figma as a Design Tool: Figma's detailed designs provided a clear visual blueprint, allowing me to concentrate on the code.
• Dev Tools Efficiency: Access to Figma's developer tools significantly streamlined the CSS development process.
• Image Reference Precision: Working without dev tools required meticulous attention to detail and strong visual interpretation skills.
• Collaboration: Both projects highlighted the importance of effective collaboration and communication.
• HTML & CSS Mastery: Recreating these Figma designs reinforced my understanding of semantic HTML and responsive CSS layouts.

Conclusion

These projects were a fantastic learning experience, demonstrating the power of HTML and CSS in recreating complex web interfaces. The combination of structural HTML, stylistic CSS, and effective collaboration resulted in polished and functional recreations of Figma designs. For my portfolio, these projects highlight my ability to tackle complex layouts and work effectively with others.