Here is what Figma says about itself when you create a new free account: “Figma is at its most powerful when you work from a team space (even if you are working solo). Team spaces allow you to organize files into projects, collaborate more easily, and manage specific permissions.” They also say the following: “One of the coolest things about Figma is that you don’t have to start from scratch to get to work. Just drag your Sketch files onto the browser and we’ll convert them to Figma for you.”

More Information from Videos

At YouTube, Figma has produced a short introductory video called What’s Figma?

Here is another video tutorial series at YouTube. It follows from the What’s Figma video and has 8 parts. It is narrated by Crystal and the videos are from Figma. For all of the timestamps of these 8 videos please see the post called Figma Tutorial Videos Crystal.

You can get an overview of Figma at YouTube. There are other Figma videos at YouTube. Udemy.com also has on-line courses on Figma.

Here is a video that was recorded in 2018. It is from coursetro.com and it is called Figma Tutorial – An Introduction to a Very Impressive UI Design & Prototyping Tool. Scroll down the page a bit to find the video under the section called “If you prefer watching a video” and click on the video.

Here is another video at YouTube. Design A Website In Under 1 Hour With Figma.

Top 10 Figma Plugins You Need | Quick Overview & Demo of Each

Figma in 40 Minutes.

Getting started with Figma: A beginner’s guide.

Hierarchy

There is a hierarchy in Figma that is important to understand. At the highest level there are Teams of people. Even if you are working alone, you are best to think of yourself as part of a team. Under the team is the Project. Under the project there are Files. Under Files you have one or many Pages. On a page, you can have a Frame. Teams have the ability to create a new Project, invite people to become a team member, enable Slack OAuth to enable people to join through Slack.

• Team
• Project
• Files
• Pages
• Frame

Even if you are working alone, create a team and give it a name. For now, choose a free starter team. You can always upgrade (and pay) later. The starter team allows for up to two editors and three projects. To keep things simple and instead of inviting more team members, the next step is to create a new Project. After that we can create a new File. One way is to click the plus icon in the top left corner of the toolbar (black bar at the top) or by clicking New File in the File browser (in the middle). Give it a name. The next thing you see is the Figma Editor which is just a large grey canvas in the center of the screen. This is where most of the design work happens. In the right side you see the Properties panel. For example, you can adjust the background color of the canvas there.

A Simple Example

Suppose you are developing a simple app or program that only has one or a few interfaces (web pages or mobile app pages or Windows interfaces). One way to organize your files and pages is to create a Figma file for a project. That Figma file will house all of our design work for the entire app. Within that file, you create 3 pages: wireframe, design, and to-build. The to-build page is what you send off to the developer. The design page is where you do your work for each of the pages on the website (or mobile device). The wireframe page is your starting point. The wireframe just has the interface elements (buttons, text, drop-downs, lists, and so on) arranged on the page, without the details of fonts and colors and other design elements.

Layers

The layers panel is on the left side when you are working in a file. We see that we are on Page 1. Each File can have multiple Pages. The third icon from the left in the toolbar is the Frame tool. Click the Frame tool (looks like X’s and O’s game) and then choose a type of phone on the right side. This creates a Frame on the Canvas, which also appears on the Layers panel. We can add elements to our design within the frame. Click the down arrow beside the square icon in the toolbar to add a design element. These elements automatically become Children of the Frame in the layers panel. You can drag elements inside and outside of the frame to see how parenting and un-parenting works.

Properties of an Element

Once you select an element you can use the Properties panel on the right side to adjust the attributes of that selected element. Properties will change depending on the type of element. If we don’t select anything the properties of the canvas will be shown. Notice that on the right side we’ve been working under the Design tab (at the top). There is also a Prototype and Code tab. The Prototype tab allows us to assemble interactive prototypes.

Components

What are Components? Components are UI elements that can be re-used across your design files. They help make your designs more consistent and allow for changes to be made quickly. On the left, at the bottom, we see the Layers tab and the Components. How can we make components? First, add your elements to the Frame. Adjust their Properties as desired. Select all of your elements by clicking in a space outside of the edges of your elements and dragging until all elements are selected. You might also be able to use the Shift key to select multiple elements. Right-click inside the element group and select Create Component from the popup menu. Now we’ve “grouped” these elements together. Ctrl+D will duplicate (copy) the component. We can drag it away from the master component (the original one) to see both of them on the canvas.

If we change any property of the master component, all of the child components (instances) will inherit those changes. If we change any properties of the instances, they will only affect the instances and not the master. Making changes to the instances are called overrides. If changes are then made to the master component, the overrides on our instance will remain unchanged. Is this polymorphism in OOP?

You can change anything into a component. For example, you could create a UI button from a rectangle. You could create a component from any shape.

Design System

By default, components are available only in the File that they are created in. However, you can publish your components to your team Library. To use the Library, you need a paid account. This way, the entire team can use your components across Files or the Design System. Perhaps now we are ready to stat building our app with our collection of components. We can use collaboration to have more than one person building on the same Frame at the same time.

Responsive

What about having a look at what our design will look like o different mobile devices.

User Flow

Suppose we have created a few screens. Now we need to create a Prototype. Click the Prototype tab on the right side. We use the mouse to make connections between the different screens or Frames that represent how the user would use the app. blue arrows will appear linking the Frames together.

Presentation View

If we want to see how it works when we go live, we click on the play icon (right arrow inside a circle) in the upper right corner. Now we can demonstrate the look and feel of our app. When we click on an interface element while in play mode, the app will respond to that just as it will when the app is complete.

Save

We have reached a milestone. We’re happy with what we’ve got so far but we know there may be some changes later on. We need to save a version of this prototype by accessing the version history. That is located at the top-center of the GUI in the toolbar in the Editor. Click the small down arrow and then click Show Version History in the drop down of the toolbar. In the upper right corner, click the plus icon to create a new version. A pop-up appears where you can enter a Title and a Description. Click Save.

Development Phase

We can share our File by clicking the blue Share button on the top right side of the black toolbar. Add the developer’s email address and give them Can View permission. If you are not yet ready to do this, and you want to get sign-off of the design, you may instead want to give Can View permission to the Project Manager or owner of the project. Use the same procedure. They will be able to view the screens, export assets and view the Code tab, which includes code for Android, iOS and CSS code.

Software Engineering

We have been able to use Figma to produce assets that are ready for the development team. From a software engineering perspective, we have completed low-level design. Figma can be useful and helpful in both the high-level and low-level design phases of the software project.

Performance

The Figma app can be a bit slow. It was written in C++.

Alternatives to Figma

There are other software packages that may be useful to you. Sketch is a proprietary vector graphics editor that requires macOS High Sierra (10.13.4) or newer and offers similar features as Figma. There are other packages that may be useful to you. Each one has it’s own strengths and weaknesses. For example, you could use Adobe Illustrator, Inkscape, Photoshop, Affinity Designer, Xara Designer Pro, Gravit or Adobe Fireworks. For a simple online drawing application have a look at draw.io.