Designing with Dynamic Content in Figma

Source: Medium.design - Medium | Read More

4 proven approaches to leveling up your designs and moving faster

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.