For some background: I’ve been designing in digital for over 25 years.
I’m not a coder, but I understand a great deal of HTML and CSS.
The majority of my work is in enterprise web applications.
Figma is really easy-to-use, but it is basically a vector drawing tool with some light interactivity bolted on. It doesn’t have any built-in structures / primitives / tools that are 1:1 parallels of web elements or how CSS styles work.
This becomes a barrier to creating prototypes for enterprise interfaces which are largely forms and tables.
What I would like to see is:
-
Basic HTML semantic structures with nesting, that show up the way nested frames do now -
div / header / section / footeretc -
HTML form elements -
button / input / selectwith the associated types, attributes and behaviors - 99% of my work is forms, so not having to fake these with rectangles would be cool - basic primitives and states included, stylable by the user, or with default “browser styles”. -
Actual tables for tabular information - again, in enterprise systems, you’re using these all the time. Equivalents to all HTML table elements like
thead, tfoot, tr, td,etc. Sortable tables would be a++ - CSS-compatible style classes that are reusable - so if I have a class that says “add a 1px border to this thing” I can just apply it to anything; this would also be super useful for creating text styles so we can fix the ‘no multiple text styles in a text box’ issue.
- CSS-compatible layout tools in place of Autolayout - Flexbox and Grid (and subgrid) including all the usual attributes, including automatic row wrapping, so we can easily create layouts for different device types just by resizing a parent element
- CSS measurements - px, fr, ch, pt, percent etc - that relate to the parent element, not the current element.
- min / max width as many have already requested
