I love the wave-like patterns in these images. I recently made these using <canvas> (which I’m learning about in the Creative Coding workshop that I’m taking), and each shape that you see is a Unicode character.
Their positions are evenly distributed on a grid while their sizes and rotations are generated using the noise2D function. I played around with the different variables (rotation, frequency, amplitude, size, and the number of elements), and it made these wonderful works of art.
I’d love to be able to print some of these so that I could hang them up on my wall.
I’m learning how to draw randomized shapes on the <canvas> right now, and love that I can create beautiful images by simply randomizing the xy-coordinates, the radius, and the color (using the excellent nice-color-palettes).
I can imagine this being useful for infographics, too. The color could represent a data point (like an app), the size could represent a property (like how often it tracked you or how much data it uses), and the xy-coordinates would be randomized in the image.
Now that I’m a full-time designer, most of my days are either spent planning projects in Asana or working on them on Figma. I hardly ever do any programming nowadays, and I miss the feeling of writing code and bringing websites to life.
I’ve been thinking about small programming projects that I could do in my spare time, and I recently ran into a creative coding course on Frontend Masters. I’ve spent a lot of time making websites and creating user interfaces, but I never thought about using programming to create art. The visual aspect of it is enticing, and I love the fact that it’s can be a creative outlet for me.
I’m early in the course, and right now, I’m going through the Canvas API. We’re on the topic of creating grids at the moment, and I’m excited about the idea of creating digital art that I can actually hang on the wall.
During Hack Days last month, Robert and I thought it would be fun to make a Figma plugin that we could use while designing. We had many ideas, but we ended up settling on the idea of a plugin that fetches website metadata. We wanted a plugin that could fetch Open Graph information about a podcast, a song, or a news article, and we wanted to make it easy for people to import that data into Figma.
These are the mockups that Robert made for the Open Graph plugin UI.
Server Code
Since Figma only runs on web browsers (even though it’s written in C++!), the plugins have to behave like any other website. For us, this meant that the plugin we’d have to follow restrictions like the same-origin policy. It means that we can’t just fetch and scrape the website’s metadata from Figma since they likely won’t have the right CORS headers set.
For the Open Graph plugin to work, I had to set up an intermediary server that would scrape the website on behalf of the plugin. I’m not good at writing backend code, but I managed to write a simple server that was good enough for me to work with. You can find the server code on GitHub.
The Figma plugin makes a request to the server. The server then scrapes the website for the meta tags.
The server is far from done, and there are definitely many edge cases that I haven’t come across yet. What happens when a website blocks me? How long should I cache the page? What if there are no meta tags on the page? Are there any security implications for the Figma user?
There’s also the problem of actually running this server. I don’t think I’d want to run and maintain a VPS, so I’m thinking of exploring the possibility of converting it into serverless code. I’m thinking of looking into Cloudflare Workers soon.
Plugin Code
I expected the UI for this plugin to have a fair amount of re-rendering, so I wanted to learn React before jumping into this project. Unfortunately, I couldn’t find the time to learn React, but I did find a wonderful templating library called lit-html. It was easy for me to understand, and it got me up and running immediately.
The plugin code is at the point where it can fetch data from the server and import images into the Figma document. It was a big win for me, especially since working with images is a bit complicated in Figma because of its architecture. I think the next step for me is to make this plugin more robust. What should it do when the server or network is down? Will this run on all major browsers? What kinds of errors will the plugin encounter? I have to address all of these before releasing this to everyone. You can find the code on GitHub, too.
A demo of the Figma plugin.
It was fun!
It felt good to take a short break from design and do some frontend work. I’ve been feeling a bit rusty, but it was good to know that I can still write programs from time to time. I only got to work on it for a week, but hopefully, I can find the time to get this to the finish line.
To me, the gist was about how we can make people feel smart and confident about their decisions. People see many inconsistencies in the world—from politicians who flip-flop on issues to companies who say one thing but do the exact opposite. As a result, people have become skeptical and even cynical. Inconsistency undermines trust, she says.
Because of this, people are starting to look inward: they’re making decisions based on what they believe in. Since people are looking inward for information, maybe we can meet them there, informing and persuading them on their terms. Here are the three tools that we can use to do that:
Voice
Champion familiarity over precision and consistency over novelty.
Example: When Mailchimp released a suite of e-commerce services, they didn’t want to alienate their long-time customers. They didn’t want people to worry and to feel like they would get lost in the shuffle. So they continued to make themselves vulnerable and open and fun, which was consistent with Mailchimp’s way of communicating. They went further and also opened up a store to tell people what they’re learning along the way while using their own e-commerce tools. This brand consistency made people more familiar and confident about the future of Mailchimp.
Volume
Offer enough detail to convey a complete story and make the user feel smart.
Example: America’s Test Kitchen creates a lot of content. They want to empower people whether they’re novices who are trying to get something right the first time, or experts who want to learn more about the history and chemistry of a dish. You can get the short, pithy version, or the long, deep read on a recipe.
Another example: Gov.uk has the opposite problem: too much content. So people end up going somewhere else online to understand gov’t services and information. (I do the same when I’m on IRS.gov. I feel like I need to search online to summarize things for me.) They since reduced the amount of content, getting people to stick around instead of shying away from the official sources.
Vulnerability
Compare, don’t exclude, and prototype in public to work with users, not for them.
Example: Buzzfeed opened themselves up to feedback when they were working on their newsletter. Similar to what Mailchimp did when they publicly dogfooded their own e-commerce product, they made themselves vulnerable to their audience and involved them in the process.
Fast is great for service-oriented designs. 80% of the time, we want to create designs that reduces friction and gets out of the way so that people can get things done.
This is especially important for transactions like donating to a charity or buying a product. The faster you can get a person from start to finish, the better.
Time = friction
When we need slow
The rest of the time when comprehension is involved, we have to slow things down.
We want to focus on absorption not conversion when it comes to comprehension.
Readability = it wants to be read
Legibility = it’s readable
Readability transcends legibility
Some history and observations
There was a service called Readability that made reading pleasant on the web. It removed “info junk” like banners and navigation so that you can focus on the content. The website has been discontinued since, but the open source code is alive in Safari’s Reader.
These days, you can use Mercury Reader if you use Chrome.
There’s an A List Apart article that talked about creating a simpler page on the web. It breaks reading distances into three categories:
Bed (Close to face): Reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
Knee (Medium distance from face): Sitting on the couch or perhaps the Eurostar on your way to Paris, the iPad on your knee, catching up on Instapaper.
Breakfast (Far from face): The iPad, propped up by the Apple case at a comfortable angle, behind your breakfast coffee and bagel, allowing for handsfree news reading as you wipe cream cheese from the corner of your mouth.
Jeffrey Zeldman wanted to create a more relaxed reading experience on the web. He wanted a web that can be read from afar (Breakfast category) and with a relaxed posture. He experimented on his personal website and wrote about it in 2012.
Medium.com came out and it focused on content. Big type. Lots of whitespace. (2012)
The New Yorker also came out with a redesign. “While before, reading the New Yorker on mobile was a tortuous experience of pinching screens and zooming in and out, the new mobile site is one long scrollable joyride. Sharp text at a good size and unfussy navigation make the site a vast improvement on what went before.” (2014)
It has to be branded. When all sites look the same, all content appears equal. Facebook posts are an example: A reputable news site looks the same in a post as a disreputable blog.
It should also be authoritative. It should convey that you put in a lot of time and effort into it.
I recently read the book called Design for Real Life, and I wanted to share some of the notes that I wrote down while reading the book.
Advocates for designing for the most vulnerable, distracted, and stressed-out users. If you make things for people at their worst, they’ll work that much better when people are at their best.
Edge cases = Stress cases. Instead of thinking about these things as edge cases, we should think about them as stress cases. These are scenarios where our design and content fail, and they should be treated like a failing unit test or integration test.
Make a list of potential user scenarios. Here’s an example from the book:
People who want to share
Had a great year
Had a horrible year
People who don’t want to share
But want to relive it
Great year
Horrible year
And don’t want to relive it
Great year
Horrible year
Find fractures in your design by challenging assumptions and finding stress cases.
Make space in your design and accept a broader range of answers to accommodate your users:
Names: “Juan Antonio Gabriel Ancajas Talon,” for example, doesn’t fit in most input fields. Also, what is a real name?
Race: Consider how a generic “Multiracial” field would make people feel.
Design to include: What if your period tracking app doesn’t support people outside of: “avoiding pregnancy,” “trying to conceive,” or “fertility treatments”?
Classic edge-case thinking: “We’re designing for the 90%, not the 10%” or “That’s a difficult use case that I don’t want to think about.”
“For now” can lead to “forever” for a busy team.
Everyday stress cases (this can be people in crisis or something mundane going wrong). Examples from the book:
A person who as received a threat from a previously unknown stalker, and needs to delete or make private every public account as quickly as possible.
A university student whose roommate has declared they intend to commit suicide, and needs information on what to do.
Someone who has discovered their mortgage’s auto-pay has failed two months in a row, and is afraid they’ll be foreclosed on.
A person working two jobs whose only car was damaged in an accident, and is trying to submit incident information to their insurance company late at night, after they’ve finally gotten off work.
Stress cases are also technical failures:
Low battery
Slow Internet
Create personas that are real: Instead of thinking about ideal people who are smiling and have ideal lives, think about people who are distracted, short on time, have bills to pay, has dinner to prepare, and have kids to take care of.
Just like mobile-first design, try stress-first design.
Add contexts in your user journey. Consider who goes to the hospital in the morning, late afternoon, and at midnight. You’d find out that people who visit the hospital at midnight are people who are in crisis because normal visiting hours are over.
A table that represents the time of day. It allows people to contextualize where each persona falls into.
Add intention to designs: Do you really need to ask income level, real name, mailing address, salutation, or level of education? Consider how people would feel: “Why do they need my postcode? Why do they need my gender?”
Touchy subjects: Things that are likely to cause stress or make the reader uncomfortable (not just money, religion, or politics):
Error messages
Warnings
System alerts
Financial and privacy-related updates
Legal agreements
Compassion is more than being nice. It’s accepting people as they come—in all their pain, with all their challenges—and not just feeling empathy towards them but doing something with that empathy. Compassion is not meant to soften bad news or coddling. It’s understanding and kindness.
The premortem: Evaluate the project before it happens to check our biases.
The question protocol: Ensure that every piece of information you ask is intentional and appropriate by asking:
Who within the organization uses the answer
What they use them for
Whether an answer is required or optional
If an answer is required, what happens if a user enters any old thing just to get them through the form
The designated dissenter: Assign someone in the project to assess every decision underlying the project, and asking how changes in context or assumptions might subvert those decisions.
Figma has a new-ish feature called Auto Layout that I’ve been trying to get the hang of lately. What it does is it lets you specify how your designs will adapt once you adjust the contents inside it.
That’s a bit abstract, so here’s a more concrete example: You can automatically set the height of a button to increase or decrease depending on the length of the text within it. This can be useful for making quick changes in the copy without worrying about text overflowing. Without Auto Layout, you would have had to adjust things by hand or install a plugin to get the same results.
As you can see, padding around the button is preserved, and the height of the button increased to accommodate the text.
It very much mimics how production environments like webpages actually work. In fact, they borrow some concepts from the CSS box model to make Auto Layout:
After trying many different approaches, including some rather non-conventional ones, we felt the best way to marry the two worlds was to add a few core concepts from the CSS box model (specifically flexbox) directly into Figma. And by introducing Auto Layout as a property, you have the flexibility and power to apply Auto Layout to any frame, whether it’s in a component or not.
It’s definitely useful for translations, too. Just copy paste the text and the design changes accordingly.
So if you’ve written CSS before, you might be familiar with some of the things that you can do in Auto Layout:
You can make an element take up the whole width or height of its parent.
You can specify the padding around a container and between the children nodes.
You can make a set of elements stack either horizontally or vertically. (Just like flexbox.)
And it doesn’t just work with text. Modifying, adding, or removing any sort of node in a Frame that has Auto Layout—whether that’s text, an image, or another Frame—will change the dimensions of the design.
Auto Layout demo: The design adapts when you change the button and lorem ipsum text.
The downside of Auto Layout is that it’s quite different from how I’m used to designing. It’s a bit hard to master and it’sdefinitelyfrustrating for me to use sometimes. Every so often I get stuck, and I find myself falling back into the warm embrace of constraints.
And because of that, I’m finding that it’s better for me to use Auto Layout in the later stages of the design process. I feel that it ends up slowing me down a lot when I’m using it in the exploration stage.
When I’m converting a design to Auto Layout, I find that it’s best to start from the deepest layers to minimize the issues that I run into. Then I work my way up.
But I hope that this changes in the future. I’d like to use Auto Layout sooner in the process so that I could take advantage of its features. But I guess that will come naturally as I become more familiar with it.
I love that we’re now able to describe behavior in UI designs, and I hope that more design tools follow this direction. I think what I’m looking forward to is how this will make playing around with real data easier. Imagine not having to worry about the design breaking because the text is too long.
There’s seemingly no limit to the number of wonderfulplugins that are already out there for Figma. It’s inspiring but also humbling because it meant that I probably have nothing else to add to that infinitely growing list. It seems that every plugin idea that I can think of already exists in some form.
As an alternative, I briefly thought about making something frivolous, like the Dad Jokes plugin for Sketch. It’s just like lorem ipsum but with dad jokes as placeholder text instead. But I did have a plugin idea for slightly improving copy-pasting content.
What it does is that it fetches all the text nodes within a selected element and organizes them into a table. This should take some tedium out of copy-pasting content since it automatically selects and copies the text for you as you click around. All you have to do is to make a selection and run the plugin.
I’m actually surprised by its simplicity: Under the hood, all it does is run document.execCommand('copy') whenever a table cell is selected, and that copies the selected text on to your clipboard. While it’s not exactly a must-have plugin, I did enjoy learning more about how Figma Plugins work. I’m also glad that writing plugins forced me into the world of Typescript from the very beginning. I admit that I haven’t dealt with explicit types in a long time, but I love that it makes web development so much more pleasant thanks to IntelliSense‘s autocomplete and API documentation.
There’s no need to search for API documentation when you already have it in your IDE.
There’s still a few refinements that I need to do and some edge cases that I need to fix before I could call it done, but you can follow the progress on Github.
Update
Fast Copy is available to everyone! There’s still a lot to do, but at least it’s out there in public.
The other week, I had some time to look into Figma Plugins during “Hack Days” at work. Since I’m familiar with both frontend and design, I thought it would be a good chance for me to take a step back from my day-to-day priorities and work on a hack days project that involves the two disciplines. I had a vague idea of creating a plugin that would help me with some of the grunt work that’s involved when I’m designing mockups.
The reason why I’m particularly excited about Figma is that it’s a design tool that’s built on web technologies. (It’s actually written in C++, but it’s compiled to WebAssembly and runs on modern browsers.) That means that I’m already familiar with the concepts and the tooling around building the plugins themselves. For example, I could use the built-in DevTools to explore and manipulate all the different objects on the page, using it as a sort of visual REPL for changing, say, the color of a rectangle on the page.
Finding objects using .findAll and .findOne
Changing the rectangle’s properties by assigning a cloned object. (Sometimes you can’t directly change an object.)
You can use DevTools to find the rectangles on the page and change their colors on the fly.
It was a bit overwhelming to learn how Figma Plugins work when I first started, so I figured that I start off by playing with basic shapes to keep things simple. It made learning more manageable compared to working on a component that’s filled with many different objects in it.
The objects on Figma have a lot of properties that you can change. For example, you can directly change the opacity of a rectangle.
I found that text objects were reasonably easy to modify, so I figured that I could write a plugin that would translate the text in some of the mockups that I had. Translation plugins already exist in Figma (see both Translate and Translator), but I wanted to see if I could write something similar.
I had high expectations from myself at first: I wanted the plugin to actually work and translate any sort of text that I had. But I couldn’t get my plugin to do network requests to a translation service because I had trouble setting up packages from npm. I kept on getting errors from webpack that I didn’t understand so I gave up and went with mock requests for now. In hindsight, it might have been better if I didn’t rely on npm and made the requests myself using XMLHttpRequest or the Fetch API.
A demo of the translation plugin. It shows the plugin creating a copy of the selected frame with all the text inside of it translated into Spanish.
The UI of the translate plugin where you’re able to select the language you want.
An example of a translated frame appearing beside the original frame.
Another example of a translated frame.
Screenshots of the translate plugin and its results.
The translate plugin ended up working reasonably well otherwise. You were able to choose which language you’d like to translate your mockup into, and it doesn’t overwrite your original work.
The second plugin that I worked on populated the Yelp Review designs with new data. I found it tedious to copy-paste actual data online, so I thought I could solve that by letting the plugin do the hard work for me.
A demo of the Yelp plugin. It shows the plugin creating multiple copies of a frame, all filled out with fresh data.
Unfortunately, just like the translation plugin, this plugin doesn’t actually make any network requests, and it only works on a specific component. So I think the next time I write a plugin, I’d like to create something that pulls in real data. I’d also like to figure out a way to generalize plugins that would work on any component that’s thrown at it—similar to how Microsoft’s Content Reel plugin works.
I’d definitely like to continue working on Figma Plugins in the future whenever I find some spare time. I’m impressed that they’re able to pull off a Google-docs-like design tool that’s cross-platform (you can design on a Chromebook if you wanted to), and that also has a well-thought-out plugin system. It’s an incredible tool, especially for remote workers like me, so I look forward to seeing Figma grow in the years to come.
