Story: Make a wireframe to deliverable file

I delivered a wireframe by Adobe XD in 1 week. Now I have to make a high-fidelity file. I have to care about symbols and style. I don’t know how much I have to care about animation, but good looks are always a better impression.

I searched for how to do something when I need a solution. Many people already faced it and uploaded it on YouTube. It’s nice and destroys the value of designer sometimes. I don’t mention it here.

This is my learning process of Adobe XD.

Plugin for Adobe XD

©Jesse Showalter

I searched for plugins and it looks nice. Especially, if you are a long-time Adobe illustrator user, it’s almost magic. I used Sketch APP for a while. So, less impact for me. I would like to find an auto-fill(name, profile, image, etc) function.

I like:
– Color scale
– Content generator
– Lorem ipsum
I can find a similar website, but the plugin may be faster than copy and paste.

– Maps generator
– Rename it
– UI faces
– Google sheet

Punit Chawla: 10 Most Useful / Powerful Adobe Xd Plugins (2019) | Design Essentials
Punit Chawla: The Best New Adobe Xd Plugins of 2020! | Design Essentials

Medium/UX Planet: 7 Must have plugins for Adobe XD
XD Guru: 10 of the best plugins for Adobe XD

©Adobe Creative Cloud

– UI Faces
– Repetor

I sometimes watch Adobe channel on Youtube. The process of other creators are interesting. 

Wireframe by Adobe XD

©Mark-Anthony Karam ///

16 columns are possible, but I have never tried it, always 12. Styleguide looks nice. I am thinking about the text. He recommends real, but I don’t want to take time for creating a text in the wireframe. I use real text(explain what it is) to a heading for a client.

©Adobe Creative Cloud

Very interesting to see the file developed by professionals. The process is also valuable.

– Know your audience
– Move fast
– Don’t get hung on the details

Toptal: Information Architecture Principles for Mobile (with Infographic)

Styleguide by Adobe XD

©Dansky: Color & Character Styles Adobe XD Tutorial

– Symbol panel button at the left bottom corner
– Color, character and symbol

Convenient.

©Caler Edwards

It looks like a general style guide, color, typography and logo. You can create more UI elements, gradient, h1-h6, type setting, button, graph, icon library, photo reference, etc. It depends on the project.

©Adobe Creative Cloud

The website below shows how to present your work. World-class. 

Gretelny: Work

Prototype by Adobe XD

©Adobe Creative Cloud

– Prototype mode > Press and drag > Property inspector

– Shadow with page color, not only just gray
– Prototype mode at 12:07
– Time trigger available for the only art board

I am wondering how much should I express an animation precisely for a developer?

Behance: Daily Creative Challenge

©Caler Edwards

– Create a component, group, apply animation

I think the world is really mobile-first, but I don’t have many product projects… 

To achieving an animation, the component(element) has to be on the artboard. In this care, visibility does not matter, outside of the artboard works. I think it sounds as same as Keynotes.

©Envato Tuts+

– Asset, layer and plugin
– Animation with transparency is a much better impression
– Adobe XD recognize the element wherever it poses

©Jerrin James

Soft UI, I’ve never heard it. I saw it and pins on Pinterest, but I don’t know YouTube knows it or not.

This is an advanced expression. Good to know.

Toptal: Productive XD Prototyping – An Adobe XD Components Tutorial

Adobe XD Dropdown Menu

©Jesse Showalter

I use WordPress and Webflow for developing a website, but I have to visualize it when I collaborate with a programmer. Is it convenient?

Hover Button Animations in Adobe Xd

©Punit Chawla

TBA

How to Export HTML, CSS, JavaScript from Adobe XD

©DesignCourse

A client asked me to deliver by HTML and CSS. I searched whether XD can export the code like Figma or not. According to my search, it requires a plugin. The video mentions Anima. Adobe forum does not mention a specific plugin. I don’t know what is best for export coding.

Adobe support: How to Export HTML, CSS, JavaScript from Adobe XD

Export design assets at Adobe XD

©Dansky

Adobe support: Export design assets

Save XD file from local computer to cloud

I saved the XD file on a local computer. I needed to save on the cloud again. This is the solution. Open a local file, and choose to save as. I could save a file on the cloud.

Adobe: Fix issues with Adobe XD cloud documents

Conclusion: Update constantly

When I started my career, I needed only Adobe Illustrator. Then, I learned Adobe Photoshop, InDesign. A few years later, I learned Adobe Dreamweaver. I’ve learned WordPress in 2016, Sketch APP in 2018, Webflow in 2019. Then Adobe XD in 2020.

The learning never ends. It’s a fan, sometimes overwhelmed. As a side hustle, I am thinking to learn Final Cut Pro or Adobe Premier Pro. I am using iMovie as a hobby. Video is a must in 2020. Human ability is unlimited. The universe does not allow us to be a couch potato.

Reference:

Adobe: Animate prototypes
Adobe Blog: Best Practices for Using Auto-Animate in Adobe XD
Adobe XD: COMPONENT STATES/UI kits and example files