Check out a free preview of the full Figma for Developers, v2 course

The "Content Plugins" Lesson is part of the full, Figma for Developers, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates plugin called Content Reel that can be used to generate fake content for designs. He also shows how to use the plugin to generate avatars for a mock design, explaining that it can also be used to generate fake text and other types of content.


Transcript from the "Content Plugins" Lesson

>> So, you'll notice that I have avatars and that I guess as a joke for an Instagram clone, did I decide it was gonna be people taking pictures of their food? Yes, but a lot of times when you are building out a mock for a given design, there is the important stuff which is the layout.

And then there's the unimportant stuff which is the fake content. And because we're human, most of the time we will hyper fixate on the unimportant stuff at the neglect of the important stuff. So I'm gonna show you a cool little trick and plugin for making your life slightly easier, so we can grab anything.

In this case, we're gonna make get like 3, 4, let's make 5 frames. And let's say these are eventually gonna be avatars, right? And so that's a tailwind trick you just make the border radius ridiculous and circle, cool, that's how tell when does the rounded things, it's just that literal.

>> Can you do percentages in there, do 50%?
>> I think you can, but I think it turns it into numbers, right? The math works, I mean in this case, but it will turn it, you saw when I did 100%, I don't know. I was 100% the current value is trying to do math to I don't know what happens if I start normally I think about zero 100% would be 100% zero which is zero.

But like for something that's small, like five doesn't work too, but we'll go with the value that I know works in almost all situations. And then we can go up to these Plug-ins up here and there's one by our friends at Microsoft called Content Reel. And this is super useful because you can either generate if you look there's fake text, right, that's auto like just libraries of like fake stuff that you can fill in there so if you're doing addresses or whatever.

But there's also images where you can get like avatars, there's one for food as you can imagine, that's where the food pictures came from. I find it slightly offensive that as far as I could tell, all the maps are of the San Francisco Bay Area, I don't like that.

And so we can click Avatars here, and I have five frames selected I can hit apply all and it will randomly fill in five of those avatars, right? So if you do need just some like generated fake content for a design, it's free, it's great. You don't need to sign in, you only need to sign if you wanna add your own stuff.

But then you can add your own library if there is like unique stuff to whatever design you working on. But that is where all of this fake stuff comes from.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now