What Is Figma (HCI Course) [PDF]

Zitiervorschau

Figma: All you need to know Figma is a collaborative interface design tool that’s taking the design world by storm. Unlike Sketch, which runs as a standalone macOS app, Figma is entirely browser-based and therefore works not only on Macs, but also on PCs running Windows or Linux, and even on Chromebooks. It also offers a web API, and it’s free!

Figma

Another major benefit of Figma is that it enables real-time sharing on the same file. When using traditional offline applications such as Sketch and Photoshop, if designers want to share their work, they usually have to export it to an image file, and then send it via email or instant messaging.

In Figma, instead of exporting static images, we can simply share a link to the Figma file for clients and colleagues to open in their browsers. This in itself saves significant time and inconvenience in a designer’s workflow. But more importantly, it means that clients and colleagues can interact more richly with the work, and review the latest version of the file.

Today’s learning objectives 

Getting Started



Designing with Figma



Styles



Components



Auto Layout



Prototyping in Figma



Sharing and Writing with others

Let’s dive In!!! 1. Getting started Getting started in Figma is as simple as going to www.figma.com, clicking “Sign up”, and entering your details. Once you’ve done that, Figma will open up with a start screen like this. Click on “New File” and we’ll get started!

Getting Started

The look and feel of the Figma interface are quite minimal, but it belies a set of powerful features. Here’s an explanation of the interface’s main areas (labeled above): Menu: Unlike regular desktop design apps, Figma’s menus can be found by clicking the hamburger button in the top-left of the screen. Take a minute to browse around these menus and see what’s there! You can also search for the specific command you need. Start typing in “rectangle” and you’ll quickly find the Rectangle Tool, complete with a handy reminder of its keyboard shortcut (it’s R, by the way).

Menu

Tools: Here you can quickly access the tools you’re likely to use most often: frames, shapes, text, etc. (We’ll cover all these tools in the next couple of days!) Options: This area shows extra options for whichever tool you have selected. When no object is selected (as shown above), Figma displays the file name. When an object is selected, contextual options appear here. Layers: Where every element in the file is listed, organized into Frames and Groups.Canvas: This is where you create and review all your work. Inspector: The Inspector shows contextual information and settings for whatever object is selected. In the image above, we’re seeing options for the Canvas itself. Note that Figma gives us

separate tabs in the Inspector (Design, Prototype, and Code) — we’ll cover these later in the week. Now that you’ve found your way around, let’s start making stuff! Note that we’ll be referring to keyboard shortcuts a lot in these tutorials. It’s worth getting in the habit of using these shortcuts right from the off because they’ll significantly speed up your workflow further down the line.

2. Designing with Figma 2.1 Setting up new frames (aka artboards) If you used Sketch, this will all be quite familiar to you. Press A or F to see all frame options in the properties panel on the right-hand side and pick the size you wish to work with or simply draw your own frame. As in Sketch, you can work at 1x (meaning the actual pixel size) as there is no quality loss when resizing. You can still export assets any larger size you might need.

Press “F” to set up new frames

Unlike traditional artboards, you can nest frames within each other. This allows you to create more complex designs that interact with each other. More about this later.

2.2 Grid and layout columns For mobile, you can use a standard 8 point grid. For Web, it’s less about spacing and more about layout grids so you can start on the safe side with a popular 12-column bootstrap grid. Or a little more modern with my personal favorite, a custom CSS Grid. Adjust the grid in the grid properties menu on the right-hand side. You can switch from grid to columns or rows and also make it fixed or fluid and set margins and gutter to your needs.

create grid, columns & rows

The great thing about grids and columns in Figma is that you can set up multiple grids and store them in your styles (we will talk about styles in-depth later). This is a handy feature for adapting your layouts to a range of devices, share them with team members, or simply re-use them in other projects.

2.3 Layers and groups As with Sketch, on the left-hand side of your screen, you find the layers panel.

Layers panel on the left-hand side 

Layers → every new element your add creates a layer automatically. You can rearrange layers by drag and drop.



Group layers → Make sure to group layers (select layers and press cmd+G) to keep your file organized. It also helps you to quickly move and copy those groups across frames. To select an element within a croup press cmd and click on the item.



Pages → You can set up different sections or areas of your design. There are no rules on what or how to use them. I usually have separate pages for messy brainstorming, wireframing, and interactions up to the final version.



Assets → Your components are kept here, and you will find your library button in this section (more about the library, components, and instances at a later point)



Nested Frames → In Figma, you can also nest frames. This comes in handy when structuring and prototyping.

2.4 Vector shapes Figma uses something called Vector Networks, allowing the creation of complex shapes. Bye-bye Illustrator!

Creating shapes with Figma

For default shapes, pick from the top menu or simply hit R(rectangle) L(line), or O(ellipse) and start drawing your shape. Hold shift to keep proportions in place. Each shape automatically creates its own layer. To make your own, more complex shape, hit P, or pick the pen from the top menu. Once finished, simply press enter. No need to connect and close paths! Nice! You can change properties and manipulate vector shapes at any moment during your design process via the properties menu on the right-hand side. Vector Networks are very powerful if you want to know more. I recommend this in-depth tutorial from Design+Code.

2.5 Images Drag the image onto your work area. If you are used to Sketch here is where you need to adapt to a new format. In Figma, images are always placed inside a shape (like a mask). To change the behavior of the image go to Fill on the right-hand properties window and open the image properties.

Images in Figma

In the dropdown you can choose: 

Fill → the Image will fill the container.



Fit → As we resize image will never be cropped or hidden



Crop → the image to the size and selection you need. Note, you don’t lose the rest of the image as in photoshop, you are only masking the image.



Tile → Repeats the original images as necessary, and you can adjust the size of the tile.

Furthermore, Figma allows adjustment of properties such as color and saturation. Note that they are always re-adjustable and you will not lose the original image properties at any time.

2.6 Typography Figma comes preloaded with fantastic google fonts! In case you prefer using local fonts, you either need to install Font Helper or the Desktop App for Figma. Also, make sure everyone else accessing the file has the same fonts installed. Press T, to draw a text window, or simply click and start typing. You can set all text properties on the right-hand side properties menu.

Text in Figma

Text box behavior such as auto width, auto height, and fixed-size will be relevant once we talk about auto-resizing later.

3. Styles Styles may be used to describe the color, text, and effects applied to objects, as well as the form and appearance of pattern grids. Styles can be created for the following Paints and colors: fill, stroke, background-color

Paint and colors

Text: font family, size, line height, spacing

Text

Effects: drop shadow, inner shadow, layer blur, background blur

Effects

Layout grids: row, column, grid

Layout grids

When you change a style’s attributes, such as changing the color of a text style from red to blue, Figma can add those modifications to all items that use that style. Types, like modules, can be exchanged by adding them to the team library. This makes it simple to create and retain standardized styles throughout the team’s projects.

4. Components Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. Components make your design (and later programming) consistent

and allow for easy updating and scaling and will save you a lot of work!

Components

You can create components from any layers or objects you’ve designed. These could be a whole range of things like buttons, icons, layouts, and more. There are two aspects to a Component: 1. The Main Component defines the properties of the Component. 2. An Instance is a copy of the Component you can reuse in your designs. Instances are linked to the main Component and receive any updates made to the Component. You can create components to use within a single file. Or, you can use Team Library to share components and Styles across files and projects.

5. Auto Layout Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as

their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve. There are lots of ways to use Auto layout: 

Create buttons that grow or shrink as you edit the text label.



Build lists that adapt as items are added, removed, or hidden.



Combine Auto layout frames to build complete interfaces.

Auto layout is a powerful feature with many moving parts and uses. In this article, we’ll show you how to add an Auto layout to a frame, and how each of its properties works.

Add Auto layout You can add an Auto layout to a frame or a selection of objects. This includes: 

New or empty frames



Frames with existing content



Components and Component sets



Groups or other selections of layers and/or objects

Note: Auto layout is only supported on frames. If you select objects that are not in a frame, Figma will create an Auto layout frame around them.

You can add Auto layout to a selected frame, component, or component set from a few places: 

Use the keyboard shortcut Shift A.



In the right sidebar, click the next to Auto layout with a frame selected.



Right-click on the frame or object and select Add Auto layout.

Tip! You can add Auto layout to components. You will need to add an Auto layout to each component individually.

Auto layout properties Frames with Auto layout have different properties to regular frames. When you apply an Auto layout, you’ll see some changes in the right sidebar. You can’t do the following to Auto layout frames: 

🚫 Add Layout grids to that frame



🚫 Apply Constraints to any objects within an Auto layout frame



🚫 Use Smart selection on any objects within the frame

Auto layout

Direction Direction describes the way the auto layout frame will flow. 

Choose Vertical to add, remove, and reorder objects along the y axis. For example objects within a list, or posts within a newsfeed or timeline.



Choose Horizontal to add, remove, and reorder objects along the x-axis. For example a row of buttons, or icons in a mobile navigation menu.

Figma currently supports only one direction at a time, horizontal or vertical. To build designs that use both directions, you will need to combine or nest Auto layout frames. In the example below, we’ve nested a horizontal Auto layout frame within a vertical Auto layout frame to create a card with a title, description, and showtimes.

Direction

Spacing between items You can control the spacing between items in an Auto layout frame. Unlike smart selection, there isn’t a way to adjust the spacing on the canvas. Instead, use the spacing fields in the Auto layout section of the right sidebar: 

Horizontal space between



Vertical space between

Enter a number in the field, nudge the values using your arrow keys, or scrub the field using your cursor.

Spacing

Padding Padding controls the empty or white space between the child objects and the boundary of an Auto layout frame. You can set padding uniformly, or have different values for top, right, bottom, and left padding. Note: Negative padding values are not supported.

Padding

Tip! Press the tab key to navigate between the top, right, bottom, and left input fields.

Alignment Choose how to align child objects within an Auto layout frame. Both the direction of the Auto layout frame and the distribution will determine what alignment options you have available. Unlike objects in a regular frame, you can’t control the alignment of the objects individually. For that reason, you set the alignment of the child objects on the parent Auto layout frame.

Use the interactive grid to select from nine layout options for the children in a frame.

Alignment

If your distribution is set to Space between, you have three options for each direction: 

vertical Auto layout: Left, Center, Right



horizontal Auto layout: Top, Center, Bottom

If your distribution is set to Pack, you have the same nine options for each direction: 

Top left



Top center



Top right



Left



Center



Right



Bottom left



Bottom center



Bottom right

Note: When one or more resizing properties are set to hug contents, some selections won’t result in visually different layouts on the canvas. This is because hug contents remove any extra space around the child's objects.

Distribution Once you’ve set alignment rules for child objects in a frame, choose how those objects will be distributed within that frame. In the alignment panel, click the arrow to select between: 

Packed: Objects in a frame will be grouped. Use this option to keep objects in a frame as close as possible and aligned together.



Space between: Objects in a frame have the space between them equally distributed along the direction and alignment set for the frame. Use this option to stretch objects across a frame.

Distribution

Resizing One of the most powerful functions of Auto layout is its ability to control the dimensions of the objects in an Auto layout frame. Set resizing behavior for parent Auto layout frames to adapt to changes to their children's objects. Resizing settings can be applied for objects on both the X and Y axes individually using the dropdown menus and the resizing panel.

Resizing

Note: Text layers also have their own resizing properties. Within an Auto layout frame, this may produce some useful results. If you want your Auto layout frames to be completely fluid, we advise against using fixed-size text boxes in your Auto layout. Fixedsize text layers won’t resize to accommodate your text, which may cause overlap between layers in an Auto layout frame.

6. Prototyping in Figma Figma’s prototyping features allow you to create interactive flows that simulate how a user may interact with your designs.

Prototypes are a fantastic way to: 

Preview interactions and user flows



Share and iterate on ideas



Get feedback from collaborators



Test interactions with users



Present your designs to stakeholders

Create connections 1. Select the hotspot for the connection. 2. Click the to create the connection 3. Drag it to the destination

Create connections

Create interactions and animations 1. Open the Prototype tab in the right sidebar 2. Create interactions 3. Set interaction details 4. Apply an animation 5. Preview your animation

Create interactions and animations

Adjust Prototype Settings 1. Select a Device and Model 2. Preview your prototype 3. Select Background color 4. Set the prototype’s Starting Frame

Adjust Prototype Settings

7. Sharing and working with others

Every file and prototype in Figma has a unique URL. In an organization, members can copy this link to quickly share designs and prototypes with other members of the organization. Members can interact with a file based on the file’s link sharing permissions, regardless of whether they’re a member of that team or project. If public link sharing is enabled, members can also share files with people outside the organization. Invite people by clicking the blue share button in the top menu and enter an email address or copy the link and send it.

sharing in Figma

Other designers and copywriters → Set to EDIT MODE. Provides access to all features. You will see other user's avatars and cursors and can work alongside in real-time in the same file!

edit mode

Developers → set to VIEW MODE. This will show them all specs (toggle CSS, iOS, and Android code). They can also access your prototype in action and can download any assets in the size needed.

view mode

☝Note: If you are sharing with the developers while still working on the file, it’s best to set up a page in your design clearly labeled as the latest tidy versions for the dev team to avoid confusion.

Cheatsheet, when to export what: 

SVG → use for vector files, such as logos and icons. SVGs are scalable to any size without losing quality. Make sure to export a png fallback.



Jpg → use for all sorts of rectangular images and photos with no opacity needed. Make sure to supply actual size(1x) as well as retina resolution (2x).



Png → Use, if an image or photo needs a transparent background. Also 1x and at least 2x export required.



1x, 2x → 1x is the actual size, 2x twice the size. 2x is needed for crisp images on retina displays. Note that 2x, 3x, etc. comes with a Suffix of @2x, @3x which will be relevant identifying and calling the right image when coding.



w & h → You can also set a width, e.g. 300w = image with a width of 300px. Same for height=h



pdf → used if you want to export a whole page, e.g. for mailing it or adding it into a presentation and need high quality.