Grappa - Figma to Webflow by Haseeb ullahGrappa - Figma to Webflow by Haseeb ullah

Grappa - Figma to Webflow

Haseeb ullah

Haseeb ullah

Grappa - Figma to Webflow

Project Description

Grappa The Rocks is an Italian restaurant and cocktail bar in Sydney's historic The Rocks district, an extension of the Colosi family's established Leichhardt institution. The site needed to reflect the venue's heritage character while handling reservations, menus, private event inquiries, and gift card sales.

Goal

To convert a provided Figma design into a pixel-perfect, fully responsive Webflow website, preserving the brand's editorial, heritage-driven aesthetic (custom illustration, serif typography, warm color palette) while building a functional hospitality site with reservations, gift cards, and content sections tied to the parent Leichhardt location.

Implementation

Webflow Development Rebuilt the Figma design in Webflow with pixel-perfect accuracy, including the custom building illustration, vertical rotated text elements, image carousel, and the "Whats On" card grid, while structuring reusable components for opening hours, contact details, and location content shared across the site and footer.
Optimization & Performance Ensured full responsiveness across all devices, optimized restaurant and venue photography for fast loading without losing image quality, and maintained an SEO-friendly structure to support local search visibility for the venue.
Testing & Deployment Performed cross-browser and cross-device testing to confirm consistency, verified reservation and gift card links, resolved any UI discrepancies against the original Figma file, and deployed a production ready site matching the design exactly.
Like this project

Posted Aug 6, 2026

Converted a Figma design to a responsive Webflow site for Grappa The Rocks restaurant.