HTML Elements

I would love for Figma to know about the basic HTML elements. This has been suggested before (HTML elements, CSS layouts).

I really enjoy how the UX world is moving away from using graphic design tools (I started with photoshop, personally), and towards more integrated workflows. I also understand that using graphic primitives (lines, rectangles, circles) makes Figma more versatile and usable for other UI technologies… But it also generates quite a bit of pain in my everyday UX live.

Handing designs off to devs is made much harder because we will always have to explicitely discuss the mapping from Figma rectangle to HTML button/input/section, or else include some type of documentation. In multiple projects, I’ve seen different cumbersome ways of doing this: comments, naming layers so that they correspond to HTML elements, or adding tables with documentation under each frame in Figma.

It also means we need to teach UX designers enough HTML so they don’t think up things that can’t be implemented, or even so they remember to style every possible state when handing things off to developers.

Only using primitives also sets hard limits on how useful the code generator in dev mode can be: It just can not know if this rectangle in Figma is supposed to be a button or an input field, it lacks the data. What the code generator outputs thus are always just divs in divs. The generated code might even render in the browser to look exactly as it does in Figma, but it’s not viable code by a far shot, for multiple reasons of which lack of accessibility is just one.

Any chance that compatibility with HTML is in figmas future?

Frame is a direct projection of the DIV element. Especially when you have auto layout. Why use rectangles though? Not sure if I got it. For me dev hand off becomes way more effective. Have you seen dev mode and how it brings CSS syntax?