Landing Page
Brief
Client:
Big Meal Share
Role:
Designer & Developer
Date:
January 2023
Design and build a responsive landing page to outline the main benefits of the Big Meal Share meal sharing platform.
Objectives
- Showcase current meals
- Illustrate the meal sharing process
- Use the Finsweet Client-First development framework
- Responsive
Tools
Webflow
Figma
Finsweet Client-first
Figma to Webflow plug-in
Process
.webp)
Step 1
Figma Design
Using the Big Meal Share design system and color palate I created a variety of different components to illustrate different selling points for the digital platform.
Step 2
Webflow Development
With the design mostly complete I was ready to start developing the page in Webflow. With access to the new Figma to Webflow plug-in I experimented with it, using it to bring across some components at the speed of copy & paste. Other more complicated elements such as the modals and animations I build manually.
Step 3
Test & Deploy
Once complete I set about publishing the site, testing the responsive components at different breakpoints connected google analytics.
Outcome
Summary
Overall this was a great project to improve my Figma design and Webflow development skills. I learnt a lot about the Client-First framework and will definitely use this more going forward, however the Fligma to Webflow plugin seemed to be more of a burden than benifit.
Learnings
- Finsweet Client-First takes time to learn, but once understood it's makes development much more unified and improves visual consistency.
- The Figma to Webflow plug-in uses the figma frame name as the webflow class, unless two frames have the exact same properties, in which case it will repeat the class name.
- Figma to Webflow plug-in can be useful in some cases, but with the Client-first framwork I found that this plug-in slowed down my workflow.
