Figma Sites is worse than you might have thought

Summary

In this video, the creator explores the new website-building features in Figma, highlighting both its potential and shortcomings. While praising its visual design and responsiveness, the creator criticizes Figma's reliance on div elements, poor accessibility, and lack of semantic structure, especially for users with screen readers. The creator expresses disappointment in the overall implementation, suggesting it lacks critical features and will lead to problematic websites. With alternatives like PenPot offering more control over CSS, the creator remains uncertain about continuing with Figma in the long term.

Takeaways

• 😀 Figma now allows users to directly create websites within the platform, but this feature is only available to paid users.
• 😀 The process of designing and publishing a site in Figma is fairly straightforward, involving template usage and link sharing.
• 😀 Figma allows users to add interactive elements like links and transitions between pages within the site design.
• 😀 The generated website is responsive, with automatic adjustments for mobile views, though it's limited in functionality for real-world sites.
• 😀 The code generated by Figma's website builder is heavily reliant on 'div' elements, which lacks semantic HTML structure, raising concerns about accessibility and SEO.
• 😀 Figma’s generated code includes issues like improper usage of spans for headings and excessive divs instead of more meaningful tags like 'header' or 'nav'.
• 😀 Links in Figma's generated sites sometimes use divs with roles like 'link' and 'tabindex' rather than semantic HTML anchor tags, leading to potential usability issues.
• 😀 The generated code also uses JavaScript to handle hover effects and other interactions, instead of relying on more traditional CSS methods.
• 😀 The author criticizes the quality of Figma's web-building feature, calling it 'half-baked' and suggesting it should have been in a closed alpha instead of being released publicly.
• 😀 The lack of a proper structure for creating semantic HTML tags in Figma’s website builder is a major drawback, preventing users from properly managing elements like headings and sections.
• 😀 The author expresses disappointment with Figma’s approach, preferring PenPot, which is more closely tied to CSS standards, offering better layout control using grids and flexboxes.

Q & A

What is Figma's new feature for building websites?

Figma has introduced a new feature that allows users to create websites directly within the platform. This feature is available to those on paid plans, allowing users to design, add interactions, and publish their work as live websites.

How does Figma allow for interaction in the website design?

Figma allows users to add interactions to their designs. For example, users can link elements to other pages or external websites, and the platform manages the interactions to make the site functional.

What are the issues with Figma's generated code?

Figma's generated code is largely made up of div tags, even for elements like headings, which should ideally be semantic HTML elements. The text elements often have each letter wrapped in a span tag, which raises questions about the reasons behind this structure.

Why does Figma use div tags instead of semantic HTML elements?

Figma appears to rely on div tags for most elements, even when they should be more semantic tags like headings or sections. This approach could be due to Figma’s design system, but it compromises accessibility and SEO, making the code harder to optimize.

What is the problem with Figma's accessibility for screen readers?

The issue with accessibility in Figma's generated code is that certain elements are given unnecessary 'aria-labels', which causes screen readers to read the content twice. This redundancy can make the site more difficult to navigate for users relying on assistive technology.

How does Figma handle text links in the design?

Figma generates text links using semantic 'a' tags, but when a background color is applied, it turns the element into a div with an 'aria-label' and a 'role' of link. This is problematic because it’s not a true link, and JavaScript is used to simulate the functionality of the link.

What is the problem with hover effects in Figma's generated code?

Hover effects in Figma are managed using JavaScript and inline styles. This can make the hover interactions harder to implement and troubleshoot, leading to issues with consistency and functionality.

How does Figma’s current web development tool compare to other tools like Webflow and Framer?

While Figma’s web development tool provides a visual interface to create websites, it lacks the level of semantic structure and control found in other tools like Webflow or Framer, which generate more functional and optimized code. Figma's approach, being relatively new, still has significant issues in terms of code quality and design flexibility.

Why does the speaker feel disappointed with Figma’s website-building tool?

The speaker is disappointed because they believe Figma’s new tool is half-baked, as it lacks critical features like assigning semantic HTML elements. Despite Figma’s reputation for creating high-quality products, the speaker feels this tool is not ready for public use, considering its poor code structure and accessibility issues.

What is PenPot, and how does it differ from Figma in web development?

PenPot is an open-source design tool that offers a more CSS-focused approach to layout, integrating grid and flexbox options based on the CSS specification. Unlike Figma, which has been criticized for poor HTML output, PenPot allows for more control over layout and is built with web standards in mind.