Figma, White-Boarding, and UI Design

Purpose

Figma is a drawing program that allows collaborative editing and runs on all operating systems.

It was originally intended for UI Designers, but it is also an effective general purpose drawing tool.

We use it for:

The diagrams and UI slides produced in Figma are often included in regulatory documents.

In this lesson, we have you learn about some core features of Figma. We also ask you to practice drawing a few diagrams.

White-Boarding

We hope, with a few hours of use, you will be fast enough with Figma that you can draw basic diagrams in real-time with other developers or even on client calls. In other words, Figma is a distributed team’s equivalent of a powerful engineering tool—the whiteboard. To reach this level of proficiency, it is useful to memorize some of the most commonly used keyboard shortcuts.

While you may be tempted to continue using your drawing program of choice, we really encourage you to use Figma instead. Collaborative white boarding is more effective if everyone is a strong Figma user.

Architecture Diagrams

Figma could be a better diagramming tool than it is. For example, it would be nice if arrows could “snap” to the sides of blocks so that when you move the block, you don’t also need to move the arrow.

We have used a variety of text-to-diagram tools over the years; in our experience, they can often get you 90% of the way there, but are very difficult (if not impossible) to get to a nice diagram in the end. Its too bad, because version controlled text files are great.

Most of the other diagramming tools (e.g.. draw.io) don’t allow real time collaboration. This isn’t an issue on all projects.

Finally, while Figma isn’t the best at diagramming, it is okay with some practice. Furthermore, it is very helpful to have one tool that is used for white boarding, UI design, and diagrams—often by the end of a white board session you have 50% of your diagram completed.

Thus, while we recognize Figma’s shortcomings with respect to diagramming, we still recommend using it over other tools in most cases.

UI Design and Prototyping

Figma prototypeing is one of the most cost-effective ways to gather requirements UI projects.

Once you are proficient with Figma, it is almost always more efficient to

  1. Iterate on a UI in Figma with the client
  2. Implement the agreed upon design afterwards

than it is to iterate on UI design in code directly. This is true for new projects, but is also true when adding UI features to existing projects. For this reason, we often maintain a parallel copy of the UI design in Figma with the real design. Often the two slowly become out of sync as changes are made. When we do a design update, we pull the two in sync.

We don’t typically implement every page and every state in Figma, but we have seen people more often err on the side of too few UI states rather than too many! For example, it is a good idea to include at least a few error states—but not usually necessary to draw all of them.

A killer feature of Figma is that clients can write comments within the diagrams. Also, they can even watch us implement UI designs in real time (commenting as we go). This sort of immediate feedback makes the design iteration process much more efficient. The option to respond to comments by creating a thread provides another aspect that improves the collaborative design process.

Hiring Designers

Sometimes our projects require more design expertise than we can provide. When we encounter this situation we hire a designer to help polish our UI. In this case, our initial wire-frames in Figma take on a different purpose. The purpose of our wire-frames in this case should be to layout the position of UI elements and the user flow of the project.

It is helpful to create a draft of a wireframe before hiring a product designer because it cuts the designing cost and reduces communication overhead. Design costs are cut when we make a draft of a wireframe because the designer has to spend less time conceptualizing the project and, instead, can just refine the aesthetic. Additionally, when we make robust drafts before sending them to a designer, it cuts the communication overhead because there’s less room for interpretation and thus less questions that need clarification by our team.

In general, we don’t expect any developer to be an expert in design. This is why we occasionally hire designers. That being said, knowing enough of Figma to conceptualize projects for our clients drastically reduces our project costs and outsourcing needs.

Learning Material

Watch the Take a Tour video.

Read the article about view settings.

Read the article about the layers panel on the left side of the Figma UI..

Read about the properties panel on the right side of the Figma UI..

Spend some time looking through Figma’s keyboard shortcuts.

Many of the tools in Figma are similar to other drawing programs, so feel free to skip this if you want: Read about some useful Figma tools:

Watch this video about constraints.

Read the Figma best practices to learn about components and styles. Components are an essential feature of using Figma effectively. Here is a quote from the intro of this sequence of articles:

Two of Figma’s most powerful features are components and styles. They let you reuse UI objects and attributes so you can maintain designs systematically at scale. When you need to change something, like your brand’s link color or home icon, you can make the change once — in the original master component or style — and watch it update across all your designs.

Figma components conceptually map to React components. Like React components, they save a lot of duplication and make it much easier to keep large Figma UI documents consistent.

Exercises

We recommend that you write your response to each question, before revealing the provided answers.

Exercise 1

Install the Figma app (you have to use the web version on Linux) and sign into your Innolitics account.

Open the file for the Innolitics website. Write a comment about some part of the website design that is out-of-date with the real website, or could be improved. Confirm you can see the comment show up in Slack.

Exercise 2

Write down ten keyboard shortcuts that seem useful on a sticky note and place it at your desk.

Provided Answer

Here are David’s favourite keyboard shortcuts:

ALT-click-drag Make a copy of something
SPACE-click-drag Pan the field of view
⌘-SCROLL Zoom in
f Switch to frame tool
⌘-\ Hide the UI (especially useful when presenting)
l Switch to line tool
SHIFT-l Switch to arrow tool
r Switch to rectangle tool
t Switch to text box tool
o Switch to oval tool
⌥-⌘-k Create a component from selection
⌘-g Create a group from selection
⌘-SHIFT-g Break the selected group

Exercise 3

What is a Group and why do you use them? How do you select an item in a Group?

Provided Answer

A Group consists of several elements that are fixed in space to other elements in Figma. We use them when we make sections of design that we want to be able to move freely without losing the positioning of the Group. To select an item in a Group, you must double click on the Group itself or select the element in the layers tab.

Exercise 4

What is a Component? What is a Component instance? Why would you use a Component?

Provided Answer

A Component in Figma can be thought of like a Component in React. Components are pieces of reusable design like a header, footer, or navigation bar. When a Component is reused, the new copy is called an instance. We use Components because when there are many instances of Components throughout a wire-frame, we want to be able to edit all of the Components at the same time. We can do this by updating the original Component and all of its instances will update to match the style of the original.

Exercise 5

In a new file, create a frame.

Draw a flow chart that is relevant for some project you have created recently. For example:

Practice using keyboard shortcuts.

Once you are done editing the file, view the version history. Roll back to an earlier version. Move back to the current version.

Export a PNG copy of the flow chart at 2x resolution.

Export an SVG copy of the flow chart. What do the various SVG export options do?

Exercise 6

In a new document, create a UI design of the Innolitics home page. Follow Figma best practices.

Exercise 7

After working with Figma, think about the pros and cons of using this tool. Consider the following:
Are there other tools you prefer to use?
Is it better for a team to use the same sketch tool, or is it better to let each person use the tool they prefer?
If you feel we should change our whiteboarding and UI design process, feel free to reach out and propose a change.

Improvements and Completion Pull Request

Using a local copy of the website, start a git branch.

Remove any exercises or learning material that are not useful to the intended audience. Find ways to shorten and clarify the writing. Add generally useful exercises, responses, or learning material. Your improvements will make our training program great!

Add your self to the "completed" property in the lesson's YAML front matter.

Create a pull request and assign it to your lesson mentor (e.g., David). They will review and set up a time to talk through the lesson. After the lesson merge in your changes.