Hey there! 👋

Welcome to this article, which is divided into two parts. Firstly, we'll explore the concept of replacing the original Pregnancy+ app's visualization of baby size with technology, and secondly, we'll delve into the process of recreating this design in Figma, complete with motion effects.

Byte-Sized Babies: A Technologist-Friendly Approach to Pregnancy Visualization

For those of us who don't cook, eat just to stay alive, or simply don't have a sweet tooth, the traditional method of visualizing baby size using fruits, animals, or sweets can be a bit perplexing. So, let's take a technical-based approach for accessibility reasons.

In a world where not everyone relates to the size of a mango or a kiwi, it's time to rethink the way we visualize pregnancy milestones.

Instead of comparing your growing baby to a piece of fruit or a cute woodland creature, imagine your little one as the latest in cutting-edge technology or innovative hardware. Here are some examples to get you started:

1. First Trimester: Your baby is now the size of an Oura ring. Tiny, but packed with potential.

2. Second Trimester: Congratulations! Your baby has upgraded to the size of a smartphone. Prepare for increased energy levels and maybe a few random shutdowns.

3. Third Trimester: Get ready to welcome your baby, now the size of a sleek, state-of-the-art laptop. Just like a laptop, they'll be ready to go at a moment's notice (but may need a reboot every now and then).

By swapping out fruits, animals, and sweets for technical gadgets, we're making pregnancy milestones more relatable for everyone. Plus, who wouldn't want to imagine their little one as the latest in tech innovation?

So, here's to a dead-serious technical approach to pregnancy tracking. Because when it comes to visualizing your baby's size, why settle for bananas when you could have microchips?

💡 Idea for the prototype by Hazel Brugger & Thomas Spitzer from the Hazel Thomas Hörerlebnis Podcast

👨‍💻 Original Pregnancy+ design (you know, the ones with fruits and so on) by Will Brett-Atkin

How to Recreate Pregnancy+ Baby Size Visualizations in Figma

1. Content Creation

For the content, I utilized a screenshot and overlaid objects on top of it. From top to bottom, the layout includes:

1. Status bar

2. Header (Today-Text Button, the Size Guide heading, and the avatar)

3. Week visualization (Frame with week component objects, below the label and two vectors)

4. Images (Frame with all images, the active image twice as big as the previous and next one)

5. Title of the Reference and Export Icon Button

6. Size by Dropdown

7. Card with Length and Weight Details

8. Navigation

9. Extra: left and right are overlapping frames with a linear fill

Most of the components are auto layouts, except for the main screen frame. This allows you to add constraints to the frames inside the main screen frame. By choosing “fill container” for the frames inside the main screen frame and adding the constraint “left and right,” you can make the screen responsive.

You could also add min and max width to create breakpoints for media queries.

Components

To expedite the creation of all 40 pregnancy weeks, I created two component sets with variables, as shown in the pictures.

To create a component set:

1. Create your objects first.

2. Select them and right-click on the component icon in the top bar in Figma. Then select “create component set.”

3. Next, create the different variables. In each component, click the same text part, icon part, frame, or whatever you'd like to change in your future objects.

4. In the sidebar, the “create property” icons will appear in different sections depending on what you have selected. You can choose between different variable types, like text, boolean, variant, or instance swap properties.

I’ll go into more detail for one example in my specific prototype here.

To create the body measurement component set, I first created seven instances. I selected them all and created a component set. One property was created by default—I just renamed it to “Type” and renamed the options to “Weight” and “Length.” Afterward, I clicked deeply into the frame tree to select only the specific text frame where the particular number for the weight/length goes. I selected this text frame in every one of the seven instances and chose in the text section “create text property.” This allows me in one of the child objects to quickly change the right sidebar instead of clicking through the full frame tree to the specific text frame each time.

Motion Effects

In the original Pregnancy+ app, screen details swap differently in terms of motion and timing.

Here's what happens:

1. The title and the details change instantly.

2. At the same time, there is a slide motion in the main image where the last previous disappears, the previous main image becomes smaller, the current main image becomes more prominent, and the next image appears, all while the whole image set is moving.

3. After all this, a little bit delayed, the set of weeks slides too; the last active week becomes black, and the active week becomes bold and blue.

It's essential to have more motion screens to create this motion than just the origin and destination screen.

I decided to realize it with the following screens:

1. Origin (the screen where we are coming from)

2. Details (just the title and length/weight details changed)

3. Image (all images changed)

4. Week/Destination (now the week is updated, too, and we reached the destination screen)

Now, switch from the design tab to the prototype tab and connect these screens:

1. Either due “On tap” or “On drag”—depending on what you want, choose the “navigate to” option and choose the screen where just the details changed. The type is instant.

2. Now, connect the details and image screens and choose the option “after delay.” Set the delay to 1 ms (the smallest amount Figma can realize) to make it look like it's happening at the same time. Choose “Navigate to,” and this time, choose “smart animate” to create the scrolling effect. I've chosen here the ease-out at 300 ms.

3. Last but not least, connect the image screen to the week/destination screen. Here, we choose “after delay” again, but we give it this time a visible delay of 100 ms to make it look like it's happening after the other animation. This helps the user not to get overwhelmed by animations all at once. I’ve chosen “ease-out” and 300 ms again for consistency.

And voila!

Questions? Just drop me a line; I’m happy to help.

Hire me.

Need a leader and mentor for your designers? I’m an authentic leader and set a focus on leading through self-leading. Enhance your team. Enhance your product. - Hire me. (recommended)

Cheers, your smart future coworker Franzi 🥂

https://www.linkedin.com/in/your-smart-future-coworker/