Published on | Prototyping: From UX to Front End — Medium John Manhart

My UX workload was overwhelming, until I discovered the power of Atom. Here’s how it can help you, too.

TL;DR: Atom (along with some siick packages) lets you write and manage all your UX documentation easily using Markdown. And the best news is that it’s free!

I recently started working for a massive engineering company. Between all the meetings, work sessions and new hire on-boarding, I found myself swimming in content. Most of my notes and task lists were spread across emails, random Word docs, job briefs and varying shades of Post-It notes. After about four months on the job, my desk looked like this…

Actual Footage

I used to rely heavily on Evernote and Google docs to organize my workflow, but cloud-based services were not an option at my new job. I tried using Microsoft Word, but that six hours crushed my soul. Then I decided to give Atom a try. I do not regret this decision.

I actually first discovered Atom while working as a Developer in 2015. I knew the developer/package community supporting Atom was very expansive, so I thought that it might be able to help me with my current workflow demands. After some research, including reading this in-depth article, I jumped on the Markdown and Atom train.

☝ Atom

To get started, you are obviously going to need to Atom. It’s free and available on both Windows and Mac. After installing the program, pick up these additional packages:

🔎 Markdown Preview Plus — This is an essential package for viewing Markdown within Atom.
🔎 Markdown to PDF — Convert any Markdown file to a PDF. A PDF will save in the same directory as your .MD file (.MD is the Markdown file extension.).
🔎 Spell Check — Helps clean up not only your own work, but those of your coworkers, as well.

TIP: To install Packages in Atom use this shortcut (⌘ + , ) to bring up the Core Settings ➜ Packages ➜ Installed Packages ➜ Search..

But …What Is Markdown? Markdown is a lightweight language with plain text formatting! If you need more than that sentence (seriously read more about Markdown), below are my go-to articles about the formatting and history of Markdown.

Excellent Crash Course on Basics by Ghost
Useful Markdown cheatsheet by Adam Pritchard
History of Markdown by CommonMark

✌️ Now, Use These Sweet Package Shortcuts!

(Mac only shortcuts below 🙁)

Toggling Markdown Preview ( ⇧ + ⌃ + M ) – This is the most important shortcut for this workflow. The preview window is essential for formatting. The hot-loading capabilities within this package make trial and error very pleasant, as well.

Shift ⇧ + Control ⌃ + M

Generating a PDF ( ⌃ + ⇧ + C ) — Quick shortcut for saving a PDF of your Markdown file. The PDF will be saved in the same directory as your .MD file.

Control ⌃ + Shift ⇧ + C

Bonus Helpful Atom Shortcuts

Toggle Atom’s Treeview ( ⌘ + \ )
Search the File ( ⌘ + f) & Search the Directory ( ⌘ + Shift ⇧ + f )
Multiple Cursors ( ⌘ + location )
Duplicate Line ( ⌘ + Shift ⇧ + D)

In my few months of using Atom in this manner, I’ve found the program to be very hackable, and the possibilities are limitless. So if you’re looking for a safe, free and stable manner to manage your notes, and you like to learn new skills, I definitely suggest giving this workflow a try .

Thanks for reading! This article is intended for set up and getting started. A follow up article of how I use this set up will be coming soon!

Stay Tuned! ✌️

How I keep UX tasks organized with Atom. was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How I keep UX tasks organized with Atom.

Cool stuff, every week

More Articles