The website application for creating, testing, and sharing website design is organized, it’s efficient, and it makes life as a website designer better. If you know how to use Figma for web design, then you’ll likely know that the file covers, components, and design libraries are incredible for organization in the web application. Stakeholders can find things without consulting the design team, and collaboration is improved through projects that are kept on track.
More specifically, we gathered our top 5 reasons why using Figma for web design works well for interfacing with clients.
5 Reasons Figma Rocks for Sharing Website Designs:
#1: Easy to Navigate
With a little guidance and a tiny bit of training from Solid’s teams, our clients can easily use and navigate within the application. Just using the arrow keys, they can move around in the files after jumping in (once the link is shared).
#2: Easily Shareable
There aren’t as many hoops to jump through as one might have with Google docs. No pending invitations, no missed permission emails. Just a link that can be shared with colleagues and clients. In Figma, you can invite them to one file, a project, a full team, or an entire organization, depending on what they need to see. Simply send an invitation to their email address, they accept, and then they can view the shared item (or organization).
#3: Seamless Transition from Design to Presentation
This is a boon to both clients and designers. No more speed bumps when you move from the design stage to the client presentation—all the assets are already in the program, and any changes that need to be made can be done quickly, rather than having to export with a power point (or export again when changes are inevitably requested). Avoiding tedium and condensing work time is efficient and effective.
#4: Advanced Graphics, Design, and Interactivity
Compared to Google Slides or Microsoft Powerpoint, Figma for web design was actually made for prototyping, and has much better graphics and design along with user interactivity. For example, if your website has hover animations, those can be set up in your presentation (and tested by your client!) to give additional context during your presentation—not after, and not separately—leading to streamlined communication. Plus, Figma’s component library will save you loads of time during a design.
#5: Living document
Speaking of streamlined communication, Figma certainly allows different versions of the design, but you can also do live updates during your presentation. For example, if your client sees something that they want to shift, you can handle that change right then and there (if it’s simple enough). If it’s a master component, from the component library, then an update in Figma will equate to an auto-update on the slide of your presentation. Once your client changes have been implemented, you can direct the client right back to the same link. No need to resend. No need to export (unless you really love downloading things).
A World Without Figma?
There are a lot more than five reasons why Figma is great. Sometimes, it’s also helpful to think about where we would be without Figma in our bag of tricks.
Static
Without Figma, website designs would need to be exported, shared via a jpeg, and any color palettes and design aspects would only be shared through slides or put into a PDF. Even though it takes a little extra time and training, clients no longer get just a hand-off. They get a full walk-through via the live Figma presentation. The site is cohesive and live and easily accessible and changeable for everyone.
Going Through Hoops
There are plenty of players in a new website design, and not everyone is up on coding. So, if during your presentation, you need to get something set up on a page to execute the design, you would need to loop in the developer or go outside your role. Inside Figma, you can accomplish the task quickly and easily without having to jump through extra hoops.
Lack of Visual Cues
Additional context and familiar functionality are both value adds for presentations. Clients are absolutely visual, and not having the website animations or layout in full-fledged functionality, you lose out on visual cues for the client, which can confirm the choices they’ve made, or the artistic design you’ve spent time on are actually happening in the website design.
How to Use Figma for Web Design
To Start
With Figma, our team creates a dashboard and sets up the navigation with cards (that are clearly labeled). Because it’s not a PDF, the user can scroll through the pages and the slides. To fill in the web design, we also create the following with Figma:
- Site maps – This helps us (and our clients) see website hierarchy and site structure—the website foundation is editable and changeable in the live interface so we can make changes as we go through the presentation.
- Wireframes – These are the foundation of the typical website page designs and we can show the client how a typical page would be laid out with headers, buttons and image placeholders.
- Styleboards – These help show how color, typefaces, and treatments of the web pages will be used (it’s the colorful bit).
To Scale
Figma vitally allows the dashboard to scale the site as we need to. For one client, we wanted to show different options for a resource library cover. Through Figma, we made additions to the file to show different content rather than a single page. Because it was fully fleshed out, that helped the client make a more informed decision.
To Follow The Process
If we ever need to retrace our steps, we can go back in the iterations to find any missing piece, and then grow and evolve as needed. (Clients can refer back in the same way we can, too.) This is helpful for if the request and the result become misaligned down the road—the trail of breadcrumbs shows you where you were before.
To Stay on Track
Finally, Figma is highly organized—everything lives in the same file, all the pages are stored in one document, and both clients and stakeholders alike know where to go. The clear system and structure keep items findable. The consistency keeps projects on track. The improved team collaboration means designers spend time designing. And that equates to a better experience for every user, clients included.
