I’ve been learning a lot of random things recently. The other week, I signed up for an electronics course on Ohmify and bought a bunch of components and tools so that I could follow along. I’m having a lot of fun trying out the different activities on that website. I just started so I’ve only made simple circuits, so I have a lot of learning to do! I also need to get a drawer for all these components that I got online because it’s a bit of a mess right now.
Touch sensor with a transistor.
Not quite clear on what my end goal is with learning electronics, but I’d like to learn how to tinker more with computer hardware so I’m starting with the basics. Semi-related: I got an open source hardware trackball called Ploopy! I didn’t get the DIY kit so I didn’t build it myself, but I’ve been learning how to customize the firmware. Just last night I got to map one mouse button to CTRL+TAB and then another one to CTRL+SHIFT+TAB. It feels like AutoHotkey, but built-in to the device!
Ploopy trackball and a screenshot of C code to program the trackball.
I’ve also been playing some DOOM II! I initially installed it on the Raspberry Pi 400 for fun (I wanted to see how well it ran), but I ended up getting hooked. I definitely didn’t expect DOOM II from 1994 to hold a candle to the latest iterations like DOOM Eternal.
I bought the game on GOG, extracted it using innoextract, then I ran the WAD file on LZDOOM. It worked like a charm.
A screenshot of DOOM II running on a Raspberry Pi 400.
I’ve been going back to kettlebell class at my gym as well. It’s been a while since I last went, so my stamina isn’t as good as it used to. I’m still struggling in class, but I feel like I’m slowly improving at least. The summer heat isn’t helping either.
Finally, I’ve been continuing to read CAPS LOCK which is a book about how design is tightly intertwined with capitalism (so far I’ve learned: building trust in the government [design of documents and money], nudging people to spend more [design of credit cards and apps], and standards for increasing efficiency [bar codes])
I wanted to create an interactive thing where the player can play as a villain — in this case a surveillance capitalist. I thought HyperCard would be a perfect medium because it has built-in programming and art tools. Plus, it’s fun running old software!
Drawings are all my own except for the little Macintosh illustration. That came with HyperCard.
I worked on the redesign of the dictionary instant answer on DuckDuckGo, and I’m happy that it’s finally out! It was one of the first things that I got to work on as a frontend engineer 9 years ago (!!), and I’m glad that I got to work on it again as a designer.
New look of the dictionary instant answer on DuckDuckGo.Designs of the dictionary instant answer in Figma.
I found out about AutoHotKey last week because I was looking for a lightweight alternative to Logitech Options. My plan was to remap the buttons on my mouse and be done with it. But after going through the AutoHotKey tutorial, I realized that it’s actually much more powerful than I thought. It got me excited because I felt like it could open up a whole world of customization possibilities to me.
The first thing I wanted to do with it was to improve my design workflow on Figma because I use this app quite a bit. To localize my hotkeys to Figma, I put this directive at the top of my Figma.ahk file:
; Look for Figma.exe
#IfWinActive, ahk_exe figma.exe
This means that everything written below this line will only apply to Figma.
Fast toggling between tools
Toggling between the Hand tool and Move tool.
I switch between the Hand tool (h) and the Move tool (v) a lot, but I often find myself looking down to readjust my hand on the keyboard because my left hand would rather hang out around the Ctrl and Alt keys area.
I figured it would be easier if I could switch between the tools with just my mouse. So I mapped the 4th and 5th extra buttons to h and v in AutoHotKey and that allowed me switch tools using my thumb. In AutoHotKey, these buttons are XButton1 and XButton2 so all I did was to point them to h and v respectively.
The v and h keys are now toggled using my thumb. Much easier!
When I’m designing, I often have two tabs open: one file has the components (the component library) and another file has the instances. I move between these two files often which is why I want tab switching to be as effortless as possible.
I know that there are a few ways to switch tabs on Figma, but unfortunately none of them feel fluid to me. After some experimentation, I ended up mapping the left tilt of my scroll wheel to Ctrl + Shift + Tab and the right tilt to Ctrl + Tab. It’s simple, but it works wonderfully. It basically lets me switch tabs with just one finger!
The middle button can tilt left and right so I mapped that to switch between tabs.
; Move between tabs
; Trigger: Left and right wheel tilt
WheelLeft::^+Tab
WheelRight::^Tab
Running Figma plugins
Running quick actions and launching the Find and Replace plugin.
As far as I can tell, there’s no easy way to map a specific Figma plugin to a keyboard shortcut on Windows (you can do it on macOS though). The fastest way that I can think of is through “quick actions” which is triggered by pressing Ctrl + / and then typing in the plugin name. That got me thinking … maybe I could let AutoHotKey run quick actions and type in the plugin name for me?
This is where I started to see the power of AutoHotKey. It doesn’t just let you map a set of buttons to another set of buttons—it can also do any sort of arbitrary action for you! With my setup, whenever I press Ctrl + F, AutoHotKey runs the Find and Replace plugin by doing the following:
Presses Ctrl + / to bring up quick actions.
Waits a little bit because the quick actions search bar doesn’t show up instantaneously.
Types in “find and replace” to bring up the plugin.
; Function to run Figma Plugins
FigmaPlugin(searchQuery) {
; This triggers Quick Action
Send, ^/
; Issues come up when things are typed instantaneously
Sleep 500
; Search for the plugin
SendInput, %searchQuery%
Send, {Enter}
}
; Run the Find and Replace Plugin
; Trigger: Control+F
^f::
FigmaPlugin("find and replace")
return
Super Nudge
Notice the X and Y values incrementing by 100 pixels.
Figma lets you move a selection with a keyboard: pressing the arrow key moves the selection by 1px and pressing the arrow key while holding down Shift moves the selection by 10px. But what if we want to move the selection over a larger distance?
I saw the question on Figma’s forum, and I wanted to see if I can do it myself with AutoHotKey. After a bit of research, I learned that you can specify the number of key presses with a one liner—no looping needed! Here’s an example: if I wanted to hold Shift and press the left arrow key ten times, I can type in Send, +{Left 10}. That’s it. Then I mapped this to caps lock because I almost never use that key:
It’s only been a week, but I feel like I’ve already improved my workflow thanks to AutoHotKey. I’ll definitely be tweaking things as I go but for now I feel like I’m in a good place with it. My AutoHotKey scripts can be found here.
Screencast showing tool switching (using extra mouse buttons), tab switching (using middle button), and plugin launching (using hotkeys).
A few months ago, I got to work on the designs for blocking embedded content from Facebook. This can be embedded videos, comments, posts, pages, groups, and login buttons on the websites that you visit.
This is greatly limits what Facebook can learn from you as you browse the web, and it’s also convenient to unblock if you’d like to view the content. Here’s what it looks like:
The design showing a blocked Facebook video.
Real-world examples of the DuckDuckGo Privacy Essentials extension blocking embedded content.
The login flow is a little different. We prominently show you that the login button is blocked, and we also tell you about our limitations when you do log in with Facebook.
A Facebook login button that shows a warning on hover and a prompt that tells you about our blocking limitations once you log in.
It took a lot of user testing and even more design variations, but we ultimately landed on simple, unobtrusive messages so that it gets out of the way of what people are doing. Super happy about this—I hope you can try it out yourself using the extension!
Some love from users:
Tweets from people who’ve encountered the blocker.
I recently recorded a clip about why I love working as a product designer at DuckDuckGo, and it was just posted on the design team’s Twitter account. I just used an iPhone to record it, so I’m glad that it turned out well!
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.
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.
