Research Stage
Creating a website that will beat out your competitors takes plenty of research and development—pun definitely intended. Figma helps reveal what you’re working against, in the hopes to outpace competition and gain visits from your most desired audience.
Visualize Competition
Get to know who the competitors are and exactly what they’re doing. For instance, during the discovery phase at Solid Digital, our team pulls in screenshots for competitor research, showing their pages, site structure, and site navigation. Figma’s whiteboards allow full annotation on the screenshots for fruitful discussions about the competition. Everything is efficiently done within the tool, without switching back and forth with other software. Using the Web to Figma plugin is helpful for bringing websites into Figma as editable files—it’s particularly useful for exploring competitor moves and piecing ideas together as inspiration.
Collaboration Stage
When the research is mostly finished and the tools are selected, next comes the true collaboration. Figma has multiple tools that are effective for partnering with our client teams. Working together in real time streamlines work that previously happened in static slide decks.
Figjam And Brainstorming
With FigJam, Figma’s online brainstorm tool, the whole gang gets together (no siloes!). After asking one question, we sort through every and any answer and idea with upvotes and comments. Pulling in data for reference and paying attention to annotations and chats, our team gets the full picture and can pivot toward the best ideas. This organization and collaboration for internal exercises is particularly useful for pairing up SEO concepts with the design in real time.
Structure Stage
When the brainstorm settles and the research is at hand, it’s time to build up the bones. Sitemaps, wireframes, and rules (styles) come next. This is the main way our team at Solid Digital uses Figma.
Sitemaps
Figma is The Place we create sitemaps at Solid Digital. Not only does it help show our team and our clients how we’ll have users navigate their new website, but also how the URL structure will look. The building blocks of the website are all there, and the info that will later be used for SEO aspects is easily visualized at this stage.
Wireframes
Site structure, page structure, and general strategy all come through in the wireframes, particularly as it pertains to SEO. The scannability of the page, both for users and for crawlers, is vital, and can be readily previewed using Figma’s wireframe setup. Discussions around conversions and goals for the page can be tried on and tried out, as the team decides what looks best, but more importantly, what will work best for optimizing the new website. Landing pages, blogs, FAQs and all the metadata to help boost SERPs results gets planned at this point—allowing teams to evaluate strategy alongside the aesthetics.
On top of this, page structure impacts speed, which in turn impacts SERPs ranking. In development mode, it’s easier to annotate items for the developers, who can identify pages or areas that are negatively impacting page speed. Bringing in developers that weren’t likely part of the SEO conversation before, can help make the site efficient, balanced, and bring page speeds up.
Setting Up Styles
Setting up styles, particularly with a Figma component library can save time during the design stage. Naming conventions are considered when putting in H-tags; for example, when blog posts are created, they’ll visually match up with the styles that have been created. XLs and XLMs will also be mapped to the actual H tags for easy hand-off to our front-end developers, showing exactly how text should be styled and which markup must be followed. Planning better allows search engines to read the website properly—and the H tags can be inserted before the site is completely built. The Stark plugin from Figma helps quickly label images with alt tags, too.
Review Stage
Now that the structure is there, it’s time to slap on the paint and install the furniture of your website. Figma’s Autolayout and Prototyping tools make this simpler than typical development processes.
Autolayout
This Figma toolset is best used to find out responsiveness, and shows the look of the desktop, tablet, and mobile versions. Simply making the screen smaller will show how the elements appear. In terms of optimization, this visualization identifies exactly what your user will see on every kind of device, so if the CTA falls too far below the fold on mobile for example, you can move it up before it’s an issue. (Added mobile responsiveness is also tied to your SEO score.) During the design stage, our team at Solid Digital inserts as much real content as possible to ensure the layout isn’t negatively impacted by content that’s not the right size for the space.
In addition to where things land on the page, accessibility plugins for Figma can also boost SEO. Helping create better color contrast, for example, is doable through the Stark plugin (mentioned above) while the Aria plugin helps with screen readers. Having both of these before launch helps create a forward-thinking strategy for accessibility, rather than a reactive one.
Prototyping
In Figma’s Prototyping tool, the interactions are fully set up, so a button click will take you to another page. It helps to map the flow (easy to see for our team and for the client) from the home page all the way to the contact page, and clarifies the actual pathway for users moving through the wireframe.
Presentation Stage (Or, Collaboration Pt. 2)
The site is ready for its close-up. Time to present. In Figma’s follow-along mode, you can easily share website designs, from user journey to responsiveness.
Observation Mode
Using Figma’s observation mode, we share everything with our client in real time, presenting the actual design and development that will help their optimized website reach and convert. During the presentation, they can talk with our team, giving feedback or annotating different questions they have on specific aspects or details. Our clients know their customer best, so taking their ideas and filtering them into the final iteration helps create the ideal, most optimized marketing website through Figma.
