Day 1 — SmashingConf Toronto 2019
--
I was stoked to attend the SmashingConf in Toronto this year. The conference venue was at the perfect location, TIFF Bell Lightbox, right at the heart of downtown Toronto. The event was scheduled to start at 8:30 a.m, but my colleague, Blaine Hussey, and I were so excited that we reached TIFF around 8:00 a.m. and waited anxiously for the doors to open. You can see how happy we were when we got our name tags and all those SmashingConf swags.
In Day 1, seven speakers were allocated forty minutes each to deliver their presentation. The presentations had the right mix of hands-on code demos that covered front-end code architecture, VUE application, and animation, as well as talks on inclusive design, and digital policy and standards.
Speaker 1: Brad Frost — Let’s build a Design System
In this session, Brad Frost discussed and showed how to build a design system. In his demo, he used a static generator tool called patternlab.io and Story UI to develop a design system’s front-end component. He shared some great ideas about front-end code architecture, modular development, and component reuse.
Key takeaways:
- You should design systems through the lens of your software. In my recent experience re-designing Solace’s documentation site, it was critical to design and code through the lens of the software we use, which also included any third party software that we wanted to integrate.
- Having reusable components is paramount in the design system workflow.
- Create a common pattern/language/convention for all stakeholders to share.
- Create a consistent API code convention.
Resources:
http://bradfrost.com/blog/post/a-frontend-workshop-environment/
https://patternlab.io/
https://storybook.js.org
