Skip to main content

My team is currently building a design system but we are running into the same conversation on building a component in Figma vs building it in a code base. Full transparency, I am a designer and have only a small amount of knowledge when it comes to how a developer might take a design and code it. It is my understanding that “a Design System is the complete set of standards, systems and processes a company will use to implement a design at scale” and a UI Kit is purely a representation to be used when creating these products (ie. putting components in a mockup).


For context, designers and developers are discussing how to make a list item with a divider. Designers want to use a HR component but developers would prefer to attach a bottom border. How crucial is it for the component in Figma to match the code, or is it ok for them to share a name but be built differently.

Lot’s of different approaches on this.


But to be hard about it…find a way to get on the same page.


It really might not matter in the design of things. But if you want to build a design system, everyone should have a voice and concessions should be made to agree on how to approach it.


If you want an HR, and the developers find it better to use a border, lean toward their expertise as they have to build it. YOU have to design it. So design it how it should look, using the manner in which they prefer to build. Set spacing, padding, everything in your component and name color tokens or styling appropriately.


This is a VERY easy concession and a super easy one to solve. If this is a sign of communication issues in your team, make sure you focus on that because things will get much more complicated. When you get to debating over how icons behave in an input field, how table rows expand to accomodate additional content, or the worst…how to define table column collapse or hide when on smaller screens. These require real conversationsa and an agreement on your “business rules of design.”


Sounds a lil tough love maybe. But that is it. Gotta work together in a design system.


In the end, design it the way it will be built and name things the way everyone will work together.


Not always easy! But that is the way design practices are supposed to work.


(some of that might be soapbox)

Reply


Terms & ConditionsCookie settings