Published on | Prototyping: From UX to Front End — Medium Irene Shih

It starts with a powerful Sketch plugin Material Theme Editor that can potentially replace Craft, InVision, Zeplin, and supercharge the dev process with Material Components.

Yep, that’s just a start. I’m so amazed by how innovative and productive Google has been as a design influencer for the past four years. I won’t be surprised if next year’s Google I/O presents something like “Hey, Google. Make a website for me.” “Sure. Just send the design to your phone.” 🤷

💡 Why Material Theming matters?

Because it addresses the pain points designer and developers have faced together for years, and we’ve been eager to see a solution.

3 Keynotes from Google I/O ’18: Code beautiful UI with Flutter and Material Design, Customize Material Components for your product, and Build great Material Design products across platforms

For me, as a UX Designer, I believe we usually think about users. But when I’m working with the user-centered design approach, how about my coworkers, developers? I found we as designers might sometimes overlook the importance and appreciation to our best friends at work, the developers.

I like Google’s Material Theming because it addresses lots of pain points the dev team and I have faced. For instances, overwriting the existing stylesheets inherited from the web framework we chose, finding the right icon pack with customization ability, updating all the styles across different platforms… these things are not impossible for devs to solve, but they’re very time consuming to tackle, and could be low return on investment. It might be just a few clicks for designers to do so in Sketch, but can take dev teams weeks to implement and QA it.

Instead of dealing those technical issues, why couldn’t we spend our time and intelligence more wisely, on the things that really matter?

I think that’s the true value of those design/development tools we love, including Material Theming. They free us from the repetitive and tedious work so that we can focus on finding what are the really important problems, questioning the answers, and exploring the solutions.

Well… I’m not just praising Google’s newbie. I do have some suggestions after I’ve tried and tested out. I’d love to have your feedback, so let’s get started!

👉 Step 1: Unbox the Material Theme Editor

First, let’s download Material sketch plugin!

It works very nicely on my end. For me, it centralizes all the tools I need for modifying and syncing styles, symbols, color palettes, etc, all in one place. I love that it’s already equipped with all Google Fonts. So I can freely see and compare Google Fonts versus fonts installed in my local computer.

The only thing I wish to have is the ability to fine-tune the light and dark shade of the primary color. Currently, they’re automatically generated by the primary color we picked.

Trying out Material Theme Editor.

Notes: Although Material Theme Editor works great for its embedded official Material Design templates, it, understandably, doesn’t support other design files, even Sketch’s default “Material Design” template. That might set some limitation to design process — How if the components/modules I need are not included in the embedded official Material Design templates? 🤔

Nope. not working for Sketch’s default Material Design template.

However, that shouldn’t limit us move forward. The Material Theme Editor has many great features, and one of them is “Upload to Gallery” which is basically just like “Update to InVision” feature from Craft. So, here I just uploaded this design template I downloaded from Sketch App Resources.

The time for uploading artboards is pretty quick!

👉 Step 2: Sign In the Material Gallery

Sign in with your Google credential HERE!

The Gallery is different and even better from what I thought when I heard “Material Gallery” in the first place. I thought it’d be something like Dribbble or Behance, but nope, it’s InVision. It’s InVision that I can just streamline design and dev process with all the nice little things we’ve got in G Suite, like comments, sharing within the organization (editor versus viewer), linking Google Drive documents or other links, etc. That’s a Wow to me.

Also, it’ve got InVision Inspect (or Zeplin) markups and device skin of your choice.

Three things I like the most: Switching the platform (Android, iOS, Flutter, or Web) also updates the units (px, pt, dp) — I think that’s just so handy and thoughtful for developers, and I personally haven’t seen this feature in any other design tools.

All the measurements are updated once I switch the platform

Another feature I like is “Select Frame” which allows me to select not only mobile and tablet but also desktop. I know it sounds funny that I literally stare at a desktop comp on my desktop screen … But when here comes clients presentation, I still have to make these. If Material Design can help me just quickly export this comp below, that’d definitely be another killer!

The last feature I just love is — The ability to link documents to projects so that everything can live in one place nicely! I’d love to set up the project title, short description, collections, and then link all the most updated relevant documents like project brief, KPIs, user testing report, client presentation decks, PM tracker, etc. This is what I’ve dreamt for.

Also, the default privacy setting is private, which is awesome. It makes me feel that I can explore Material Gallery freely for both professional and personal projects before I’m ready to share. Love it!

👉 Step 3: Get Material Gallery iOS/Android app

It’s optional. But for me, it’s nice to have projects synced to my fingertips on the go. Download them HERE!

✏️ Final Notes

I want to thank Google for always being such an awesome design advocate and bringing great tools and methodologies to the design/dev/product communities. Though sometimes I do feel I’m being brainwashed by Google’s great design and its propaganda… Everything has a reason, and when someone provides a great product to me at free of charge, I have a tendency to think about what are the business strategy and model behind the scene. 🤔Google is for sure one of the most ambitious and capable tech companies in the world, so I’m already curious about what the next moves of Material Design will be in the upcoming years.

Thank you for reading! Please share your feedback or thoughts. I’d love to hear from you.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Google I/O ’18 — Material Theming was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Google I/O ’18 — Material Theming

Cool stuff, every week

More Articles