Masai Learn - Intro To Figma For Developers

Figma
https://figma.com
Figma connects everyone in the design process so teams can deliver better products, faster. Figma can enable product teams to ship new products faster and feel more confident in their decisions.

Figma is a vector design tool that runs in the browser. Use Figma to brainstorm ideas, iterate on designs, create prototypes, and get feedback at any stage of the creative process.

Canvas
The canvas is the backdrop for all of your designs - it's where you'll add all the frames, shapes, text, and images.

Unlike pixels, which have a fixed dimension, vector paths are resolution-independent. This means you can easily scale them to suit your designs. You can use pixel preview to see how your designs will look when you export them as rasterized (pixel-based) assets.

Frames
With the great expanse that is the canvas, you need something to put your designs in. Enter frames. Frames are the containers you place your shape, text, and image layers in. You can think of each frame in the canvas as a single screen of your design.

The toolbar contains the tools you need for creating layers. Select the frame tool in the toolbar.
Frame presets, in the sidebar on the right, let us create frames with specific dimensions.

Create shapes
Now you're ready to add some layers to your frame! As this is a wireframe, you can use shapes, like rectangles and ellipses, to represent more complex aspects of the design.

Select the rectangle tool to create an image for a post on your app's home page.
Just like frames, every layer in the canvas has dimensions. You can adjust a layer's position and dimensions in a few ways.

Position

Click and hold on the layer you want to reposition. Drag the layer to the part of the canvas you'd like to position it on. Release to apply.
To set specific co-ordinates, you can update the X and Y fields for that layer. These co-ordinates correspond to the top-left corner of the layer.

Dimensions

Hover over the bounds of a layer until the cursor appears. Click and drag to change the size of the layer.
To set specific dimensions, you can update the layer's dimensions using the width (W) and height (H) fields in the right sidebar.

Parents and children
If you look in the layers panel, you can see the rectangle is within the home frame. Some layers, like frames, can contain other layers.

We use the analogy of parents, children, and siblings to describe relationships between layers. You may know these terms if you're familiar with web development or programming.

Parents are layers that contain other layers. Think frames, components, and groups.
Children are layers within a parent. Think of the text and shape layers within a component or group.
Siblings are layers within the same parent. Layers need to be at the same level in the layer hierarchy to be siblings.

Layer properties

Colors or paints
New shape layers have a gray fill by default, but we can apply another color or paint to these layers. Paints can be solid colors or gradients, as well as images or animated gifs.

You can apply paints to the fill, stroke, or effect properties of a layer. You can even add more than one paint to a layer and use blend modes to create unique styles or effects.

Paints appear similarly in the right sidebar:

Preview a swatch of the color or a thumbnail of the image or GIF.
View the opacity of the paint applied to this layer.
See the hex color code for solid colors and gradients, or a generic Image or GIF label.
Enter a hex code in the field, or click the swatch to open the color picker.
Select colors from the palette, or apply other fills, like gradients, images, and even animated GIFs.

Adjust fill or stroke properties
We want our wireframes to appear like outlines instead of solid shapes. We can do this using the stroke property. Strokes work like outlines or borders around our shapes and layers.

Select both shape layers.
View the Fill and Stroke properties in the right sidebar.

Text

Select the text tool in the toolbar.
Click on the spot in the canvas next to our avatar to create a text layer.
Type in the name as our placeholder text.
We want our text layer to align with the center of our avatar. Click on an empty spot in the canvas and drag your cursor to select multiple layers.
We want our text layer to align with the center of our avatar. Drag over multiple layers to select them at once, and click Align vertical center.
We'll also need some text below our image. Press T to select the text tool and click and drag to create another text layer. Add description.

Copy and duplicate layers

Press R to select the rectangle tool.
Hold down Shift again to constrain the rectangle's proportions and create a perfect square.
Click and drag to draw a rectangle in the canvas. Aim for dimensions of 32x32.

Groups and frames

All these layers make up a single post and we want to make sure these objects stay together. There are two ways we can group or organize layers: groups and frames.

While frames and groups look similar in the layers panel, they have different functions.

Use the shortcut Command-G or Ctrl + G to group a selection of layers.

Groups allow us to move around a collection of layers, without having to select each layer individually. Groups don't have properties of the own, only the layers inside the group do.

Use frames to create distinct containers, like screens in a mobile app design or individual slides in a presentation.

Components

Components are the building blocks of our designs. They can be basic UI elements like buttons or icons, or more elaborate compositions, like toolbars and menus.

Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects.

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:

A Main Component defines the properties of the Component.
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.

Constraints
Our eventual application will need to adapt to different screen sizes. If we try to resize the frame now, our components doesn't change. We can make sure they respond to different frame sizes using constraints.

Constraints tell Figma how layers should respond when you resize their frames. This helps you to control how designs look across different screen sizes and devices.

You can check out the video below, or continue reading to find out more.

Horizontal and vertical constraints

You can apply constraints along both the x (horizontal) and y (vertical) axis.

Horizontal
Horizontal constraints define how a layer behaves, as you resize the frame along the x axis.

Left maintains the layer’s position, relative to the left side of the frame.
Right maintains the layer’s position, relative to the right side of the frame.
Left and right maintains the layer’s size and position relative to both sides of the frame. This may cause layers to grow or shrink along the x axis, when resized.
Center maintains the layer’s position, relative to the horizontal center of the frame.
Scale will define the layer’s size and position as a percentage of the frame's dimensions. It will then maintain those proportions as you resize it.

Vertical
Vertical constraints define how a layer behaves, as you resize the frame along the y axis.

Top maintains the layer’s position, relative to the top of the frame.
Bottom maintains the layer’s position, relative to the bottom of the frame.
Top and bottom maintains the layer’s size and position relative to the top and bottom of the frame. This may cause layers to grow or shrink along the y axis, when resized.
Center maintains the layer’s position, relative to the vertical center of the frame.
Scale will define the layer’s size and position as a percentage of the frame's dimensions. It will then maintain those proportions as you resize it.

Apply constraints to a layer

You can apply constraints to any layer within a frame. It's not possible to apply constraints to layers outside of a frame, or layers in an auto layout frame.

You can also apply constraints to frames you have nested within other frames.
You can apply both horizontal and vertical constraints to layers.
You can use constraints to define how layers respond in scrolling Prototypes. Learn more about Prototyping in Figma.
You can't apply constraints to groups. A group will inherit its bounds from the layers contained within it. They aren't considered a single layer with bounds.

Note: If you apply constraints to a group, Figma applies constraints to the individual layers.

To set the constraints for a layer:

Select the layer or parent within the frame. The blue dotted line on the canvas shows which constraints are currently applied:
Adjust the vertical and horizontal constraints in the constraints settings in the Properties Panel.
- Use the drop down menus to set the layer's constraints
- Or, click on the lines in the interactive diagram to select a constraint.
If you want the layer to stay in the same position, even when scrolling, check the box next to Fix position when scrolling.

Modules

Module 1

Intro to Figma for Developers