About the Event
Adobe invited UX Designers, UI Designers, Design Strategists, Product Managers, Students, Visualisers for a workshop to learn or share their experiences. The Adobe Xd Masterclass event was for people who want to learn the following:
- Design Thinking process using Adobe XD to build interactive websites and mobile apps.
- Prototyping for Voice User Interfaces using Adobe XD
- Using Auto-Animate to come up with micro-interactions to bring your prototypes to life
Who attended the Adobe Xd Masterclass Event for Zolo?
The Experience
I have always had a knack for learning new skills. It could be anything, ranging from an instrument, a new dish, soft skills, language or software. I love learning about the people who inspire me are doing & how are they doing it. That makes me a believer. In the sense that when I see them in person and realize, yes they are humans too & we’ll get there one day if we are on the same path.
I landed at Spread design barn on a Thursday afternoon after a long drive, but the place emits such inspiring positive vibes that you feel more energized than tired when you leave the place.
This time I went here for a masterclass conducted by Shandar Juniad himself, who apart from being a Strategic Development Manager at Adobe, is also a local leader for IxDA & the next product he’s developing, Adobe Xd.
While setting up he came up to us and asked us if we have an updated version for the Xd or not. I promptly replied “I do” to which he said “You won’t! Because we rolled out a new feature yesterday.” -more about that feature later.
After a couple of clicks & one app update later, I was sitting amongst people who were as eager & enthusiastic to learn as the master himself.
Mr. Junaid started by asking us to launch Xd & use the marquee tool to create a circle on the artboard. Next, he dragged the same artboard and asked us to create another shape & delete the previous one. Then he asked us to create a button that could say anything for example “Go”, “Next” etc. and another button on the next artboard that said “Back”.
Right at that moment, he asked us to create a circle for image placeholder & name field on the side and asked us to create a repeat grid. Then he gave us a hack that would populate the name image field from the same folder. It’s an Adobe Xd feature pretty much everyone must know. What’s amazing is that he gave us a tutorial on how we can Live Import from we google sheets to the place holders by naming the column name on sheets the same as placeholder name inside the project. So, you don’t have to update it every time there is a change in someone’s phone number, location, etc.
Imagine creating an amazing stop motion animation cuts that you want to use on a website you’re creating! You want to convey what/how this feature works on the website for which animations are very effective. Now imagine sitting at the end of the table convert that beautiful aftereffects animation into a 2000 line code so that it runs perfectly? It’s the definition of converting the most creative artwork into the most gruesome tiring day for someone. Enter – Lottie by Airbnb, it exports animations for developers.
Then he went on to mention some powerful plugins for Xd namely,
- This person doesn’t exist – creates AI-generated face pictures.
- Overflow – To design & present user flows effectively (It’s a blend of Prezi + Visio).
- Personas – A plugin to import or create editable user persona cards.
- & lastly, how can you import live data from google sheets by keeping the same name for placeholder & google sheets column names.
A fun discussion about user personas –
User personas don’t exist in reality. That cat lady, who is 40, lives alone nor does the Pankaj who is an IT professional, works out, earns a ton of money & needs no bothering while he’s doing his favorite sport, golf. Adding to this he mentioned the plugin called personas which has pre-created persona templates that anyone can use to present the persona or empathy maps.
Briefly touching, The meaning & understanding of a “design system” & its effectiveness, how it helps anyone who is new to the project understand/design the product with the same efficiency as other team members, it’s a repository of all the resources to build a product or brand – tools, guidelines, colours, fonts etc, to build a screen for anyone who’s a part of the design team.
While at this, he asked, “who uses Alexa/google home?” to which only 5 hands went up which was a surprise, I haven’t owned any of the voice command devices for the reason that they are very inefficient for the cost. Primarily used, only to search for songs on YouTube or a TV series.
If you do want to utilize them to their full potential you’d have to buy more devices that nowadays sell under the Tag of “Smart devices”, lookup google nest.
Moving further he showed, how we can use voice command on the eCommerce website, to navigate using voice as a trigger on Adobe Xd.
A feature from Adobe Xd which rolled out two weeks back is called “Invite to edit” – the new feature, that I was talking about earlier, where you can invite a person from another country, state, city to collaborate with you in real-time on a project you’re working on.
Useful Website links – LetsXd, a hitchhiker’s guide to adobe xd – prototype.io article.
