Published on | Prototyping: From UX to Front End — Medium Jonathan Speek

After settling on some different design tooling for my current project, I have grown quite comfortable with using Figma and Atomic together. I really wanted to see what all of the fuss was about with Figma, so I went for it.

As far as design workflow, I’ve been able to use Figma for 80% of my process. Designing itself (making heavy use of their components feature 😍), style guide creation, developer handoff, and static prototyping (mostly for product owner sign-off) are all being handled in Figma. Best of all, I don’t have to sync anything or worry about the latest update killing my plugins. Developers and stakeholders are able to view my designs realtime. When I have components, or even an entire screen approved, I can begin to build the prototype in Atomic. If you’re interested in my thoughts on Atomic, check out my previous post.

For this tutorial, we are going to build a simple burndown chart that makes use of data importing using Google Sheets, as well as some basic interactions to display that data. Feel free to copy/edit my prototype if you wish.🥂

Initial Design in Figma

After you’ve finished your designs and you’re ready to prototype, think about separating static content from dynamic content. One of the major drawbacks of using Figma vs Sketch is that there is no current integration for Figma (hopefully we get this soon 🤷). For this example, I’ve exported an SVG of both the line and the skeleton of the chart to help get us started.

Export static content first

Next, we will want to make sure we have some data to import. Atomic has a great integration with Google Sheets that allows you to pull in data to fill out things like table rows (which are a huge pain otherwise). Here’s a more in-depth tutorial on that. To get started, create a table in Google Sheets that uses the first row as table headers.

Basic Google Sheet for importing data

Next, you’ll want to import that Google Sheet for use in your prototype by heading to the “Data” tab.

Click the Data tab in your project

Now, simply choose the Google Sheet you created and hit “Select”.

Select your Google Sheet to import

After your data has been imported, you’re ready to make some components. If one state is larger than another (hover state grows in size), I like to start by making the larger state first. Here, you can see that the circle will grow from 5px to 9px on hover. So, I begin by making the 9px hover state with the dummy text in-place. I typically name each page (or state) accordingly.

Create your “point” components

In the righthand side, you’ll want to make sure that your content is “Set from data column”, “Inherit from parent”, and that the column name matches the column you’re wanting to pull from.

Copy that component everywhere you need it and set the state to “Hover” when you’re done.

Point components copied

Now, you can group those components and set the data to match your Google Sheet and check the “Map rows to child elements”. After marveling in your accomplishment, change the states back to “Default”.

Map the rows to child elements

We’re now ready to do the same thing for the bars in the chart. Add the bars as rectangles, then create a text component that has a “Hover” and “Default” state. Import the data the same way you did for the other component and you’ll be good to go.💯

Bar number components

After you have dynamic data pulled-in, you can finish your prototype with some basic hover states. Pro-tip: in the left-hand panel, rename your component instances so that you can map the actions to the correct instance.

It’s so helpful to rename these

To add a hover state, select the element you want the user to hover over and follow the steps Atomic has given you. For a hover, you’ll want to cover both mouse-in and out events. You’ll want to do this for each component, making sure you have everything mapped to the correct instance.

Add hover states for each component

Once you’re done, you can click preview and checkout your amazing creation. If you’d like to copy the Atomic prototype I made for this tutorial, click here. ✌️

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

Prototyping in Atomic: Burndown Chart was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Prototyping in Atomic: Burndown Chart

Cool stuff, every week

More Articles