Transcript
All right, today's talk is called "Take the Pink Pill," with the subtitle "Why Best Practices Are Dead Ends." My name's Adam Brock, and I'm the founder of Hypermatic, which we'll learn a little bit more about as the show goes on.
The five-bullet overview is that I worked in digital and advertising agencies for a decade. I was a designer and developer, a bit of a weirdo who was really interested in both things when most people kind of aren't interested in them if they're one or the other. I used to co-run the Design Ops Meetup with Chan; I ran that for about a year with him. Then I quit the Design Ops Meetup and my job the week after Figma plugins were announced, deciding to found a startup building Figma plugins full-time.
This is what the Meetup looked like in 2018. We started it as the most dangerous design Meetup in Melbourne—not for the threat of physical violence, but as we'll see as the talk goes along, if you actually want to do anything interesting or important in these companies or your company, the risk of doing so is actually high enough that only a few people in this room would probably be willing to go that far.
Just a quick show of hands: who read the code of conduct policy before arriving? Literally zero. Basically, there was a bit of an ultimatum where we were either going to be bullied into adding a code of conduct policy on the website, which I didn't think would make any difference, or I just said I'd go do something else. I decided to just go do something else. It's no longer the most dangerous, but it is still pretty based.
I started a company called Hypermatic, which used to be called Figmatic, named after Illmatic, my favorite Nas album. I got a very nicely worded letter from the Figma legal team saying I had seven days to rebrand. I spent seven days reading about ten books on branding, did this crazy script where I wrote down all the possible name combinations for the domain, and paid like 20 grand to this guy who owned hypermatic.com. Here we are.
The quickest way to find it is if you just Google "agile is for losers" and click "I'm feeling lucky." Hypermatic.com will be number one. If you're interested, you can read about my decade-long frustrations with the destructive cult of agile infiltrating digital agency environments.
As I said, we build Figma plugins that turn designers into superhumans. Really, the goal is to help designers spend less time crying and more time designing, getting out of the corner or under the table, wanting to go home, and actually enjoying their job rather than doing all these meaningless tasks. We have 12 Figma plugins so far; we'll be at a million users by Christmas, and I'll be giving demos of half of them at the end of this talk. There will be six demos that we'll run through, and I think that'll be pretty interesting if you enjoyed the last talk.
I wear many jumpsuits. This is me in my kitchen, and that's also me in my kitchen. That's me in my kitchen on the right playing Nintendo, and that's me in the kitchen not being on the phone to anyone. The reason for that is we have no meetings, no investors, no agile, no Jira boards, which means there are no distractions. I basically get to do whatever I want all day because I just say no to everything I don't like. It's amazing how much you can get done even as a company of one when you have literally ten hours of free time every day to work on whatever you want. You would never go back if you understood how good this reality was.
My only employee is a fake monkey assistant, a baby chimp called Dennis. On my contact page, you're directed to him. We've trained this baby chimp to help intercept messages; he prints them off on paper for me, expertly laminates them, and hand delivers them to me. People actually address Dennis in the emails and tell him to make sure that the message gets to me. They draw in bananas, send him love letters—this chimp gets more attention than I do. Anyway, my customers love him, but that's kind of the way it is.
Just a quick show of hands: I think we're mostly all designers here. I wanted to get a quick check of just out of my own interest—who talks to real users multiple times a day as a designer? One in the back. I guess we can extend that out to a week: in an average week, would you talk to multiple users? One other guy. What about per month? Would you be talking to real users every month? Maybe six people? Okay, yeah. It's just sort of this weird paradox where we always claim that we're human-centered designers, yet I found that consistently, designers never talk to any humans. In a weird way, that's a little bit depressing. You could almost think of the sales and marketing team being more human-centered than everyone else because they are actually talking to users every day; they understand the intricacies of their problems. The support team probably knows more than any designer actually would, and I think that's a little bit strange.
Being the only employee at my company, I've talked with thousands of Figma users from all over the world over the last few years, and I've learned a lot of stuff. The two key takeaways that are very consistent are that everyone is actually doing their best; everyone is really trying hard to make things work. But also, nobody's figured it out yet. Even if you get a peek into all these huge companies, the big tech companies, nobody actually has it quite figured out yet.
In this section, we're just going to be dispensing some red pills and following the white rabbit into the Matrix. Everyone's familiar with the Matrix: you get to take the red pill and see these uncomfortable truths, or you can take the blue pill and go back to Dreamland, kind of wake up and forget about it all. But if you upscale the 4K Blu-ray, you can see the contents of the blue pill, and it's not something we want to be ingesting. It's this sickly sweet file format that has been lingering around for the last 20 years. Even though we think we've kind of purged it, it's still around just in a different form. We need to get rid of this decrepit ideology that's been festering away in our systems for the last two decades.
What I mean by this blue pill analogy is that we've basically come to accept that drawing rectangles in Figma that we then hand off to be recreated in a different medium is kind of just normal. We almost don't even think twice about it, and I think that's sort of disturbing. If you look to The Truman Show analogy, we accept the reality of the world, which represents a lot of people who are new to the industry. That's just the way we've always done it, so we might as well just keep doing it that way. Unfortunately, I think this is really not going to be a good approach for the future.
Talking about best practices, you can think about it on two ends. At one end, you've got extreme dogma where nothing can be questioned because we know everything is certain; we've reached absolute truths, and there's no point questioning them. On the other end of the extreme, you've got doubt—nothing can be certain. I'm not wearing this ridiculous uniform; you're not actually all here, and nothing can be certain at all. Both ends of the extreme are actually quite dangerous. On one end, you can't question anything, so you don't do anything. On the other end, nothing can be certain, so why even bother? I think best practices have gone way too far over to the dogma side, and we need to nudge it back the other way.
The founder of Pixar describes this when they were working on Toy Story 2, where "trust the process" had become this mantra and was a crutch distracting them from actually engaging with their problems. His position was that we should actually trust in people, not processes. A reason we have best practices is that it's really hard to do new things inside and outside of companies, as you would know and as I know. You barely have any time to do your job. It's unreal how much non-design work or how much non-interesting work we actually have to do at our jobs, let alone innovate or take any risk. The risk factor is what I mentioned before.
You can think about this on a sort of 4x4 grid where at the top you've got the idea of trying something new, but if you fail, you're viewed as an idiot, and you'll probably lose your job. Even if you succeed and try something new, you basically gain almost no credit. Whereas if you follow best practices and you fail, you follow the best practice, and you're basically seen as being unlucky, and you get to keep your job. If you succeed, you also get to keep your job. The risk-reward asymmetry is just totally out of whack to actually even be incentivized to try anything new.
I'm also interested in where these best practices even come from. We know we kind of inherit them and don't really think too much about them. This is a very short list; you can go on forever about this, but I've only got 30 minutes, so I'm just going to briefly cover four of them. I deleted 40 slides last night to try and make this point, but hopefully, we can get there with just one example of each.
We can start with experts. What if they're actually wrong? What if we're just receiving all this wisdom from people we think have it all figured out, and actually, they don't? We can flash back to 2000, the Y2K, and there was this internet article about the internet that claimed it was probably just going to be a passing fad because everyone was kind of giving up on it. It was only teenagers playing on Neopets, and there was no commercial application whatsoever. Newspapers would never go online, music would never go online—all this sort of stuff. The people who came up with this were literally called experts from the Virtual Society Project, a group of people from 25 universities across the US and Europe, who all agreed that the internet was just a passing fad. If you had just bet the opposite of everything they predicted would happen, you would be a billionaire.
This also applies to the industry. We look at industry standards; the industry must have it figured out. One example of this is the Spotify model. Back when I was in agencies, it seemed like every second person I talked to at different agencies was about to adopt the Spotify model, this tribes model. It was just so dumb at the time, but in retrospect, the people who were part of it at Spotify ended up writing an article to clarify it because they got so sick of people copying this model. They actually wrote an article saying, "Spotify doesn't use the Spotify model, and neither should you." Some key quotes from the article were, "Even at the time we wrote it, we weren't doing it." They put out this big manifesto on the Spotify model, and they weren't even practicing it at the time. They finished by saying, "It worries me when people look at what we do and think that it's just a framework they can copy and implement." This is getting at the crux of what I'm trying to discredit about blindly following best practices; in this case, it didn't even exist, let alone there was nothing to copy in the first place.
Just a quick show of hands: who is a Donald Trump fan? One? Okay, are you serious or just kidding? Half-half? Okay, cool. Anyway, one out of 150 is a pretty low ratio. I took bets before, and we both said it would be zero. I'm not trying to stir up debate; I'm just trying to make the point that it's kind of weird we automatically assumed that no one would put their hand up. What's more interesting is the reason why. A lot of what can describe this, when you look back at the whole Trump phenomenon, the Brexit stuff, and all the crazy things that seemed so out of left field, can be explained in large part through preference falsification.
What is preference falsification? It's essentially misrepresenting one's wants under perceived social pressures. This results in a public preference that is actually at odds with private preference, and there's no way to gauge it. It's slightly different from lying, but it's kind of in the same ballpark. This extends even further; there are these famous experiments, the Asch conformity experiments, where they would take five or six people who were all paid actors and then hire one person who had no idea what was going on, putting them at the end of those people. They would do question after question of these basic, obvious questions. The first five or six would answer the deliberately wrong question, saying, "Oh yes, that's definitely line C." They would all say it, and then you get to the guy at the end who has no idea what's happening. They did this time and time again, and 75% of people knowingly gave at least multiple wrong answers. The reason they gave was they just wanted to fit in; they didn't want to cause any trouble or be seen as stupid. They actually went against what they could see with their own eyes just to fit in.
I think there's this really weird dynamic with groups where you go from the wisdom of crowds to the madness of crowds very quickly. This also extends to innovation. We hear this best practice: it's best practice to get a bunch of people in a room to innovate, as if sitting down for 30 minutes with 12 people is going to lead to anything. The reason for that is there are all these factors at play that totally derail and sabotage it. You've got a natural authority hierarchy where there are junior people, senior people, and the CEO might be there. The meeting is always dominated by a few people who just won't shut up and won't let anyone else talk. This is especially common if there are guys and girls in the room; some guy will just overtake and won't let anyone else talk. There's the fear of social rejection, as we just said, and bike shedding, which is the idea that meetings always gravitate towards spending a disproportionate amount of time on the most trivial. They'll be talking about building a nuclear power plant, and it's an hour meeting, and they spend the first 55 minutes talking about where to put the bike out front. That's where the term comes from.
What ends up happening in these groups is you actually end up with the average opinion of the average person, and that basically leads to this, which is just dog. Look at it; every website at some point looked like this. You can't even tell if you removed all the logos; you wouldn't know which website is which. They have absolutely no brand, no sense of self-identity, and this is a reflection of what happens in these brainstorming groups.
One of the strongest things I'm convinced of is that a lot of this can be described through this innate mimetic desire that we all share. There's this famous author, maybe not so famous, but René Girard, who discovered that most of what we desire is actually mimicked, not intrinsic. Imitation plays a far more pervasive role in our society than anyone has openly acknowledged. What happens is people are just intrinsically on autopilot to desire what other people are doing, leading to things like this. You get the exact same Instagram photos, Airbnbs, and interior designs that all look identical. Car manufacturers that used to be defined by what country they were made in now all look exactly the same. Cafes all look identical, and even brands have fallen into this trap. These are toothbrush brands; every single brand up here is a different brand. Are you to tell me that every single one of these brands got together, came up with these unique strategies independently of each other at different periods in time, and all deployed them at the same time? There's just no way; they're all copying each other, and this happens ongoing, every day.
I think this diversity rhetoric—maybe this is also a best practice that we need to question—does getting enough war veterans in the room with enough other people representative of the overall population actually lead to innovation? It's this uncomfortable question we sort of ask, but I think in a way, the rhetoric around this is distracting us from all these forces that are actually pulling us away from being able to innovate. I don't think it's as simple as this.
If you were to think about what is actually the opposite of diversity, I think you would pretty much land on uniformity. You've got this weird sort of factory that's producing copies of copies of people, leading to this situation where we're actually getting the opposite of what we want. Instead of getting a bunch of people who all think differently, we end up getting all these people who think exactly the same.
If we take some copy from one of the most prominent UX boot camps, they claim to create the best practices and innovative teaching approaches of their entire expert network, which sounds amazing. What are those best practices? Well, taken from this week, it's getting hands-on experience with leading industry software like Sketch and InVision. This is all terribly broken, and I think we've distracted ourselves with all these things to try and convince ourselves that everything's normal. We don't really have to do much; we've kind of settled on all these absolute truths. There's really no point in doing much more. We've got all these best practices that we've learned in university and in the workplace, and we've got group consensus on everything, so there's really not too much to worry about. But I think we really do need to get back to the future.
I believe that the way out is to accelerate. We need to go back to the other side; we need to get away from the extreme of dogma and go back to the side of doubt where we can start rethinking some of these things. Everything is not certain; we're not at the end of history. I think React kind of proves this. If you remember when React came out, there was a very strong visceral negative reaction in the developer community from it. It was seen as crazy, and this tweet is kind of a joke at what they were doing when they announced it. This person said, "Facebook, rethink established best practices," basically making a joke of React. Now you'd be struggling to find a developer who didn't agree that that was obviously the right direction to move in.
I was trying to talk about this in 2018. I gave a talk called "Insanely Inevitable," where I was saying that machine learning, AI, and automation are actually super underestimated in design. I remember talking to people afterward, and half of them were laughing at me; half of them didn't quite understand what I was saying. But now I think it's kind of happening. I made the joke at the time that we really haven't done ourselves any favors to avoid the machines taking over when we basically just design the same stuff over and over. All that's changed since then is we just copy different things.
This is the linear style that Linear kind of came up with. Every single tech platform now just looks like Linear. They obviously independently came up with it in their own group settings when they were innovating, but they all happened to ship it at the same time. It was just that Linear kind of got unlucky with the timing. Even the reactionary movement to this sameness, the brutalist ideas, in theory, kind of work because you're doing the opposite. But you can't just add a negative sign in front of what we're not happy with because what happens is they also copy each other, and they all look the same. Again, this sort of mimetic desire is just inescapable.
I think AI will essentially be a forcing function to upend some of our best practices. This stuff is not going anywhere, and we can already see based on the very early concepts that it's going to be a real game changer. I've just got one example here, which is Galileo AI, developed by a few people from Facebook. They describe an app that they want a UI for, and this is creating real Figma designs and also code. In this sense, they're describing an onboarding flow with certain fields, giving you the UI. This is all being designed automatically, and this is a reading app featuring a certain author and a list of their books.
I think we don't need to panic about this, but I think it is worth acknowledging that we are not at the end. This stuff is coming, and we can't just be complacent and expect that nothing is going to change. This is also the worst that AI is ever going to be. Don't make the mistake of trying to cope with what the future might hold. I've got this article saved from last year where this illustrator wrote an article titled "Why AI Will Never Take My Job as an Illustrator." He was showing that his drawing on the left of the illustration and the illustration that the AI came up with was obviously a piece of junk. It's just never going to get better. This is obviously as good as it's going to get; therefore, I can assure you it's impossible to create a professional and useful image from a text description. Failing to see that progress is not linear—in this case, it was actually exponential—six months later, you could do this.
You can clearly see you can do illustrations, interior photo-realistic shots, photo-realistic portraits, grayscale sketches—all this crazy stuff. The point is that you have to think past the immediate and think into what the exponential version of what we're looking at is. Again, I'm not going to go through all this; this is really just a bit of a brain dump of what AI could be applied to, and it's really just everything: UI design, documentation, vectors, design to code, accessibility, video and audio generation, self-improving A/B tests that you can just let loose, user testing and insights, summarizing things, design linting, translations, localizations—all this sort of stuff.
Now we come to the conclusion of the talk, which is the demo portion where I try to convince you to take the pink pill. All this AI stuff is here; it's getting tons of investment, and there are lots of very smart people working on it. It's not here right now, but it's trending in that direction. In the meantime, this is some of the stuff that I've been doing. I believe that the distance between design and production should actually be zero. None of this "bridge the gap"—we don't need more red lines, we don't need diagrams of where the paddings need to go. No developer likes that stuff; just give us the code. We don't want to do that.
I think we should never send a human to do a machine's job. What I mean by that is not this idea of replacing jobs or taking over designers' jobs; I don't agree with that at all. I think AI and computers can be very complementary to what we need to do as creative people and as developers. We just want to take the parts that make sense for a computer to handle and let humans do the creative side, working in a complementary fashion with each other.
As I mentioned, it's basically demo time, so we're going to go into Super Saiyan mode and look at half a dozen Figma plugins that I built. The first one is Pitchdeck. This is where you can magically turn your Figma designs into stunning presentations or export them to PowerPoint. That's what I'm running now, and I can prove it to you because it's the only presentation software on the market where you can use a Nicolas Cage laser pointer, or I guess you could use Doge, or this one—it's kind of bad; I kind of like that one. Anyway, there are a whole host of different features to play around with.
I was also going to use my phone as a remote, but the gloves don't really work with it. This is going to be a quick demo of how it looks in Figma. I'm going to get a bit meta and show you the presentation I designed in Figma, which is this presentation. You can do things like apply animations to it; it's just kind of like using Keynote and Figma almost. You can use all of your existing designs in Figma, embed videos, and basically embed anything. You can embed websites, Canva, and Figma prototypes. There are a lot of supported embeds that you can drop in, adding a bit more flexibility.
You can see analytics of your presentation. This is my web presentation that I'm presenting now. You can see exactly which slide was viewed most and how long was spent on them—lots of interesting stats you can look at. Here, you can either upload it to a web presentation or, in this case, I'm going to show you how to export it to a PowerPoint file. You can also export it for Keynote, Google Slides, PDF—all this sort of stuff. Just taking the same design from Figma and automatically doing all the work that we want a machine to do instead.
It's just exported the PowerPoint file, so I'm going to open that up now, and you can see it's a one-to-one copy of the design that we exported from Figma. This is fully editable, so you can jump into the text layers, edit content, and if you're working with teams who don't use Figma or can't use Figma and require PowerPoint, you can do all your design work in Figma, get all the benefits of that, and then send it to people on your team—sales team or whoever—and they can actually make content updates in PowerPoint, Google Slides, or Keynote, whatever they prefer.
That's something you can do using that Figma plugin. I think this is almost finished. You can obviously change fonts and stuff like that. All right, that's one down. Number two is Bannerify. This allows you to animate and export production-ready banners from Figma to either HTML, GIFs, or video formats. We'll jump into that one as well. You'll notice that these are all very agency-specific because that's my background.
Again, you can use your designs. I've just got a bunch of Figma frames all designed, and you can animate the banners directly in Figma using the Figma plugin. It's a full timeline; you can jump into any layer, bulk apply animations, so you don't have to go layer by layer. It's pretty quick if you want to make changes to animations, and there are tons of presets. You can also create your own totally custom animation timelines as well, but in this case, I'm happy with it, so I'm going to export it for Google Ads. There are about 20 different platforms you can export it for, with tons of different configuration options, but I'm just going to download it now, and unzip that. It only takes a few seconds to export, and this is production-ready code—all the click tags, all the CSS, all the JavaScript, all the HTML, all the image assets. You can have nine banners; in this case, you can have 900 banners if you want. You can export as many as you want in one go.
If we open that up in the browser, we get this neat preview page that we can send to clients so they can look at every single banner in one view. You've got production-ready HTML banners exported from Figma in about three seconds. The neat part about that is, if you've ever worked on a banner campaign, they have about 7,000 rounds of changes. If you're a developer on the other end of that, it's pretty easy to make changes in Figma, as I just did; you just make a color change. But if you're changing layers around, removing stuff, it's a bit of a nightmare for a developer to then go in and re-export all those assets, figure out the new CSS positions, elements, all that sort of stuff. Now I'm just re-exporting the entire banner campaign again with that color change, and you can see how quickly it is for making iterations on your banner sets. Yep, this is the new set with the purple button. Again, we basically animated, exported, and changed and re-exported a banner campaign in about 90 seconds flat. This is extremely useful if you're doing banner campaigns at scale and don't want to bother your developers with coding these things.
The next one will kind of alternate between code and non-code stuff. This one's called Commentful. It allows you to supercharge your Figma comments and gather feedback from stakeholders without them needing to use Figma. It does a few different things. The first thing is it allows you to take your native Figma comments and put them into a custom Kanban board or Trello-style board. You can actually put them in swim lanes, see where all the comments are at, and add to-dos to each column, assigning them to people. When they go to their own to-dos tab, they can see what's waiting for them for each comment, and it marks that off on the overall board as well. You can actually see the status of every comment, and then you can put them into your own totally customizable swim lanes to keep track of things.
You can also create review links. These are shareable links that you can send to stakeholders or anybody, allowing you to upload your designs in a static way where it's not the live Figma design—it's a snapshot in time that you want to get feedback on. All you need to do is optionally personalize the link, send it to the reviewer, and they can just drop it into their browser—no accounts, no logins, or passwords needed. They can leave comments directly on the design. You can format the comments, drop them anywhere you want, and submit them as you'd expect. The slightly different part is that you can also leave specific types of feedback. You can automatically click on a text area, change the text to whatever you want to give feedback on. In this case, we're clicking on the layer; it's automatically populating the text. We just make changes to it, submit the change request, and the same is true for images. If you want to swap out an image or tell them you want a new image, you just drop that into the area that you've clicked on the actual image layer.
When we go back to Figma, all of that feedback is coming into the Figma plugin in real-time, in context. You can see exactly what all the feedback is; you can interact with it, reply to the comments, and the stakeholder can have a bit of a dialogue with you. You can do that vice versa; it's all in real-time. If we jump back into Figma, the cool part is you don't actually have to manually action any of this feedback because it's context-specific to the design. All you need to do is click on one button that says "Update in Figma," and it'll automatically make the text changes for you. You can just go down and knock out all of your content changes from clients or stakeholders with one button, and that'll automatically update content. You can do the same thing with images; just click one button, and it will automatically apply the requested images. That'll allow you to easily knock out any client feedback, really putting the onus on them and you not having to trawl through 50,000 Word documents with assets or screenshots or printed off and then rescanned in as JPEGs or something.
Anyway, that was the Commentful one. This is a fairly new one; it's actually still in beta. I kind of shipped it; I always ship stuff that I'm not quite happy with. This one's about 5% of where I eventually want to get it to. This is just one feature at the moment. This eventually will just be a very small portion of the Figma plugin, but for now, it allows you to inspect your Figma layers as HTML, Tailwind, React, or Vue code with one click. You can load up your designs again; if you're a developer, you don't want to have to get handoff documents. Just click the element, get the code, and you can also preview it. If you want to preview it in line, you can see what that's going to look like on different sizes. You can jump in there and check out the HTML before you use it. Again, you can select whatever language you want. Just jump in; if you need React, select React, copy it to your clipboard, drop it in. If you want to download the zip with any image assets, you can just do that with one click as well. As I said, this one's very early, but I think it's going to be quite useful once the full version comes out. This is also a cat doing all of this, so it's very easy to use—even a cat can do it.
Okay, that was Weblify. The next one is called Convertify. This is a Figma plugin that allows you to import and export designs into Figma and out of Figma with one click. I'll show you just three formats; there are a bunch of different formats you can select. In this case, I'm going to export this particular design to Adobe XD, which you'd be surprised how many people need to do this. This will convert my Figma design and give me an XD file. It took about three seconds, and we can open that up. We've got all of our layers, all of our structure, and all of the content intact. We can now take that into XD and continue working on it there for whatever reason—working with other clients and stuff. The same goes in reverse; if you need to import a design from XD into Figma, you can just select the import option, drag your XD file into there, and this also works in reverse. You can import your XD layers into Figma, making that an editable file that has the exact same layers, the exact same structure, and everything can be edited in Figma.
This can be really useful. It does other things like letting you export Figma designs into After Effects, so if you want to do motion design, that can be handy. You can import Google Docs; you can do all kinds of different formats through that one. The last example I'll show you on this one is just importing an Illustrator file. We got this AI Illustrator Adobe Illustrator vector file of these bears; we want to get them into Figma so we can actually edit them in there. Once again, we'll just select the import Adobe Illustrator option, drag and drop that in there, and in about two seconds, you get your fully editable vector from Adobe Illustrator. You can go in there and really do whatever you want with it; it's just a normal vector layer at that point.
Okay, this is the last one. I rebuilt this Figma plugin three times before it ever came out because it's a tricky one to get right. I could probably give a whole other talk just on this one Figma plugin. I think about 80% of my support is for this Figma plugin—not because of the Figma plugin, but because every email marketing platform is just a nightmare, and this integrates with all of them. I get every customer of these platforms emailing me, but it's the Figma plugin that I'm most proud of and solves the pain that I most hated when I was working in agencies. Emailify allows you to design and export responsive production-ready HTML emails from Figma. I'll show you what that looks like now.
I've started working on an email here using Emailify to design this Airbnb template. I've got a whole bunch of components that I can quickly spin up. You can also totally do them from scratch, but this is just a really quick way of doing it if you know what layout you want. All I'm going to do is modify this; I'm going to drop in some new assets. I'll replace some of the images, apply some styles to it, and you can style the elements as you normally would in Figma. Everything is auto layout by default, so you get a lot of that benefit for free. I'm just going to copy in some content as you normally would, and of course, you can style it in Figma as you normally would. Then we're also going to add a CTA. If you want to add a button, you can do that with one click. There are a ton of different components and primitives you can add really quickly; again, all auto layout.
All I'm going to do is change the color, apply some styles, and you can obviously brand this to whatever your brand is. There's no opinionated design imposed on you; you can basically design whatever you want. We can see what that looks like inline. This is real HTML being shown here. I realized I didn't show it, but you can actually change the viewport size. It defaults to iPhone to force you to think about what it's going to look like on mobile; otherwise, no one ever will. You can do that and change the size to desktop or larger widths as well.
In this case, we also want to add a couple more elements, so we're going to drop in the typical app store download. We'll drop that in and style that up. You can see this has been going for maybe 60 seconds, so you can see how quickly it can be to do this. The cool thing is once you've built these out, you don't need to rebuild them. The Figma plugin has a component library built into it, so you can actually go to the component library tab and load up all the components you've already designed and use them with one click in the same sort of UI as well. That's basically what it looks like there.
Now that we're happy with it, we're going to export it to HTML. You just click one button; you can either export it just to an HTML package or, as I said, upload it automatically to like 20 different email platforms just using APIs that you paste in, and it handles it all for you. Again, you get this cool preview page; all the assets are exported, obviously, and uploaded if you want to. You can send this preview page, so you get a view of what it looks like on the large screen and what it looks like on the small screen. There were some mobile overrides applied to the font; that's why it looks bigger on the larger one and smaller on the other one. You can send this to a client, and they can see what the real HTML looks like side by side if you really want to. There's also a feature to export it to PDF, which takes the rich HTML and exports it into a PDF. I don't know why people need to do this, but they apparently do, so that's also in there.
Those are the demos. I would just finish up on the last shot of The Truman Show. Sorry if you haven't watched it; you should watch it—maybe watch it tonight. I conclude by saying that best practices can be useful. We've touched on why they exist, why they can be useful, and why they're so hard to change, but they certainly aren't always true. I think we really need to get back to being more on the side of questioning them rather than blindly adopting them. To take the famous Apple marketing line, I would say we really need to think different. Thank you.