Notes by Andreas Nymark Kirby Mon, 01 Jul 2019 00:00:00 +0000 A Swedish graphic + interaction designer. I write about design, digital concepts, interactive experiences, work in progress and everything in between. How I organise Figma components notes/how-i-organise-figma-components Mon, 01 Jul 2019 00:00:00 +0000 Figma is one of the design tools getting more and more traction. Similar to Sketch but with other perks. It includes more powerful prototyping compared to Sketch. I can invite colleagues and clients to collaborate or to view prototypes. There’s an API. So much good stuff. And to me, one of the best parts are Figma components.

In the projects I encounter, Sketch is still the dominant player. To me, Sketch as a desktop app has a better native experience. But with all the features in Figma – and when given the possibility – I choose Figma for starting a new project.

A note about files and pages

Just like everyone else, I have my way to organise files and pages. It’s basically working the same for both Figma and Sketch. I find it hard to locate a specific artboard when everything is organised in one large file.

When I start a project, each project has a library file. Each view or template is a separate file. E.g. when designing a website, I have "Home page" as a separate file.

Figma components

I’m sure someone has a better way to solve things. If you are this someone, please do share.

This is my current way doing things.

As stated above, first of all I create a project library file. In this I’ll store all the components, colors, type style etc.

Include all states

When making a component I include all states. For each instance of this component, you independently toggle visibility for these states. This makes Figma components very powerful. I create a frame for the component. Each state – e.g. hover for a button – is a separate group in the component.

Figma button component, with layer panel showing button states as groups

Figma button component, with layer panel showing button states as groups.

Use an instance for color changes

In the example above I’ve created a button with three states. This will be my core button component. Since I need a few color variations for the button, I create another frame with an instance of the first button. Here I make the color changes needed.

Another Figma button component using the instance from the original button

Another Figma button component using the instance from the original button.

This way, you keep one reference point for this type of button. If you change text size in one, all are modified.

One of many perks with using Figma.

Update 2019-09-04
In his article Mini Tutorials – Working with Figma Button Components designer Micah Bowers describes a similar approach to components. I especially like the part about using layout grid for a component. Very useful!

Avoid CSS font-smoothing notes/avoid-css-font-smoothing Mon, 24 Jun 2019 00:00:00 +0000 Reading the overall good "5 Keys to Accessible Web Typography" by Matej Latin, I can’t help to point out the CSS font-smoothing part where Matej recommends anti-aliased font-smoothing for light text on dark background.
If you’re looking for a lighter text, go for a lighter weight. Font-smoothing will not work for every user, you’re just "fixing" it for the few. It has also been removed from the specification. Yes, you’ll need to load an extra weight. But variable fonts are at the horizon.
Zach Leatherman visualise font-smoothing in his post "Laissez-faire Font Smoothing and Anti-aliasing".

Give 'Em Enough Rope notes/give-em-enough-rope Thu, 18 Apr 2019 00:00:00 +0000
Rope in the shape of two V

A rope in the shape of two V.

A quick illustration for a friend. A rope in the shape of two V. I wouldn’t mind if Illustrator took some inspiration how Béziers curves work in Glyphs app.

Hitting two exciting web trends notes/hitting-two-exciting-web-trends Fri, 04 Jan 2019 00:00:00 +0000 Being listed in an article like "10 exciting web design trends you can’t hide from in 2019" is a boost to the ego. At the same time, trends within web design rapidly occur everywhere. This part of being a trend, where others impulse to blindly follow, makes it less exciting. Focus on the purpose with the design. Be inspired by a trend if that solves your problems.

However, I still appreciate the link and mention Amber.

Logotype for Smiling Workplaces notes/logotype-for-smiling-workplaces Wed, 14 Nov 2018 00:00:00 +0000

With a subtle wink at Microsoft …

In October – in a hit-the-ground-runnin’ kind of project – I helped Smiling Workplaces with a logo. A consult agency focusing on software solutions within the workplace, using products and technology from Microsoft.

Tranemo typeface notes/tranemo Tue, 06 Nov 2018 00:00:00 +0000

Tranemo, a typeface work in progress from Andreas Nymark.

First favourite typeface notes/first-favourite-typeface Fri, 26 Oct 2018 00:00:00 +0000 As far as I can remember, ITC Officina Serif was my first favourite typeface. Until I was 19 years old, I used typefaces that was pre-installed on my Windows computer. I mostly made websites, with Verdana, Tahoma, and Arial as the only tools I could use.

In school, studying design, my views broaden. We read the book Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann, my first introduction to type design. And somehow, Officina Serif caught my eye. And typography caught my attention.

I still have a soft spot for slab serifs.

ITC Officina Serif, by Erik Spiekermann. My first favourite typeface.

What was your first favourite typeface?

20 px vs. 20 px notes/20px-vs-20px Thu, 04 Oct 2018 00:00:00 +0000 So, which one is it? Font size is 20 pixels for the regular weight on each row to the left. And font size on bold is (or maybe should be) 20 pixels on what row to the right?

Font size 20 pixels?

Slab No. 1 again notes/slab-no-1-again Tue, 18 Sep 2018 00:00:00 +0000 About three years ago, I started working on one of my first typefaces. Released on Github as an open source type face, Slab No. 1 got a regular weight. I worked on it regularly pretty much until I attended Type@Paris in 2016. Then I got busy designing other typefaces. Now I’ve slowly started fixing some curves here and there. Looks like it’ll be a total remake.

(Yes, spacing is a bit generous. Work in progress. )

Logo for Sundin Bulk notes/logo-for-sundin-bulk Mon, 10 Sep 2018 00:00:00 +0000 Creating a new logotype for a business is one of my favourite challenges to do. Here’s a recent one I did for Sundin Bulk, a two people haulage contractor. With only a small budget, the client was looking for something simple and professional. Deviating from how the competition look.

The logo should help emphasise a professional and serious company. Something for each employee to cary with pride.

Back and front business card for Sundin Bulk

Business cards – back and front – for Sundin Bulk.

Three sample t-shirts using the logotype for Sundin Bulk

How the logotype could be printed on t-shirts, playing with the length of the logo.