DESIGN SYSTEMSCreating a consistent UI for Magento store 

BARTEK IGIELSKI Lead Front-end Developer @ SNOW.DOG

Core team member @ Vue Storefront Founder of Frontools / SASS Blank / Alpaca

twitter @igloczek facebook /iglodottech

WHAT ISA DESIGN SYSTEM?

#MM18RO@Igloczek

Design System – the complete set of design standards, documentation, and principles

along with the toolkit (UI patterns and code components) to achieve those standards.

#MM18RO@Igloczek

#MM18RO@Igloczek

Pattern Library – A subclass in the design system, this is the set of design patterns for use across a company.

#MM18RO@Igloczek

Style guide – Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.

#MM18RO@Igloczek

#MM18RO@Igloczek

#MM18RO@Igloczek

ARE THERE OFFICIAL STANDARDS FOR DESIGN SYSTEMS?

No, because each company have different problems and goals

#MM18RO@Igloczek

Salesforce’s Lightning Design System contains design patterns, components, and guidelines, but doesn’t contain JavaScript code, allowing

teams to use any front-end development framework of their choice.

https://www.lightningdesignsystem.com/

#MM18RO@Igloczek

Google’s Material Design includes interactive motion guidance as it

emphasizes on natural motion and smooth animation for a “delightful” experience.

https://material.io/

#MM18RO@Igloczek

IBM’s Carbon Design System is fully featured, explaining rules and patterns for designer and developer, but also giving

them a sandbox to play with components.

http://carbondesignsystem.com/

#MM18RO@Igloczek

GOV.UK Elements - http://govuk-elements.herokuapp.com/

Shopify Polaris - https://polaris.shopify.com/

Atlassian - https://atlassian.design/

And many more… https://www.designerlynx.co/design-systems

BENEFITS

#MM18RO@Igloczek

• Simpler environment

• Working without backend

• Parallel development

• Components library

• Live documentation

• Focus on one thing at a time

• Visual testing

• Faster feedback

RISE OF DESIGN

SYSTEMS

#MM18RO@Igloczek

The concept of design systems has been around

for quite some time, for example 1975 NASA

Graphics Standards Manual.

#MM18RO@Igloczek

Recently some companies given attention to

design systems as they realized their designs

weren’t scaling as quickly as their businesses.

SNOWDOG’S DESIGN

SYSTEMS STORY

#MM18RO@Igloczek

JANUARY 2017

An idea of Component Driven Development

Rough structure and naming rules

Fractal.js as a “framework”

SNOW.DOG page redesign project

One Junior Front-end Developer and me

#MM18RO@Igloczek

APRIL 2017 - OCTOBER 2018

3 214 commits

373 674 added LoC

292 001 removed LoC

34 releases

~5 stores on production

9 front-end developers

2 designers

2 repositories

#MM18RO@Igloczek

#MM18RO@Igloczek

Design system based Magento 2 theme v1.0 released today!

https://github.com/SnowdogApps/magento2-alpaca-theme

https://github.com/SnowdogApps/magento2-alpaca-components

ALPACA FUTURE

#Reacticon@igloczek

Future is bright!

#Reacticon@igloczek

Move from Fractal.js to Storybook Ongoing - https://github.com/SnowdogApps/alpaca-storybook

Vue Storefront theme based on Alpaca Starting soon!

Open source design files Soon! (code sharing is way easier, because there are good tools for it)

#Reacticon@igloczek

Better checkout Ongoing - https://github.com/SnowdogApps/magento2-vue-checkout

Better product gallery Fotorama is PITA, but it’s just this morning idea :D

Better menu Done! - https://github.com/SnowdogApps/magento2-menu

Magento 2 B2B modules support Ongoing internally

FINAL THOUGHTS

#MM18RO@Igloczek

Design systems should be built for change They are living, breathing resources that naturally evolve as the

products/services mature.

#MM18RO@Igloczek

The more integrated the system

will be with the designers and

developers workflows, the more

effective it will be.

#MM18RO@Igloczek

And all of this is only a beginning!

BARTEK IGIELSKI twitter @igloczek facebook /iglodottech bartek.igielski@snow.dog

THANK YOU!