Figma Tutorial by Figma [ 2. The Basics ]

cmdlhz’s 2019 Self-learning Story #13–2

11 min readApr 30, 2019

[cmdlhz’s 2019 Self-leaching Story] Series

[JavaScript]
  🌱 Net Ninja - JavaScript ES6
  🌱 Net Ninja - Asynchronous JavaScript
  🌱 Net Ninja - Object Oriented JavaScript
  🌱 Coding Train - JavaScript ES6-ES8 (Part1, Part2)[Regular Expressions]
  🌱 Coding Train - Programming with Text[Vue]
  🌱 Net Ninja - Vue CLI3
  🌱 Net Ninja - Vue JS2
  🌱 Net Ninja - Vuex
  🌱 Net Ninja - Vuetify (Part1, Part2, Part3)[Python/Django]
  🌱 Net Ninja - Python3
  🌱 Net Ninja - Django[Figma]
  🌱 Design Course
  🌱 Figma (Part1, Part2, Part3, Part4, Part5)[Illustrator]
  🌱 TastyTuts (Part1, Part2, Part3)[SQL]
  🌱 freeCodeCamp

🌱 Figma Tutorial by Figma on YouTube : Part 2 — The Basics

1) Text Tool and Fonts
2) Effects
3) Gradients
4) Layout Grids
5) Images
6) Guides
7) Rounded Corners
8) Masks
9) Color Picker
10) Boolean Operations
11) Alignment & Distribution
12) Vector Networks
13) Importing & Exporting
14) Constraints
15) Creating Styles

[ 1. Text Tool and Fonts ]

Discover new fonts at Google Fonts.
Use local fonts with the Font Helper on the cloud app or Desktop Application
Font styles shortcuts : Bold(Command + B), Italicize(Command + I), Underline(Command + U)
Auto Resize has 3 values : Width, Height, and Fixed
Type a number followed by px to change percent values to pixels (e.g., 5px).
Justification & Alignment allow us to position a text within the bounding box.

[ 2. Effects ]

Use Drop Shadows & Inner Shadows to show depth & add dimension.

Drop Shadow
- An effect which casts a shadow below the layer or object which it is applied on
- It’s used to give an impression that an element is raised or floating above the background behind it.

Inner Shadow
- An effect which casts a shadow inside the layer or object which it is applied on
- It’s used to apply inner depth to a layer or object.

Layer Blur blurs the layer to which it is applied, while Background Blur blurs all layers below it.

Create Inner Glow & Outer Glow effects by using Drop or Inner Shadows with the blend mode set to the screen.

[ 3. Gradients ]

Gradients are position dependent colors composed of two or more colors with smooth transitions in between.

There are 4 types of Gradients : Linear, Radial, Angular, & Diamond

Linear Gradient
- The most common type of gradients
- All colors appear in a straight line and only blend with adjacent colors.Radial Gradient
- It begins from the center and grows outward in a circle.Angular Gradient
- It progresses in a clockwise direction.Diamond Gradient
- It behaves the same way as Radial Gradients. The difference is that It is in the shape of a diamond instead of a circle.

A single color in a Gradient is called a Stop. Stops can be transparent, are created by clicking, and deleted with the Delete key.
We can stretch, shrink, and rotate a Gradient using the handles on the canvas.

[ 4. Layout Grids ]

Layout Grids can be Grids, Columns, or Rows.
Columns and Rows have 3 types : Stretch, Left, and Center.
Constraints work with Stretch Grids.
It’s possible to have multiple Layout Grids on a single frame.
We can enable/disable layout grids with ctrl + G.
Gutter is the space b/t rows & columns, and Margin is the space on the outermost edges of the layout grid.

[ 5. Images ]

There are 3 ways to place images into Figma: Drag & Drop, Copy & Paste, and File > Place Image (Command + Shift + K).
Image files can be set to Fill, Fit, Crop, or Tile.

Fill
- An image will fill the container regardless of its size. Fit
- It functions similarly to fill. But, it may not always fill the entire shape. As we resize the shape, the image will never be cropped or hidden. It will always remain visible.Crop
- As we adjust our boundary lines, the image inside will always remain the same size. Parts of the image outside of the boundaries are now faded and will not be shown once our crop is applied.Tile
- It repeats the original image as necessary to fill the shape.

Use Image Adjustments to make quick edits to images to better fit our design : Exposure, Contrast, Saturation, Temperature, Tint, Highlights, Shadows.
Our edits are non-destructive, which means that the edits do not overwrite any properties of the original image. That allows us to always revert back to the original.

[ 6. Guides ]

Guides are thin red lines, which can be moved & repositioned to ensure that layers are aligned as we intended. It’s important to note that guides will not appear on exported images.

Turn on Rulers using Shift + R. This also toggles guides on and off.
Click on the vertical/horizontal Ruler and drag it towards a frame to create a Vertical/Horizontal Guide Parallel to it.
Snap objects to Guides to precisely align elements of our design.
Delete a guide by dragging it back to the Ruler or selecting it & pressing the Delete key.

[ 7. Rounded Corners ]

In the Properties Panel, we can adjust individual values of corners: top-left, top-right, bottom-right, and bottom-left.
We can also adjust the values by hovering our mouse over the shape to expose the corner handles, which allows us to click & drag to modify corner radius values. If we want to modify only one of them, press Alt/Option while dragging.
When dragging rounding handles back towards outer bounds of a shape and releasing them, we can notice the slight “Bounce Back” effect. It ensures the rounding handle don’t obstruct the bounding box handles.
The corner radius feature also allows for nudges. Dragging a corner handle will automatically snap by the small nudge amount. Dragging while holding shift will use the big nudge amount. We can adjust both the small nudge and the big nudge values in Figma’s preferences.

[ 8. Masks ]

Masks allow us to show specific portions of other layers.

To create a Mask, press Control + Command + M.
Outline masks use the outline of a shape that is to be used as the Mask. The Mask will apply to all layers above it.
If the shape has effects (e.g., gradients and shadows), the effects will be lost once a a Mask is created from that shape.
To preserve Effects, duplicate the shape before creating the Mask.

[ 9. Color Picker ]

Eye Dropper tool is used to sample a color usually from an image. First, select a layer to let the tool know that any color that is sampled should be applied to this selected layer.

To use the eye Dropper tool, select the square box in the fill section in the Properties Panel. Or, press Control + C or I.

[ 10. Boolean Operations ]

Boolean Operations combine any set of shape layers through one of four formulas: Union, Subtract, Intersect, and Exclude. Boolean operations are non-destructive.

Union vs Subtract vs Intersect vs Exclude

Union is the opposite of Subtract.
Intersect is the opposite of Exclude.

Union
- It combines selected shapes into a boolean group. If the shapes overlap, new shape's outer path consists of the composite of the new shape's sublayers minus any segments which overlap.Subtract
- It removes the area of shape(s) from a base shape. So, only the bottom layer will remain, while the rest are subtracted from the bottom layer.Intersect
- It creates a boolean group that consists of only the overlapping part(s) of its original sublayers.Exclude
- It shows only areas of its original sublayers that do not overlap.

[ 11. Alignment & Distribution ]

Alignment Tools can be found at the top of the Properties Panel.

Align items to precisely position layers and objects.

- Align Left
- Align Horizontal Centers
- Align Right
- Align Top
- Align Vertical Centers
- Align Bottom

Single objects align to the Frame by default.

Distribute items when you want to add even spacing b/t them.

Distribute Horizontal Spacing + Align Vertical Centers

[ 12. Vector Networks ]

In most drawing tools, each point can have two paths that come off at the point at maximum. In Figma, you can have any number of paths that come off of a single point.

Introducing Vector Networks

Before I co-founded Figma my background was in game development, not in design. I remember being very surprised when I…

medium.com

[ 13. Importing & Exporting ]

PART 1 : Importing

We can import files to File Browser in .fig, .sketch, PNG, JPG or GIF format.
We can add files to the Editor or canvas in SVG, PNG, JPG or GIF format. We can drag & drop a folder of images onto the canvas as long as the images are supported file types, Figma will place the images side-by-side on the canvas.

PART 2 : Exporting

The multiplier determines the size of the output.

> With our multiplier setting to 3x, the vector will be exported as the size three times bigger than the original size.

Also, We can manually enter the export size.

- 1000w = 1000 pixels wide
- 1000h = 1000 pixels height
- Logo = The name of the exported file

> We can change the name of the exported file by changing the name in the Layers Panel or entering a new name in Suffix in the Export section.

In addition, when layers are overlapped, overlapped part(s) of the layers become(s) a part of an exported file if the “Contents Only” box is unchecked.

To see everything available for export, press Command/Ctrl + Shift + E.

> When we click the icon of an exportable element in the export window, the screen is zoomed to the selected exportable element.

> Uncheck “Show in exports” box not to show the background color in the exported file.

People with view-only restrictions can see only code tab (instead of design, prototype, code tabs) in the Properties Panel. They can add additional export settings. However, the changes will not persist when the file is refreshed.

[ 14. Constraints ]

“Constraints allow you to specify how you want an object to respond, when the Frame it is contained within is resized. Constraints can be applied to Frames, as well as individual objects.” (Figma)

PART 1 : Tab Bar

PART 2–1 : Subsections — Containers

PART 2–2 : Subsections — Right Arrows

[ 15. Creating Styles ]

Styles allow us to save certain properties, and then later reuse them across the file.
Color Styles can be applied to Fills, Strokes, and Text (as a Fill).

We can also create Text, Effects, and Layout Grid Styles.

Local Styles belong to our file and can be published and shared with the Team Library.
We don’t need to create your Styles before we start designing.

Thanks for reading! 🎵 If you like this blog post, please clap👏