This semi-rabbit hole exploration started this laid-back Saturday morning when I saw that Shotcut has an update that supports JSON animations. That’s when I found out about LottieFiles where you can get free animations that are downloadable as JSON files. It’s interesting to know that I can now add vector animations in Shotcut, however, the latest version of Shotcut (22.06) has a bug that fails to export to my favorite setting which is “YouTube” in MP4 format.
This led me to wonder how I can integrate Lottie animations in Figma through a plugin and there were two things that I discovered for myself:
I can add the vector frame of the Lottie animation in Figma, and
I can enhance my Figma prototypes using GIF animations from LottieFiles
Next week, I have an upcoming presentation to the design team about an introduction to DesignOps. One type of visual approach that I am planning is a static timeline chart that shows how capacity planning works. Then I remembered how Prezi animates their presentations — that’s how I wanted it to be. So I created Figma components that resizes in each frame depending on the zoom focus. Then each frame is connected in sequence through the prototype instant animate.
In Figma, it works in reverse compared to Prezi in the sense that:
In Figma, the frame is fixed, and you define the subject’s zoom and angle
In Prezi, the subject is fixed, and you define the frame’s zoom and angle
Recently, I hopped on to Spotify as an artist. I released several electronica singles under the label Weet Weew. The experience was liberating in the sense that I’ve been putting it off for quite some time and finally got to grapple with it. I got to revisit some old compositions and reacquainted with a DAW (digital audio workstation) of choice: FruityLoops.
The logo of Weet Weew Music to My Ears record label.
The signature
Preparing for a (rather bleak) future when crazed fans would ask me for autographs, I thought I needed to have one. So I practiced using a big round-tip marker and settled with a 0.6 mm-tip pen.
A scanned photo of a notebook with Brian Dys signature.
With a trusty scanner, I scanned it with a resolution of 600 to be able to “blow it up” and properly enhance it. From Photoshop to Illustrator to Figma to its destination, Spotify — it took me around an hour to do all this.
The process
1. Photoshop
We’re using Adobe Photoshop to prepare the material for vectorization in Illustrator.
File → Open To open the material
Image → Adjustments → Desaturate To convert it to grayscale
Image → Auto Contrast To make the paper whiter and ink blacker
Image → Adjustments → Threshold To convert the paper to pure white and ink to pure black; yes it will pixelate, that’s why it’s important to have a high resolution material; some areas might be lost, so you might be working on several layers with different threshold amounts
Window → Channels Copy and paste the artwork into an alpha channel and select it (it will select the white part, so, invert the selection to select the black part)
Window → Layers Go back to the layer while the selection is active
Layer → New → Layer Via Copy To copy and paste the black part into a new layer
Layer → Delete → Layer Select the original layer and delete it
Manual Adjustments Now you have a line art (with transparent background) that is fairly easy to adjust — like if you need to extend or erase some parts
File → Save → .PSD Save the file as Photoshop file
2. Illustrator
We’re using Adobe Illustrator to convert the prepared material into vector. Sure, from the scanned material we can go straight here — I personally see the result is better when we prepare the material prior vectorization.
File → Open To open the .psd file
Photoshop Import Options dialog → Convert Layer to Objects To keep the layers (if any) in the material
Select the Object To select the particular layer we will vectorize
Window → Image Trace To customize settings for vectorization
Object → Image Trace → Expand To vectorize the object and see its layers
Manual Adjustments Now you have vector objects — remove any unwanted layers like solid backgrounds (to make the background transparent); also prepare for the desired artwork and artboard size
File → Export → Export As → .SVG → Use Artboards Save the file as Scalable Vector Graphics file; for handwritten signatures in particular, the default setting for SVG Options will do (it’s a different case when you have images and fonts in your material)
3. Figma
Figma is awesome because you can use it for free and it is web-based (use it alongside Facebook on the other tab of your favorite web browser). Really, this part is optional — it just so happened that my Spotify header image template is conveniently in Figma (you can use Photoshop or Illustor, too).
Right after I uploaded my updated header image to Spotify, I turned to see that my notebook has grown itself some robot doodles, courtesy of Bryce. Consequently, I asked him if we would like to color it in Photoshop and that lit up his face!
A pen and notebook with Brian Dys signature and some robot doodles.
I saw what you did there. The padding between form fields is 24 pixels. Please remove 8 pixels from that gap. Make sure to use the components provided.
Chief of Pixel Police
Well… yeah… it’s your fault. Components are ready-built — why can’t you just use it with all its pre-built goodnes. Why take matters into your own hands and decide 24 pixels here and 32 pixels there. Don’t ever do that next time. If you do, make sure to just move 1 pixel at a time to avoid detection. My brain whispered to me.
BewarethePixelPolice
Can sarcasm be used for fun? Sure can! Actually, I don’t have any beef in using components, no matter how they scream for adjustments. But, hey, we are designers. We design — that’s what we do. We take, we break, and make it new again, in a different light. Better, I hope.
Riding on CSS
And this post is really about answering the question, “Can I really design in my browser?” Because I was thinking of using Figma in creating the visual design of the warning “Beware the Pixel Police”. But Figma also uses CSS, so I thought I’d just go straight up using CSS.
Get the style
Background image via Unsplash Source (it changes every page load)
