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:
- real-time white boarding
- drawing software architecture diagrams
- sketching and prototyping UI ideas
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.
Learning Material
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
- Iterate on a UI in Figma with the client
- 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, 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:
- Shape Tools
- Frames and Groups
- Combining Shapes with Boolean Operations
- Text Basics
- Object Alignment
- The Stacking Order
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
To learn as much as possible from these exercises, write your responses before revealing the provided answers. If any exercises seem irrelevant, you can skip them and instead write a justification as to why they are unimportant. These justifications will help us improve the lesson for future employees.
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.
Exercise 3
What is a Group and why do you use them? How do you select an item in a Group?
Exercise 4
What is a Component? What is a Component instance? Why would you use a Component?
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:
- How image buffers from a camera flow through a real-time image-processing pipeline
- A database schema for Slack, including arrows for foreign key relationships
- How a browser opens a web page
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.