Join us at Medium Day on September 19th for a behind the scenes look at recent feature updates.

As any practicing designer knows, shipping feature updates isn’t always straightforward. Our team is excited to share this peek into the processes and philosophies behind our design decisions, followed by a Q&A discussion with the community. We look forward to how your questions might shape our conversation!

Members of the design team who will be present include:

Sophie Aguado, Senior Product Designer
Jeremy Borthwick, Principal Product Designer
Nouf Aljowaysir, Senior Product Designer
Jason Combs, Senior Brand Designer
Cassie McDaniel, VP Design

Sophie will share the thinking behind our follow to subscribe initiative, Jeremy will give an exclusive peek at mobile digest prototypes, and Nouf and Jason, who work on Publications and Brand respectively, will be on hand to answer questions in a Q&A session following the case studies, while Cassie will provide a bigger picture look at our design philosophies. We’re excited to open up our process to the design community and hear what questions you may have about the way we work.

More great talks on the art & design track

We are a small part of a very excellent Art & Design Track for Medium Day. Check out these other sessions (and other tracks as well) and register for free on MediumDay.com, and we’ll see you next Friday.

Meet the Medium Design Team was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Opening a New Principal Product Designer Role at Medium

We’re looking for a new super senior designer to join our excellent team. Here’s more about what the job entails.

Today we are opening a new Principal Product Designer role at Medium — our most senior design level and an IC leadership position at the company.

Adding new leadership to a team involves both risk and reward. That’s why I’m writing this: I want to outline my hopes and expectations for this role as well as illustrate the immense, rare opportunity to shape the future of Medium. We know success for this role depends on finding someone whose experience and interests align perfectly. Somewhere out there is a person reading this who’s nodding along, maybe even saying aloud, “That sounds exactly like me. I can help with that. I want that!”

That’s who I want to find: someone who knows Medium, appreciates our mission, and has the skills to deepen our design work. Is that you? By all means, apply, and tell us in your cover letter why you’re the perfect fit for this role. Yes, a human being will be reading your cover letter.

Why now?

During my six months at Medium so far, what has become clear to me are our tremendous opportunities for growth. We spent the past two years stabilizing our business and reaching profitability, and our team is now ready to take on more creative risks and holistic systems changes that shape how Medium fundamentally works. In other words: our footing is sound; what’s next?

Our day-to-day work (especially as designers) should be fun, and this work sounds fun to me. It is high impact and high reward, has super interesting challenges to consider, and you get to build on your craft alongside colleagues whose skills and integrity are unmatched. This is a very, very good group of humans who I hope this role will serve well. I want the right person reading this to be equally invested in discovering a connection with this much potential.

Small team, big ambitions

We’re a small team — I want to make that clear because sometimes the reach of our brand makes people think we are bigger than we are — but what we lack in size we make up for in ambition. Altogether our company is just under 80 people, along with a handful of contractors. Our design team has six people, seven counting me: one brand designer, four product designers, and a researcher. Like many companies our size our team skews senior; we have four senior designers, one staff level, and one other principal product designer. I am currently the only design manager so all designers, including this role, report to me. I report to our head of engineering, product and design, Luke Millar. I am also a member of our executive team of five that meets with the board and works with the rest of our leadership team to set company direction.

What you’ll work on

At Medium, we believe in the power of writing and publishing, how it can help clarify ideas and beliefs, how it can stir movement and change, how it can connect people to meaningful community. I’ve felt that impact personally over the course of my career, and the right person for this role has probably felt that too. That’s the big picture.

We are building better systems for people all over the world to feel the power of a well-expressed idea that reaches the right people at the right time. Those connections can change lives for the better.

On the more granular level, there is no shortage of projects we can tackle. Some of these will be principal level design challenges, others will be simply chipping in and working with high agency to make everything work better. Examples include auditing and designing interconnected systems for notifications, finding new ways to organize and help members discover our “great library” of content, or more holistically painting the vision for Medium’s unique value prop of “social publishing.”

We are already working on many of these things (and more), but your work will make us stronger. You will help us build and maintain a culture of excellence by designing and building experimental prototypes, measuring the impact of our work, learning as we go, and all those other things listed in the job description.

How you’ll work

There are two pieces of this that feel important or setting this role up for success.

1. Being product-minded is critical to your success at Medium. You’ll work directly with other designers, engineers, and leadership to plan, realize, and measure the impact of your work. Because we are a small team we operate like a startup, which means that direct working teams do change and that sometimes all hands on deck are required. The person who fills this role will be equally comfortable mapping out a strategy with leadership as they will be relishing the detailed, hands-on execution of their work alongside Engineering and Content.
2. The development of individuals on my team is extremely important to me, since that is the part of the employment bargain that, as a manager, is up to me to uphold. Sometimes designers at the highest levels in a company are left to fend for themselves. They are often working on the most complex, ambiguous problems in the business and expected to operate with a high degree of autonomy. On my team, that will be true too, but you will always have my support and advocacy, even when I am challenging you at the same time. I promise to push you. That’s my job, and I expect you to hold me to the same standard. Managers and ICs need to work together as a team and that means listening, negotiating, and acting within a high trust environment.

How we make decisions

I want to share a little more about how we make decisions at Medium because I know that will matter to the right person for this role. In short, our CEO, Tony Stubblebine, and Head of Product, Luke Millar, are closely involved in the work, as am I and all our managers at this small company stage. We know our product very well and take pride in being a hands-on product leadership team. We try hard to avoid the typical things that we all hated about working with leadership that ‘didn’t get it’ at other points in our careers — things like false urgency, fire drills, or drive-by critiques, but to honor that we expect good-spirited collaboration above isolated heroism. You will also work closely with your cross-functional product teams, because good ideas can come from everywhere.

As a company we meet up twice a year to complete our roadmapping, and since we are fully remote we tend to choose a different location each time. Last year we met up in Scotland. This March we are headed to Newport, Rhode Island. We are definitely still figuring a lot out about our operational efficiencies and we’d like you to help us shape them, but there are some good ideas in the pipeline for how to create more clarity and efficacy. Our offsites are critical times at which the whole company gets together to hash out our biggest challenges and ideally, you are right there with us.

Who you are

The job description outlines the characteristics of someone we think would fit well into this role, but I’d like to use this space to reiterate a couple of things.

1. This is both a deep systems and high craft role. Being a small team, we’d like an experienced designer to be able to work at different fidelities of design problems, and in different areas of the business depending on need. Usually, to meet the expectations of this role, you’ll likely have already worked for some time as either a Staff or Principal level designer at a similar type of company. There aren’t many design challenges you won’t have seen some version of in your working history. Some experience in consumer-facing products, particularly working on a social or community-based platform, will give you a leg up in solving many of our specific challenges.
2. But we aren’t looking for someone to repeat history. We want a designer who thinks deeply, often outside the box, who isn’t afraid to take risks, and who knows when to use existing patterns and when to innovate. This person should be industry-aware and can both reflect our level of ambitions back to us while at the same elevating the potential of our plans. You’ll make us all smarter.

Is this you?

I hope this level of transparency is something that excites you as much as it does me. It’s a characteristic of my brand of leadership that I feel lucky enough to be able to exercise at Medium. If it didn’t get your gears turning though, that’s alright, we’d still love you to follow along with our design team at Medium. We expect big things over the next year and it’s helpful just to have community to connect and share with along our journey.

But if you saw this story pop up, started reading, and got more excited the more you read because you saw yourself in our design ethos and in what we hope to achieve, we would absolutely love to hear from you.

Please apply, and let us know what you hope to bring to the table.

Opening a new Principal Product Designer Role at Medium was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

A Bit of Context

Above is a screenshot of a prototype I worked on for mobile purchase funnel iterations. I work as a product designer at Medium, mostly on conversion and retention projects. I had four candidate prototypes for user tests. On one of them, I wanted the fixed payment button to change when users picked a payment method radio button: it would become a PayPal button, a Google Pay button, and so forth.

But… I went through several tutorials and didn’t manage to make other people’s advice work for my prototype. It took me a few painful attempts and some help from Figma power users to crack this. I’m putting this tutorial out there to save other designers the hassle of going through this.

Before we start

If you want to follow this tutorial step-by-step with pre-existing components, you can download or copy my Figma file here. I swapped the fonts and simplified the design so nothing would break while you play with it.

For better clarity, I’ll refer to the radio button module as “the controlling component” and the payment button as “the reacting component.”

Reminder: Figma lexicon

• A variant is an alternative state for a component
• A variable is what allows dynamic prototyping

Step 1: Prepare Your Variants for the Controlling Component

This component is important because it will ultimately trigger the interaction for the reacting component.

In my example, the payment module is my controlling component. I want to create all the states needed for each selected radio-button in the master component.

Step 2: Prepare Your Variants for the Reacting Component

Name your variants for the reacting component’s master. For this component, spelling, spacing and case will matter. Make a note of your choices!

In my example, I capitalized “Card”, and “Disabled”. I also respected the case for “GPay” and “PayPal”. In future steps, I will need to remember those decisions.

If you nested another component in some of your variants, ensure it’s visible in future instances. Do this by selecting the frame around your variants and then clicking the “+” icon, which is visible when you hover over “Properties.”

Step 3: Create a Variable

The variable is what will allow both components to communicate.
Make sure no element is selected by hitting “esc.” Then go to the Design panel of Figma and select “Local variables”.

From there click on “Create variable” and create a string variable for your reacting component (here in my example it’s a button so I’m calling it “Button state”).

Give the value a consistent name with the component’s default state variant — again, spelling, spacing, and case consistency matter. Think like a programmer, otherwise, Figma won’t connect the dots! Ultimately this variant will control your reacting component’s state and allow you to display the relevant variant.

Step 4: Prototype Your Controlling Component

Switch Figma to the prototype panel and work on your master controlling component and its variants.

In my example, I added interactions for radios on all variants to link them to the right state variant while commanding the variable name for the reacting component, so it could also receive the instruction to change state.

To that effect, for each radio button, I created 2 interactions as follows:

• The first interaction, “Change to”, will control which controlling component variant is displayed depending on which radio button is selected. In the property field, select the desired outcome state in the dropdown.
• The bottom interaction is the one that controls the reacting component’s state name. In other words, when the interaction happens, the name of your variable value will be overridden with whatever you write— and guess what, case and spelling consistency matter!

Pro tip: Don’t forget interactions can be copied and pasted, it’s a huge time-saver in this situation as you will need to create them for all radio buttons on all the variants.

Step 5: Bind Your Variable and Your Variant Status

Now, leave your master components and build your screen in a frame with instances of both components. Select your reacting component instance. You want to bind it to your variable by clicking on the bolt and selecting the variable you created. Now this component “knows” that the displayed variant state needs to correspond to your variable name as it changes.

Voilà! Your prototype should work!

But… what happened? Why is it working? When you click on your controlling component, its state changes. But because you bound your variable to the state of your reacting component, your interaction renaming the value of your variable also renames your reacting component displayed variant, allowing it to update simultaneously.

I hope you learned something today! Huge thanks to Alexia Danton (Designer advocate – Figma France) and Romain DAO (Founder—The Cacatoes Theory) for their patience and help, I appreciate you both!

How to Update Two Components Simultaneously in a Figma Prototype was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

You might have noticed a change to Medium’s logo and app icon. Here’s why and how we did it.

Alright, yes, we changed the logo again. Sort of. But not really that much at all. It’s for a good reason, we promise. Hear us out.

This year has been one of the biggest in Medium’s twelve-year history. Throughout that time, we’ve made one thing clear: we believe the future of a better internet is one in which human writing can thrive without ads, spam, or fraud, where you can deepen your understanding of the world around you.

As the state of the internet quickly and radically changed around us, we’ve had a lot of internal discussions about who we are and where we stand. Naturally, some questions about branding began to bubble up. Did Medium’s current logo reflect our new reality, and more importantly, the future where we’re headed? Were we happy with what the ellipsis symbol said about us? Did we want to make a change?

Our answer at the beginning of the year, was a short and simple “no, it’s fine.”

As time went on, the tide started shifting. While some of us (like myself) were neutral, and others truly loved the mark, there was a growing sentiment that the ellipsis didn’t represent what Medium was, at least not as clearly as it could. The symbol was an abstracted punctuation mark, which, to a lot of Medium staff, signaled a vague sense of hesitancy and uncertainty. While beautiful on its own as a piece of design, its meaning wasn’t clear.

Let’s be honest though: Medium has gone through a lot of logos in a relatively short time. It’s a running joke at this point. But as we all know, time moves differently on the internet, and things change quickly. The decision to rebrand isn’t one based on some rulebook or scientific method, but rather, its an emotional signifier of a change in trajectory. We felt that Medium’s change in trajectory and momentum is now.

So what was the next step? Well, it’s clear that Medium does have a legacy of typographic logos. Medium is an inherently typographic platform, after all. So should we just go back to an M? Should we spend additional time and resources designing a new one from scratch? Or is there a simple experiment we could try with what we already have? What if we just dropped the ellipsis and see what happens?

Earlier this year, we started using the existing Medium wordmark, alone, on a few blog images and internal design assets. The wordmark is a great piece of type design, modified from Grilli Type’s beautiful GT Super, which has roots in print design from the 70s and 80s.

Using the wordmark alone is an honest and literal embrace of what makes Medium so special: the human-written (well, typed) word.

The app icon

Great, decision made. Dropping the ellipsis should be a simple change. Anywhere the ellipsis and wordmark are together, we can remove the symbol. In places like the top navigation on web, where we have responsive space, let’s swap the standalone symbol for the standalone wordmark. Easy enough, right?

But what about places like the mobile app icon and our user avatars, where we need something to fit into an enclosed, 1:1 ratio container? Should we just squeeze the entire wordmark into that space?

Well… probably not.

So what were our options? Back in April, we launched custom app icons for Friends of Medium. Although we launched with ten designs, there were a lot of design explorations that centered around variations of the Medium logo.

Along with our “throwback” options using past logos, we wanted to consider what a fresh take on our current app icon could be outside of the ellipsis symbol. Naturally, we tried just using the M from the wordmark. I mean, we’ve used an M before, why not just do that?

The simple M in a box felt a little too reminiscent of our 2017 logo, and reverting to a past version just felt wrong given we’re trying to move forward. The M on its own is totally fine and could work. But is it distinct enough? Does it make you think of “Medium” when you see it? How many other companies are out there using an “M” for a logo? Would it be quickly identifiable on a home screen filled with other apps? And isn’t it just… a little boring?

What if we did something unconventional instead?

By centering the M and allowing the e to get cut in half by the edge of the container, we’re implying there’s more beyond the frame, and more to the story. The Gestalt psychological principle of reification, or closure, lets your mind fill in the rest of the word subconsciously. Most companies center their logo with plenty of padding around the sides, but Medium isn’t like most companies. It reading as “Me” is no accident, either: Medium is uniquely a place for first-person perspectives.

We introduced this design as one of our custom app icons back in April, and we found that a lot of staff had changed theirs to the wordmark. We sat with it for a couple of months until we ultimately decided “something feels right about this.”

So began a collaboration between brand, product design, and engineering to implement the changes across the product.

Making it work

Moving forward, we developed a pretty simple rule for implementation: If the container is 1:1 and enclosed, use the cropped wordmark. Anywhere else, make the full wordmark work.

There are a lot of instances of the logo around the product and around the web at large. Where do we start?

In June, we had an opportunity to experiment with our logo as we celebrated Pride Month. After some design iteration, we landed on an option we loved using the wordmark on its own. After pride, we had a decision to make: would we go back to using the ellipsis, or is this the moment we start to make a real change?

From there, we did a massive audit of every instance the logo appears and made a plan to tackle them in phases over the course of July and August, and finished implementing the changes by August 17th to coincide with the Medium Day keynote.

One of the most unique (and briefly seen) instances of our logo is the splash animation that plays when you open the mobile app. This animation needs to be fast, and not impede any load time for the app. So just like our previous logo animation, we kept it under one second in length. But how should we animate a logo that’s just type? Just… type… just… type…

The future of the Medium brand

We’re excited about what this move means for Medium’s visual identity. It’s an intentional and genuine move toward representing what Medium truly is as a platform for human writing.

Just like with the product itself, we’re continuing to experiment and iterate to find what feels right. Keen eyes might have noticed a shift away from the text-based ASCII-style illustrations from our 2020 brand. We’re embracing a warmer, more human approach on surfaces like our logged-out homepage and the most recent featured images on our blog. More on that in the future. But importantly, we’re moving things around in real-time, piece-by-piece, and seeing what sticks.

This refresh is a small, but confident reaffirmation. In a noisy internet full of spam, fraud, and AI generated content, we believe in the power of words. So we’re putting text first.

You can find our updated logo assets and some guidance on usage here.

About Medium’s new(ish) logo was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

We’ve started a “What if” series on the Medium design team. As a counterbalance to our rigorous day-to-day process, we needed a space to zoom out, experiment, and explore more broadly. We use these sessions to sharpen our craft or tackle an open question together—and underneath it all to have some quality team time.

At our last company offsite, we were admiring a design exploration when someone asked: what if we only used type?

Oooh.

Imposing a constraint like this would force us to get more intentional about type—how it drives visual hierarchy on our interfaces and how it carries a story.

So we took this as our first prompt:

Choose a key surface, like our home or story page, and design it using only type. Release all assumptions of what Medium is today and what it should be.

To prepare, product designer Jon Wong curated a kit of fonts for us and we did some light mood boarding ahead of time.

We gave ourselves 90 minutes for the exercise, working independently first, then opening for discussion. It was fun to see where everyone took it and where we converged.

Here are a few themes.

Higher contrast on Home

We played with bigger type on our front page. The hierarchy could be improved here. What if we greeted readers with a big welcome message?

Note that when we put the type to work we can rely less on color.

What if we applied our wordmark in a bolder way and featured pull quotes right on Home? What if we gave more room to story previews so you can sample more of the story before going there?

Alternate treatments of topics

We have countless topics on Medium. How could we make them more useful and vibrant and connected?

Without overthinking it, we sketched ways to navigate topics. Maybe you could swipe through a picker or select from a dropdown.

What if there was a different theme per topic? Would that be immersive—or distracting?

In this idea, note the details around showing live activity on a topic (1,256 reading) and ways to categorize stories (Technical, Insightful, Comprehensive, Inspiring).

More intentional packaging of our Daily Digest

The Daily Digest is our daily roundup of personalized story recommendations. Three million readers open this email every day.

What are ways we could bring it into our product directly? How many stories should we present? Five? Ten? One? How should we present them and make it easier to… digest?

A few of us applied numbers. By providing spatial anchors and a sense of finiteness, numbering the stories makes the list easier to parse.

What if the Digest was a countdown of five stories?

The ideas that came out of the exercise aren’t fully formed yet, but they reflect things we’ve been discussing as a team. Some of it will seep into our products. If nothing else, I’m hoping to see improved hierarchy on our surfaces.

Learnings

Prepare content for an exercise like this.

We put a lot of intention into prepping a font kit and inspiration but forgot about the content! That took time away during the exercise as we pulled headlines on the fly. Perhaps we could update our content plugin to work for us in these scenarios.

It’s hard to approach your own product with a beginner’s mind.

We gave ourselves license to drop any assumptions, but it was still hard to break out of our conceptions of the current product: how it looks and feels and works. It was tempting to use images even though the constraint was type-only.

Team time matters.

Our team is fully remote and we miss those organic moments of connection we got from an office. This exercise was a small investment in our week that went a long way in sharpening our craft, staying inspired, building a shared compass, and bonding with each other. Quality time builds trust. What does your team do to make time for it?

Thanks to Greg Dougherty, Sophie Aguado, Ellie Budzinski, Nouf Aljowaysir, Jon Wong, Tobias Fried, Harris Sockel, and Brittany Jezouit.

Getting intentional with type was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. 77 Ways to Design the Letter ‘M’

Some good, old-fashioned transit branding inspiration. Reminds me that there are infinite variations possible on even the most straightforward / fundamental design components.

2. Stripe Press

A really thoughtful realization of book browsing in a digital space. I especially love a few details that simulate physical book-browsing: the spines of each book being slightly different widths, and the hover state on the landing page that “pulls” the book towards you.

Stripe Press - Ideas for progress

3. mmm.page

We love a drag and drop website builder! This one is interesting for its mobile-first approach.

mmm.page - Dead Simple, Drag & Drop Websites

4. The new mic.com

A homepage that feels “like an amusement park,” and also just a nice example of using type as a visual asset.

Mic

5. Typography principles

More type! But this one’s a fun crash-course in design fundamentals when working with typography, like alignment and contrast. Scroll slowly so you don’t get dizzy.

Typography Principles

6. Are.na

Speaking of inspiration, am I the only one who hasn’t been using Are.na until now? Yes? Dropping it here in case, like me, you haven’t caught on yet. It’s a super useful tool for cataloging inspiration / organizing your thoughts visually.

Are.na

👋

Design Inspiration, 1.19 was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Below are a few of the tips that have been shared on our team recently.

1. Copy .svg assets from a browser and paste them directly into Figma

(via Greg Dougherty)

2. Type in a color name in an input and get a hex value

(via Greg Dougherty)

The available color names you can choose from are defined in the CSS Color Module, also known as X11 color names. A few fun names you can input include bisque, linen, and olivedrab!

A bit more info on what appears to be the origin of this feature (from George Kedenburg III) on Twitter.

Similarly (via Collin Olan), you can always preform simple math calculations in an input.

3. Double-click the bounding box around text to wrap it to “Auto width”

(via Helena Zhang)

Helena on Twitter: "Thought I'd drop a quick tip on hump days, just in case ya didn't know...🧙‍♀️ 10 second tips 🧙‍♀️In Figma, did you know you can double-click the bounding box around text to wrap it to "Auto width"? pic.twitter.com/hl0aSyRKjH / Twitter"

Thought I'd drop a quick tip on hump days, just in case ya didn't know...🧙‍♀️ 10 second tips 🧙‍♀️In Figma, did you know you can double-click the bounding box around text to wrap it to "Auto width"? pic.twitter.com/hl0aSyRKjH

4. Press Shift + X on an element to swap stroke and fill colors

(via Helena Zhang)

Helena on Twitter: "🧙‍♀️ 2 second tip 🧙‍♀️Press shift + X on an element in Figma to swap stroke and fill colors, à la Illustrator. pic.twitter.com/zqTIrsgX4K / Twitter"

🧙‍♀️ 2 second tip 🧙‍♀️Press shift + X on an element in Figma to swap stroke and fill colors, à la Illustrator. pic.twitter.com/zqTIrsgX4K

5. Ignore auto layout by pressing space bar as you drag an object

(via Helena Zhang)

Helena on Twitter: "🧙‍♀️ 11 second tip 🧙‍♀️Ignore auto layout in Figma by pressing space bar as you drag an object. pic.twitter.com/fjUe8gcAAz / Twitter"

🧙‍♀️ 11 second tip 🧙‍♀️Ignore auto layout in Figma by pressing space bar as you drag an object. pic.twitter.com/fjUe8gcAAz

Figma is loaded with great features, so I’m sure there are a bunch of other useful tips out there. Got a lesser-known tip? Add a response to this story!

A few lesser-known Figma tips was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Have you ever wished you could populate any design with relevant and fresh content with just a single click? Or cycle through a bottomless repository of relevant content to help visualize your designs in as many contexts imaginable?

Bringing dynamic content into Figma means bringing in content that can easily adapt to the context and audience you are designing for and in many cases allow your designs to appear indistinguishable from your live product. When employed effectively you can increase the fidelity and realness of your output leading to more resilient designs and improved feedback when reviewing with teams, stakeholders, and users.

Some examples of how using dynamic content can help:

• Find edge cases and areas where your designs break or don’t look great.
  Example: Long text, missing data, other edge cases.
• Put more realistic designs in front of users or stakeholders leading to more accurate and actionable feedback.
  Example: If conducting research, users may react differently to seeing mockups or prototypes that don’t represent their general experience of your product. If showing designs to stakeholders, more genuine discussions and decisions can be made based on reality and not idealism.
• Build more empathy for users of your product by seeing how realistic content in your product actually looks and feels—the good and the bad.
  Example: It can be easy to ignore the reality of content in your product especially if it’s user-generated. Missing data, poorly formatted text, hideous graphics, etc.
• If done right, you’ll save so much time!

In this post, we’ll take a look at some useful techniques for getting dynamic content into your designs—covering variants, community plugins, and custom plugins. We’ll also dissect the trade-offs of each approach and think through what to consider when using these techniques.

Let’s go! ⭐️

1. Component variants

This may be both the most obvious and least obvious solution for getting dynamic content into your designs. By leveraging Figma’s variant system you can easily add content states to your components for both optimal and sub-optimal use cases.

In the example below you can see how each component has different variants for different content states. The goal here is to cover as many use cases as possible—short, long, good, bad. As you can see, I found a case where the design breaks 😬!

Pros

• Easy to define the types of content you want to see in your designs, including worst-case scenarios.
• Doesn’t rely on plugins which may be difficult to get your team to adopt.
• Everyone using your design library gets instant access to this content and updates.

Cons

• Large upfront effort to set up and tedious to maintain.
• Requires creating a component in addition to a text style, which can be finicky in practice.

2. Content Reel

Content Reel, a Figma plugin made by Microsoft, makes it super easy to populate your design with realistic text, iconography, and images. While it’s easy to add your own text snippets and images, you can also leverage content from the community.

Here’s an example of populating a design from Content Reel leveraging both community content as well as my own.

Pros

• Realistic variety of content and use-cases sourced from the community.
• Small upfront effort and very little technical knowledge needed to start using.
• Easy to cycle through content allowing for easy stress testing of your design.

Cons

• Content can’t be populated on layer groups which requires you to individually select each text field or shape you want to update.
• Content organization is flat making it harder to organize and apply related groups of content to your design.
• Adding and managing can be manual and tedious making it likely for content to go stale.

3. Google Sheets Sync

Google Sheets Sync improves upon Content Reel’s shortcomings by enabling more robust content storage and the ability to populate your designs from grouped content that’s stored in Google Sheets.

Here’s an example of how we could set up a sheet for our designs:

This plugin works by mapping the column names from the Google sheet to layer names in your design. All you need to do is prepend your layers with # and the column name, and voila!

Pros

• Designs can be populated from well-organized and structured data sets.
• Layers can be updated with content no matter how nested they are. You no longer need to select specific text fields to update—you can update a whole design with a single click!
• The interoperability of Google sheets makes this a very versatile option. You can populate your spreadsheet manually, or set up a system to populate it for using SQL or a Google form 🔥.
• Low effort for managing and maintaining a large amount of content.

Cons

• Data can fall out of sync and become stale if not updated regularly.
• The plugin user experience can be confusing for designers on your team unfamiliar with how the plugin is set up and how the data is stored.

4. Building your own Figma plugin

Building your own Figma plugin for populating your designs with dynamic content is the approach that will give you the most power and flexibility — however it’s also the path with the highest investment. If you have access to your product’s APIs, whether public or private, and some coding knowledge (or a friend to help 💪), this approach could be for you.

Medium is made up of stories that can come from anyone or anywhere in the world. Because of this, there’s a huge variance in what we can expect from a story’s content, length, and quality. Our internal Figma plugin addresses this head-on by making it easy to import any published story into our designs.

Our plugin works with specific stories based on a URL, or by pulling from a random repository of stories. The random functionality is great for allowing designers to quickly pull in a diverse set of content without much work.

Pros

• Source content never goes stale and can evolve with the product.
• Powerful and flexible. Ability to encode certain rendering behavior that is otherwise not possible. i.e. truncation, injecting components based on data, etc.
• Extensible. Can evolve over time, based on the needs of you and your team without relying on third-party plugins or dependencies.

Cons

• Can be difficult to build, update, or maintain without coding knowledge or resources.
• Returns on your investment may be low based on what and how the tool is used.

If you are interested in building an API-backed Figma plugin, I’ve put together an example plugin for you to get started. In the future, I plan to do a step-by-step guide on how to build something like this from scratch.

GitHub - mattherzog/Figma-TV-Show-Plugin: Example of a Figma plugin that populates image and text layers from API

Takeaways

There are many ways to get dynamic content into your designs—ranging from super simple techniques like variants or Content Reel to more advanced methods like Google sheets or custom plugins. The right tool for the job really depends on the goals of your project, your design process, and the level of investment you or your team can make. However, no matter what you are trying to accomplish, bringing dynamic content into your designs will not only help you figure out what works/doesn’t work in your designs—it’ll level up the quality of feedback with your team, stakeholders, and users and lead to better designs.

Ready to get started? Here’s a recap of the various tools and techniques introduced in this post.

• Figma’s variant system
• Content Reel by Microsoft
• Google Sheets Sync
• Figma plugin documentation
• TV Show Example plugin code

Do you have other tools or techniques you love using to design with dynamic content? Would love to hear about it in the responses.

Designing with Dynamic Content in Figma was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

On the other end of the spectrum you have Material.io — Google’s impressive and sprawling design system — which feels more like a neatly evolving organism that never rests. So comprehensive that any mutation can be accommodated or has likely already been considered. And then there’s Material You, the latest evolution of Material.io which is probably the most extreme example of flexibility, as it supports user customization.

I think Medium naturally falls somewhere in between — rigid fundamentals at the atomic level, with some flexibility to introduce unique gestures within the system. Those gestures can contrast with the structure and capture the user’s attention. We’ve been focusing on the most basic building blocks: Color, type, icons as the “atoms” that are consistent across all surfaces, while modals, alerts, and first-use instances are examples of surfaces that allow for the flexibility to bring in brand elements as well as design more expressive experiences for users. Flexibility and expressiveness feel especially pertinent when announcing new features and added functionality. We want to make sure we grab the user’s attention and communicate clearly without creating a jarring experience or designing something that feels out of place.

As we continue to refine the product, iteration is inevitable. The questions I’m asking myself are: Should the addition of new features and new surfaces force changes to the system? How can the system be structured in a way that iteration is expected, accounted for, and accommodated? Should every possible instance and permutation be considered? Can it even be considered a system if it contains all? I don’t have the answers but in asking them I think I get closer to the goal: move quickly, make it feel honest, and honor the user.

While thinking about systems in the context of product design, I started to wonder about the history of design systems and how they have influenced how people design, consume information, and communicate with each other. When did system thinking start? Is the merging of systems thinking and art a threshold where graphic design begins?

I stumbled across “A History of Design Systems” by Rune Madsen, which is an interesting and expansive history of design systems dating back to the Early Renaissance. A few select images from the piece below. Captions by Rune Madsen.

Note from Rune:

“This is a somewhat western-centric view of graphic design as a response to the industrial revolution in Europe and the United States. Unfortunately, this history is also heavily male. We will look at more diverse examples over the course of the semester, but this history is important as a shared reference of how technology influences design.”

Below are a few other books and articles I’ve been reading as I work through these questions:

How to See : A Guide to Reading Our Man-Made Environment ←Buy the book

The First Things First Manifesto ←Read online

Typographic Systems ←Buy book

Modes of Criticism 5: Design Systems ←Read online

Systems, Mistakes, and the Sea ←Read online

The Shape of Design ←Buy the book

Thoughts on Design (Systems) was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Continuous user research in 11.6 seconds

He posited that moving away, at least partially, from research’s more traditional “dedicated study” approach would create a deeper understanding of users by creating more space for open dialogue than a study focused on a specific feature or problem area would. He also said it would speed up recruiting time—an attractive proposition for any small research team.

“[Dedicated studies] will almost never answer questions you didn’t know you should ask, reveal hidden truths, and help uncover opportunities to innovate.

Another challenge with traditional, dedicated research studies introduces itself when somebody important in the organization suddenly asks, “What do we know about [x]?” If there was no previous dedicated study done on x, there is no answer to the question, and a researcher would go through the lengthy seven-step process described above.”

Inspired by this approach, we started building out our own continuous research process at Medium.

Like Sharon’s, our goal was to start collecting a deeper understanding of our users, and to speed up the time it takes to recruit for a given project. Getting this initiative off the ground entailed:

1. Creating a research panel, for which we invited readers and writers to sign up to be contacted for future studies, continuous or otherwise. We received so many interested participants that we still haven’t talked to everyone. If you are in the panel, thank you!
2. Scheduling calls with panel participants weeks in advance, regardless of upcoming projects. We keep these calls in specific time blocks throughout the week. (Calendly is our best friend here.)
3. Writing a general, open-ended discussion guide for calls that didn’t need to cover a specific topic.
4. Creating a shared schedule and sign-up sheet so that our designers, PMs, or other stakeholders can see who we’re talking to and attend if possible and/or applicable to their work. (A Calendly to Coda integration has made this much easier)
5. If a topic does need to be covered or a design reviewed, modifying the discussion guide to include relevant questions before a given call.

About a year in, the practice has delivered on its promise.

First, it has cut down on recruiting time for several of the interviews, concept tests, and usability tests our team has done in 2021. Of course, it’s not always an exact match—some conversations do require more specific cohorts and the behavioral data to find them. We turn to the traditional recruiting process to make sure we’re talking to the right users (e.g. readers who follow more than 100 people, writers who haven’t written in 6 months) when necessary.

But most importantly, the practice has better connected us with readers and writers and what’s on their minds, not ours. That’s invaluable. Plus, it’s all too easy to keep your head in your laptop when you’re not in the field stage of a given project, but pouring a cup of coffee and spending thirty minutes just talking with users about reading and writing has become one of my favorite parts of the job.

Have you tried a continuous research practice or something similar in your organization?

Implementing Continuous User Research at Medium was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.