First of all, let’s break down some key concepts that will become useful to continue reading this article:
stack/stak/
Dictionary meaning- A pile of objects, typically one that is neatly arranged.
But let’s focus on the tech environment meaning:
A Tech Stack is a combination of technologies that a company or person uses to build and run an application or project. A tech stack typically consists of programming languages, frameworks, databases, front-end tools, back-end tools, and applications connected via APIs.
Similarly to the concept mentioned above, we can consider thinking of Design Stacks, which is a combination of tools a designer or company uses. This could consist of wireframing, whiteboards (online or offline), design, illustration, or photo editing software.
A REAL day in the life of a (digital) Product Designer:
If you have experienced what the Product Designer above had just now, you are not alone.
“Understand your materials”Alan Dix — Professor, Expert in Human-Computer Interaction
To be a good Product Designer, auditing the current status quo, implementing key design principles, analyzing user behavior and stakeholder management might not be the end of a Product Designer's journey but the beginning.
Understanding the company’s or a project Tech Stack or what type of systems you might be using in your development environment, could help you to present better proposals that align with your team and increase the developer’s efficiency.
From my experience of working in several start-ups and having competed in several hackathons, I would say more often than not a Product Designer is more prompted to be advised or indirectly drawn to understand a bit of code, than the developers training their design skills.
So, how do we design with a Front-end developer mindset?
More and more design is becoming very similar to how a front-end developer would build that design with code, which creates the perfect handoff for consistency, efficiency, and implementation of a design and removes friction between the designer and the coder.
Of course, this coupled with having a design system on the design side that matches the one used in the coding environment would further remove discrepancies in the final product.
One of the things that’s obviously difficult for a Designer to interpret is exactly what type of code, what type of abstraction layers, and what type of systems you might be using in your development environment.
Figma to Reactjs
This is how a button component could look like in ReactJs (a Popular Javascript framework created by Facebook) and how could it look on Figma (a Popular design tool)
ReactJs Button component example
Understanding how a front-end developer could be building our Figma components and vice versa will provide your team with a structure that very closely matches properties and values from the development side, which will help to communicate better with your team, this is how we work faster together, we are all building the same product, right? So this really makes it a lot easier by understanding and getting closer to your development components structure. Obviously, there are going to be some differences in how designers are thinking about things and how developers work, but this is going to give us some of that shared language together.
From a design file to coding layout compositions
In the example above we explored a bit how composing the structure of a button component is a faster way to get from design to development.
But… what about spacings and alignments?
Consider the following example
A simple card component with a short title on the left and a button on the right.
Yes, we could specify the distance between the title and the button, but we would then need to specify this distance to every screen device breakpoint manually also it’s more prompt to discrepancies when coding by introducing a different number.
We want to keep the same structure no matter how wide the card is, we want the title to keep it’s position on the left and the button on the right.
In Figma, this is really easy. By setting its orientation to horizontal, specifying the alignment in the center and the justification to space between. Now if we make the card wider both elements will keep the space between them.
So far so good from a mobile device up, but in a mobile view, we might want to make the elements inside this card stack on top of each other.
By changing its direction to vertical we can achieve this in 1 click and we can maintain the paddings and other styles.
Why is this important and how does this translate to code?
In the image below we can see our card component properties on Figma UI on the left, and on the right, we have the CSS properties that might be used to recreate this on code.
In the CSS code example above flex-direction is set to row but if we set it to column then the elements inside will stack on top of each other.
Nowadays the tools used to design UI have a very close relationship to that of the development environment, this removes communications barriers between developers and designers, making the product design process more efficient for the team.
The less we can as designers utilize “hard-designed” values, floating elements, or manually positioned components, let alone not using components at all will make your work more difficult to maintain in the long run, and will slow down your team’s efforts.
To summarize, being able to master your working tools and having a good understanding of coding languages will help you build better design solutions and improve the communication with the development team, and all together thrive to build an awesome product.
Extras
This is an example of Tech Stack acronyms:
Back-end Stack
LAMP = Linux, Apache, MySQL, and PHP
Front-end Stack
- MERN = MongoDB, ExpressJs, ReactJs, NodeJs
- MEAN = MongoDB, ExpressJs, AngularJs, NodeJs
Design Stack?
We, designers, haven’t adopted these types of acronyms, but after reading this article maybe we should start? Here are some ideas:
- FIMP = Figma, Illustrator, Miro, Photoshop
- AIMP = AdobeXD, Illustrator, Miro, Photoshop
If you are working with developers I invite you to search more about front-end technologies and then go ahead to this free file on the Figma community where you will find Tech Stacks and Design Stacks icons and see how many of those you can recognize!
Top comments (2)
The Figma + React combo is perfect in my eyes.
Great article