Category: #Design

Week 1: All over the place

↗ Lo-fi version

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!

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])

💬 hi@jagtalon.com

I made a zine in HyperCard

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 followed the instructions on https://cancel.fm/hyperjam/ when I set it up on my computer, but if you want to run it yourself, https://system7.app/ should be the easiest way to do it!

This work was inspired by:

Figma ♥ AutoHotKey

An illustration of a cat with the hotkey "ctrl+zzz"

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!
; Hand Tool
; Trigger: 4th mouse button
XButton1::h

; Move Tool
; Trigger: 5th mouse button
XButton2::v

Switching between tabs

Moving between two tabs.

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:

  1. Presses Ctrl + / to bring up quick actions.
  2. Waits a little bit because the quick actions search bar doesn’t show up instantaneously.
  3. Types in “find and replace” to bring up the plugin.
  4. Presses Return to run the plugin.

It’s hacky, but it works! I also have Component Page plugin mapped to Ctrl + Alt + K and Similayer plugin mapped to Control + Alt + F.

; 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:

; Nudge selection 100px to the top/bottom/left/right
; Trigger: CapsLock+[Up/Down/Left/Right]
CapsLock & Left::Send, +{Left 10}
CapsLock & Right::Send, +{Right 10}
CapsLock & Up::Send, +{Up 10}
CapsLock & Down::Send, +{Down 10}

What’s next

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).

Blocking Facebook Embeds

Screenshot showing the warning message design.

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 content with text saying, "DuckDuckGo blocked this Facebook video"

There's a button that says "Unblock video" as well.
The design showing a blocked Facebook video.

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 login button that shows a warning that says, "Facebook tracks your activity on a site when you use them to log in."

A prompt that says, "Once you're logged in, DuckDuckGo can't block Facebook content from tracking you on this site."
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:

Hello, @DuckDuckGoUX

A screenshot of the Twitter post with text that says: "I like to think about my design work as making the invisible visible, making tools that help empower people."

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!

A lot of websites and apps track your behavior across the web, so I’m really grateful that I’m able to help build tools that fight pervasive tracking and surveillance capitalism online.

The post can be found on https://twitter.com/DuckDuckGoUX/status/1407259247369457665.

Creative Coding: Making Noise

A sample of the noise art that I've been experimenting with. It looks a bit fuzzy and fur-like.

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.

Hello, Creative Coding

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.

I’m enjoying it so far, and I’m thrilled to continue making art through code. I’ll make an effort to blog as I go through the course!

Working on a new Figma Plugin

The interface of the plugin that accepts a link as the input and it shows a preview of the Open Graph media. In this case, it's the image and title from a New York Times article.

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.

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.

Watching: Designing for Trust in an Uncertain World

A screenshot of the video Designing for Trust in an Uncertain World

I’ve been setting aside some of my free time to either watch talks or read books about design. Last weekend, I watched a recorded talk from An Event Apart called “Designing for Trust in an Uncertain World.”

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.

Up Next

Here’s what I’m planning on doing next: