

Choose the Semantic UI kit in the Cloud Documents tab.ħ. Open a new XD project and click the “Link Assets” button.Ħ. Save the Semantic UI Kit as a cloud document.ĥ. Make any modifications to the appearance of the components-such as the colors, typography, etc.- in the Master Component artboard.Ĥ. Download the latest version of Adobe XD.ģ. Here’s a quick, step-by-step walkthrough of how to get started:ġ. You can begin prototyping with Ole’s kit right away. Here’s an in-depth look at his UI kit, how designers can quickly get the most out of it, his motivation for creating it, and its relationship to the Semantic front-end framework. “My philosophy is that we will have a greater chance of achieving success if our designers and developers work together as one team and speak the same language and adhere to the same UI principles,” Ole said. It addresses team and organizational issues he discovered in his real-life role as the design director and co-founder of Justify, a legal-tech startup aiming to make legal services accessible to everyone.

His latest thoughts resulted in the Semantic UI Kit. Interaction designer Ole Fredrik thinks about design problems like this and their practical solutions quite often. It can even compromise the chances of a successful product launch. Add to that the possibility that designers and developers aren’t on the same page when it comes to working with UI principles, and the end result can be a process that takes much longer than it should. In the design process, things get bogged down far too often due to design-component clutter.
