Using Figma from a Sketch file

A bad workman blames his tools.
—French/Old English Proverb

Every new tool claims it is a better option for designers and team of developer. But with that comes a bit of a learning curve.

That said, with Figma, they were smart to create an “import from Sketch file” option.

Regardless of tools, when I start a web or mobile design project, I always have what I call my “start comp[osition].” This file contains the most basic components needed for any website. It includes naming buttons, checkboxes, input fields, typography hierarchy, and basic color scheme (primary/secondary, grays, and error/pass).

UI Component

Figma turned all Sketch symbols into components.
N.B. It took some research to figure out how to drag and drop components onto an artboard. There are no shortcuts that I could find.

One thing I like about Figma’s component so far has been the variants. This is incredibly useful for buttons and links, which have various states (default, hover, pressed, disabled).

Typography & Color

The typography styling is my next set up. I know in CSS, typically, there are h1-h6. It is important that I keep this limit with only some variations. I also set up small, regular, and large paragraph sizes. This, by no means, excludes designers and/or project from creating more variations. It is just a starter file.

You can create a team color file which is shared. But since I don’t have a team yet, for my starter file, I define the colors as Primary, Secondary, Shades of Gray, and Error and Pass colors. Most brands typically start with these base colors.

Breakpoints and Grids

I’m still old school when it comes to grid. I like to create grids vs using the auto grid layout by software. This comes from my graphic design background and ability to be able to control designs presented to client.

I have a few breakpoints: 1440, 1280, 1024, 768, 468 (320 is scaled down from 468). I don’t use all the breakpoints for every product. Instead, I work with the client to better understand their market and if they have previous analytics, let the numbers define which breakpoints we should design for.

Timeline and budget will also define the breakpoints from client.

To create the column grids, I use a grid calculator. You can search for one online for your usage.

I used this one for this particular project: http://gridcalculator.dk/

In Figma, instead of Artboard, it is called Frame. You can still use A or F for shortcuts. I like that Figma has predefined Frame sizes. This makes it easy to create new art boards. For each grid for site, it took me some time to figure out how to save grid styles for reuse.

I also like grids for components. These will be incredibly useful for components like sidebar and figure, which I can’t wait to use!

Overall, it took me about 2 hours to get the basic starter file ready based off an original Sketch file. My next update on Figma will be learning how to use prototype (which I vaguely heard is supposed to replace Invision, which could be useful to save money).