April 11, 2024
Updated!

Making Sense of Figma & Webflow

Design
Webflow
Development

Lately, with Figma rolling out new fancy features, there's been a buzz comparing it to Webflow. As someone who uses both, I find it pretty funny.

People are asking why bother learning Figma when Webflow can do web design, and vice versa. They're also wondering what sets Webflow apart and what it's capable of.

It's totally normal to hear these questions from folks who aren't knee-deep in the design world. But you know what really got me? When fellow designers started asking the same things! I mean, seriously? So, I decided to put together this small article sharing my thoughts on the topic.

Deliverables: Design vs. Development

Instead of getting into all the nitty-gritty details, let's focus on what each tool does best. Figma is great for making cool wireframes and designs. But you can't just share a Figma link with a client and say, "Here's your website, isn't it awesome?"

Delivering design to the client

Figma's purpose is design creation. These designs then need to be translated into code using languages like HTML, CSS, and JavaScript. This development process can be done in various platforms like Webflow, WordPress, or custom coding. Regardless of the chosen platform, the goal is to breathe life into the Figma design, making it accessible through a URL.

Beyond Aesthetics: Responsiveness and Functionality

And it's not just about looks; your design needs to work too. While Figma allows for responsive design using auto-layout, it can't handle true functionality. Features like interactive forms, user authentication, or e-commerce functionalities are all outside Figma's scope.

Think of it like this: We wouldn't expect AutoCAD to build a house, but it's the perfect tool to design one. Similarly, Figma focuses on design and prototyping, not building websites or apps. The development stage comes after the design is finalized.

building a house inside CAD

Here's a fun twist: I can totally see Figma and Webflow holding hands instead of duking it out. It's like they complete each other, in a way.

In a Nutshell:

Figma – Design Tool

Webflow – Website Builder (Development Tool)

Conclusion:

It's crucial to understand the distinct roles of design and development. They are separate stages in the creation process.

Figma isn't outdated because it can't build websites. It's a powerful design tool. The confusion lies in understanding the different purposes of each platform. Figma excels at design, while Webflow takes care of development. Both tools play vital roles in the web creation process.

Introduction

In this tutorial, I'll guide you through the process of building an interactive dynamic gallery using Webflow's CMS multi-image field feature. By the end of this tutorial, you'll have a visually appealing gallery where users can navigate through multiple images seamlessly.

Step 1: Setting Up Your Collection

Begin by creating a collection in Webflow with a multi-image field. For example, let's say you have a collection named "Recipes" with a gallery of images for each recipe.

Step 2: Addressing Lightbox Issues

If you try to use the lightbox component directly within a collection list linked to the multi-image field, you might face a problem. Each collection item ends up with a separate lightbox containing only one image. To resolve this, group all the lightboxes by assigning them a common group name. This ensures that all images are displayed together in the lightbox.

Step 3: Designing Your Gallery Layout

To achieve the desired gallery layout, create a separate collection list for the gallery. Limit the items displayed to 3. Style the list as a grid with 2 columns and add an overlay with "(+n)" indicating the number of additional images beyond the third one.

Use the following JavaScript code to modify the layout:

// Make the first image span 2 columns
var firstImg = document.querySelector(".gallery-list > div:nth-child(1)")
firstImg.style.gridArea = 'span 1/span 2/span 1/span 2';

// Hide overlay for items in the gallery, except for the third one if there are more than 3 images
var imgCount = document.querySelector('.lightbox-list').childElementCount
if (imgCount > 3) {
    var imgOverlay = document.querySelector('.gallery-list').children[2].children[0].children[1];
    imgOverlay.style.display = 'flex';
    imgOverlay.children[0].textContent = `+${imgCount - 3}`;
}

Step 3: Designing Your Gallery Layout

To ensure that clicking on images in the gallery opens the lightbox, use the following JavaScript code:

const imageWrappers = document.querySelectorAll('.image-wrapper');

for (let i = 0; i < imageWrappers.length; i++) {
    const imageWrapper = imageWrappers[i];
    const order = i + 1;

    imageWrapper.addEventListener('click', () => {
        console.log(`Image wrapper clicked! Order: ${order}`);
        document.querySelector(`.lightbox-list > div:nth-child(${order}) > a`).click()
    });
}

This code creates an array of gallery images and triggers a click event on the corresponding lightbox item when a gallery image is clicked. This way, users can seamlessly navigate through the images in the lightbox.

Conclusion

By following these steps and implementing the provided code snippets, you can create a dynamic and interactive image gallery in Webflow using CMS multi-image fields. This approach enhances user experience by allowing smooth navigation through multiple images within a cohesive lightbox environment.

Happy designing!

logo in footer
Copyrights 2024 © Abdelhalim Aljamal - All rights reserved.
Close
logo in navbar
Code copied to clipboard!