Does an engineer need to be proficient in design tools?
I think you can do your job without it, but you can definitely do better quality work if you are more proficient with it.
So in this article, I wrote a list of things that an engineer should know about Figma.
The shortcuts introduced in this article are written assuming using Mac.
If you are using Windows, please change the shortcuts to `Cmd` -> `Ctrl`, `Option` -> `Alt` and it should work.
Use cases
First of all, let’s think about the use cases of Figma by engineers. I came up with the following 3 things
1. Implementing based on the design
2. Generate something from the design (code, images, etc.)
3. Modify the design a little bit by yourself
1. Implementing based on the design
Even if the designer has done a great job with using features such as Auto Layout and Constraint, it would be a shame if the engineer doesn’t understand the intent and ends up with implementing something different.
So I’m going to show you what to look for in a Figma file, and give you some tips to increase your productivity.
Super Basic: Viewing styles in Inspect pane
Let’s start with the very basics: the Inspect pane. The first thing to do is to use the Inspect pane. Select the layer you want to style and select Inspect from the right to see the styling information at the bottom.
You can see following information in this pane
- Color
- Typography
- border-radius
- shadow
- layout of display:flex (if Auto Layout is specified)
- padding(if Auto Layout is specified)
Tip: Cmd-click to select the bottom element.
There might be a time that you want to see the style of the text layer, but it’s deeply nested in frames.
The figure below shows the pain of clicking a lot of frames to get to the text layer.
In such a case, just hold down Cmd and click on the corresponding layer and you’ll be fine👌
Happy to select with one click !
Tip 2: Shortcut to move between layers
There may be times when you want to select the parent element of an currently selected layer, but you don’t want to take your hands off the keyboard.
Here’s a shortcut for that.
- To select a child layer: `Enter`.
- To select the parent layer: `Shift` + `Enter`.
- To select a sibling layer: Tab (or `Shift` + `Tab` to move up)
Once you’ve mastered these, you’ll be able to move between layers without taking your hands off the keyboard.
Tip 3: Giving designers feedback on how to create their designs
Layout information and values such as padding cannot be retrieved unless Auto Layout is used to Frame. It is not uncommon for engineers to have difficulty reading the intentions of the design due to other subtleties.
Since there is no such thing as a perfect design, it is important to communicate with each other first, but if engineers can also provide feedback on the design, I think it will increase the productivity of both designer and engineer in the long term.
Look at Constraints
“does this layer should stretch when the screen is bigger?”
To answer such a question, look at the Constraint.
For example, if you set Constraints to `left and right` like this, you can specify “If the parent Frame extends horizontally, it will be fixed to the left or right!”
So this layer stretches like this as Frame width changes.
To be honest, I don’t think designers thoroughly set this up to every single layer, so it’s just for reference, but it’s good to remember that it might give you some idea of responsive behavior.
Look at the margins between layers.
Select an element, hold down the `Option` and hover over the element you want to see the margin values for. This is a very heavily used essential shortcut! You should be able to do this unconsciously.
View Style
It’s a good idea to use only design tokens, such as colors and typography, that are defined as much as possible to avoid stray styles.
In Figma, you can name and define colors, typography, etc. Style is displayed in the Design pane when nothing is selected.
You can see the style in the Design pane when nothing is selected.
In addition, Figma currently only allows you to define Style for colors, typography, and effects (such as shadows). If you want to define other properties such as border-radius and padding, I recommend you to use a plugin called Figma Tokens.This plugin allows you to define Style for various properties, and can also spit out JSON, which will be useful for development.
Exporting images
You can export an image by selecting a layer and clicking Export at the bottom of the Design pane.
When exporting, you can choose the magnification and the format from PNG/JPG/SVG.
Using the TinyImage plugin
It would be useful if you could minify the image when you export it.
For such case, I recommend to use this plugin called TinyImage.
You can use it to minify images.
The nice thing about this one is that it also converts to WebP.
(Figma’s Export does not support WebP.)
In Figma, you need to be an editor to use plugins. I’ve heard that there are many workplaces where the engineers are only granted viewer access. So let’s ask to upgrade👍
Tip: Run plugins from the keyboard with quick actions
Plugins can be activated by “right-click -> Plugins -> select the plugin you want to use”, but it takes a lot of clicks and it’s hard to find a plugin when you have installed hundreds of them.
In such a case, you can use the quick action function. This can be activated with `Cmd` + `/`. Once launched, you can search for a plugin by its name and execute it with `Enter`.
If you have more plugins, you will not be able to live without it.
Another Tip: Run last plugin
You can use `Cmd` + `Option` + `P` to run the last plugin you ran.
If you use the same plugin again and again, this is the fastest way to run a plugin.
Copy as PNG
If you select a layer you want to export as an image and press `Cmd` + `Shift` + `C`, the image of the layer will be saved to the clipboard.
Then you can paste it with `Cmd` + `V`. This is my favorite shortcut.
View Component/Variants
In Figma, there is a feature to create Components, and there is also a feature called Variants to represent variations of Components.
From an engineer’s point of view, what is nice about this is that it is easy to see at a glance what variations there are in a component.
Also, there is a feature called Interactive Components that allows you to specify transitions in prototypes within Variants.
The reason is that if the properties are the same between the design and the implementation, there is less chance that the implementation will be more difficult to change when the design is newly created or modified.
So it would be nice to have an engineer who is more familiar with the implementation side of things join to implementing Variants on Figma.
2. When you want to generate something from your design (code, images, etc.)
There are many cases where it is hard to manually export something from Figma.
For example, “I want to generate the coding for the appearance part from the design” is a dream of everyone I believe. In fact, if you look at Figma’s Community, you can find many plugins for generating code from designs.
The Figma API and Figma plugin are useful for such use cases.
In this article, I won’t go into the details of the specific APIs, but I’ll give you an overview of what they can do.
I hope this article will help you to recall the Figma API and plugins when you are not satisfied with something.
Figma API
The Figma API can do roughly the following.
- Reading project information (GET only)
- Read file information (GET only)
- Read, write, and delete comments.
It’s basically read-only except for comments, but it’s useful for building a pipeline where you can squirrel away changes to a certain part of a Figma file and push the result somewhere else.
There are two ways to authenticate a request to the API: issue an Access Token or use OAuth to login to Figma and get a secret.
I have a feeling that the former use case is more common, but it’s good to know that it’s possible to create an application with Figma login.
Figma plugin
Plugins allow you to access elements in Figma pages and do things with them.
In contrast to the API, you can
- You can write into Figma file(such as creating layers)
- It can only be executed manually by the user when some file is open.
You can also publish to the community or (if you are using Organization plan) to your team.
The execution environment of the Figma plugin is based on messaging between the part that has access to the Figma nodes (sandbox) and the part that has the UI (iframe).
The latter part, the UI thread, can do basically anything. It can send requests to the outside world, it can login to some service and store tokens, and it can even store files like TinyImage that I mentioned earlier. You can think of it that you can build a simple web service that can run on Figma.
The best way to get a better idea of what it can do is to try it out. If you search for “Figma plugin recommendations”, you will probably find a lot of articles about it.
Documentation of the plugins
3. Modify design a little bit by yourself
When you are implementing based on design in Figma, there are times when there is something missing and you feel like “it’s too much of a hassle to ask the designer to do it and wait for him/her to do it.”
In that case… let’s design it ourselves!
So I thought I’d introduce some useful tips for such situations, but since this is going to be a normal use case of Figma for design purposes, I’ll introduce only what was useful to me when I was a beginner.
Official Figma Channel
If you watch all the tutorials in this series, you can get a general idea of how to use Figma.
Non-Designer’s Design Book
This is a book that will help people who feel that design is like magic to get a sense that design is made up of logic.
It’s a good book to read as a first step to understanding how designers make decisions.
There are many other good resources out there, but I think the above are the best, so start with the above and then ask the designers colleagues to help you improve.
Let’s create a design system.
This is not directly related to Figma, but once you have a design system in place, this use case of “I’ll do a little design revision myself” can be done “by anyone” and “with high quality”.
When you create a design system, design is democratized. For example, when there is a design that is missing, you can make a design decisions such as “this will be used in this context, so I will use this component”.
Of course, not all requirements can be covered, and improvements will be made through operation, but it will definitely contribute to improving the quality and speed of the design process in a long term.
And this design system is meaningless if it is not reflected in the implementation, which will surely need the help of engineers who are curious about design like you.
Conclusion
Figma is gaining dominance as a design tool, and its market share is expected to continue to grow.
I hope this article has inspired you to take a deeper look at Figma.
Have a great Figma life!
