Clear. Simple. Useful. New theme for Android apps in Figma based on recent design improvements of Google

Design research and product management for the one-guy-firm

Self-management for enhancing a digital product with aiming to the conversion.

Roman Kamushken
Sep 4, 2018 · 5 min read

Introduction

I simply run design experiments and then compare metrics 📈

This was the pretty clear explanation of what I’ve been doing for the last couple of months. This new theme for Figma Android kit is the experiment as well. Inspired by the recent announcement of Google’s apps redesign, I decided to clone and customize my first Android classic theme to validate some ideas. I am a design experimenter and run experiments all over again. Moreover, it’s good to have a choice when starting a new application prototype, isn’t it?

Experimenting with forms, shadows and overlapping effect. Dribbble shot

Experimenter-based approach

If you are a one-guy-firm like me, constantly running experiments is your only friend. You perform it, then launch, then stay paused to collect some statistics. You’re a self-manager for your own and numbers are important, in case this tells everything. Was the experiment failed? No problem. Roll back, examine, analyze and then start next new attempt. For one-guy-firm the only wasting resource in terms of the failed experiment — the time…

Collecting metrics for further optimization

What’s happening around the design world at the moment? Be everywhere and explore everything related to the design. Set your own filters. Predicting the trend is quite hard, but considering the closest direction is possible. This theme was inspired by recent Google’s apps visual improvements, so I decided to create something similar but spreaded out through my own vision of things. Let’s see the conversion ratio for this product before the 1.3 version was released: the approximate ratio for June, July, and August is 2.1% (referred from setproduct.com)

Not so bad, on the other hand; but there’s still something to correct, on the other.

Several products will double your vision

Whoa! That was the recent insight of mine. After I launched Websy — my 4th Figma design product related to the web design, I looked back at my landing page and assumed I am now at the one level higher. Because I saw a lot of leaks and was able to determine new problems throughout the web designing experience I’ve gained a month ago when finished Websy. Everything must be easier, simpler and described shorter than now. Looks like nobody is scrolling pages deeper nowadays, so I experimenting here by cutting off twice the tall than it was previously. And more tricks which you can’t notice without eagle eye :) Check out the page: https://setproduct.com/mobilesystem

Are you an eagle-eyed designer?

Okay, will see. This is the task for you: jump into your Gmail account, click on ‘Compose’ button and examine ‘Send’ button appeared after it. Could you see something after you onhovered your pointer? It’s surrounded by ~2dp blue shadow, and there’s no word about it in guidelines still. If you with me, grab your 👏👏👏

Something materialistic is still absent

The UI design today is full of little details which you can’t admit until you’ve got too close. One materialistic way effect in Google design is still undeclared — reflex coming from a shadow. Actually, material.io shadows and elevation still look like 💩💩💩 From my sight of view, ain’t no colored element exists in a real world without reflexed shadow, especially on the white surfaces. So, I tried to fix that. If you are an attentive person you will find this effect while browsing the preview. Those shadows declared in Global Styles section as well. Simply attach the ‘Amber Shadow’ to ‘Amber Button’ and this will work.

And yes, the shape of FABs is customized as well. Looks like we now have a space for maneuver for this after customization was permitted by Google Design officially. Wanna to roll back to a classic circular Floating button? No problem. Go to the master component and reset the rotate and corner radius for the button background component. I am just trying to represent the possibilities. And you decide the direction.

Figma Android Kit highlights

This is a must-have product made as smart mobile design system in Figma environment and I’d like to tell you about some benefits:

  • Figma design system based on components-made architecture. Well-constrained, scalable and ready to use
  • Two themes included to start with: Android classic (Roboto) & Minimal material (Rubik)
  • A qualitatively organized design kit to swap Instances faster
  • Ideal for your education in a purpose of building powerful Figma systems
  • Lifetime updates and customers support
    140 templates paginated into 17 following categories: Activity, Shopping Cart, Planner, Checkout, Content Screens, Promotion, Discover, Home, Filters, Item Screens, Maps, Sidemenus, Profile, Search, Social Screens, Wishlist

Purchase at GumroadPreview theme 1Preview theme 2

Two themes with 280 layouts total just for $49 • https://gum.co/mobilesystem/purchase

What’s new in v1.3: the second theme Minimal Material was added, +9 new social app templates, some bugs were fixed.

What’s next: thinking of a switching to 📊 Figma charts system to update and enhance this product.


PS: Let’s met there again with this product after one month, due to collecting some new stats about this enhancements. Follow me here, on Twitter, on Dribbble

Happy prototyping! Never stop analyzing what you’ve done in your own sprints. Best regards, Roman.

Roman Kamushken

Written by

Design systems for Figma www.setproduct.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade