Hi John, I find that the steps to get to the solution are the most important so I structure my files around that process. I also separate each file into a feature. Each page is its own design iteration, until we release a master design which is on its own page. That page holds all the documentation about the design.

I had the same thought!

React feels too slow for design work, despite it introducing some elegant paradigms to front end development. I remember a survey that the Framer team sent out years ago asking if people want to stay with coffee script or move to ES6 and beyond. Everyone voted for code closer to modern JS. That's what we got, only without the production code.

As you probably realized, vertical rhythm becomes a lot more complex with web apps because usually you don't have walls of text, but components, tables, grids, labels, etc some of which are dynamic. I found that a lot of those CSS rules/mixins for marketing layouts don't necessarily translate over well.

Try thinking about how the rhythm works in respect to how each component behaves with each other, and look at typical vertical rhythm for blocks of text in isolation. I don't think there's an easy way - as you build out a design system you start to see pairings that you can repeat.

Adobe XD is not really free - the free tier is limited.

For prototyping logic, states, and complex interactions: Protopie and UXPin. Protopie feels optimized for mobile, and UXPin feels optimizes for web applications. But both can handle either.

You will need to do tests on your components if you have a design system as you refactor. It's powerful enough to handle most things.

Yeah I agree with you here. I mentioned UXPin because its used a similar approach to how XD is showing components, but has been tested with users for a longer time.

XD can be seen as superior maybe on an initial feeling of being new but once you extend the use cases to hundreds of components, it could be different.

UXPin shows the grid view for components that people seem to like, and it requires a lot of scrolling. They solved that problem with a smart search feature and a truncated view. Just by the looks of it, Sketch has its own solution which is good too. I bet both of design teams came to similar conclusions.

Try Zoho mail.