It’s rare that you get to build a system from scratch. The early decisions you make will stick around for a long time. Last week, I built a new design system for my new job. For this project, I chose Adobe XD over Figma. When Figma releases new performance enhancements, I might change my mind, but its Adobe for now.  I refactored it a few times and have been thinking about the structure.

DISCLAIMER: I don’t think I have all the answers. I am doing this on my own and no one has shown me best practices. I am learning and exploring by doing. If someone has wisdom on this, please let me know

For explanation sake imagine you have the following general frame of an application.

In Adobe XD, I have the following tree to make the above frame.

Horizontal Rows vs. Columns
As you can see in the above structure, I broke the frame down into columns. That way, in theory, I could change the widths of the columns and resize the areas. Unfortunately, Adobe XD fucks this up pretty badly. It scales everything rather than allow me to lock the height/width of certain elements. Figma constraints definitely help there.

If I structured it as Rows it would look like:

Not only is it a little longer, I STILL need to break down the columns just to keep track of which section is which. I also never move the height/width of the rows. The row is always 100% wide and the height doesn’t really change.

So my learning is that the first structure (Column Structure) makes the most sense. However, the lack of constraints certainly makes resizing difficult.

There is a whole other set of decisions based on what things should be symbols and what shouldn’t. I’ll have to blog about that another time. Adobe needs to make some serious headway on their symbols. They suck right now. Anyway, there is probably 3 people in the world that this blog posts helps, so there you go.