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! ⭐️
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 😬!
Using variants for populating mobile social sharing design
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.
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.
Using Content Reel for populating mobile social sharing design
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.
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:
Medium stories loaded into Google Sheets
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!
Syncing Google sheet with design. Don’t blink.
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.
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.
Figma plugin in action
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.
