What is new in Figma? – table of contents:

1. Introduction
2. Effective collaboration
3. Work organization
4. Summary

Introduction

Due to the many different ways a team can collaborate, it can be hard to keep up the pace and move forward with planned tasks – especially when working remotely. Figma is striving to streamline the work of teams around the world, believing that they need a single place to generate ideas, iterate and complete tasks. Recently, Figma has introduced some interesting features designed to make remote work easier, more efficient and more enjoyable for project teams. Below are the ones that particularly caught our attention.

Effective collaboration

Music in FigJam

Boost your team’s creativity with new features that will make projects and teamwork more focused and engaging. One of the most exciting new features in FigJam is music, which allows the whole team to get on the same wavelength! This feature is available in the timer settings – fill the awkward silence by playing your favorite music while brainstorming. In timer mode, click “Pick a song” and choose from ready-made tracks. The same song is played for everyone in the file – but users can control the volume of the music or mute it completely on their own device.

Voting in FigJam

Figma Chrome extension

The extension allows you to attach Figma and FigJam files to any event in your Google Calendar. This will let you organize and schedule your work.

Integration with Microsoft Teams

It allows you to work on Figma and FigJam files directly in Microsoft Teams. Collaborate in Figma design files, prototypes and FigJam files with the rest of the meeting participants. Another helpful tool to enhance your team’s remote work!

Work organization

Sections

Organize your projects in Figma with sections to help team members easily navigate through files. This feature will organize files using labeled sections to group related ideas and guide co-workers through files.

Push notifications

This feature is available on iOS, Android and PC. With notifications, you won’t miss any important modification in Figma and FigJam files.

Comments

Answer questions and review work in Figma and FigJam from anywhere via comments on your phone or tablet. The feature is available on iOS and Android.

What’s new in Figma – summary

Despite concerns after Figma was acquired by Adobe in September 2022, its developers continue to positively surprise us. Figma regularly introduces new and interesting features to not only streamline remote work, but also to facilitate design, and speed up sharing and transferring files, so it is gaining popularity and continues to be a top tool for UX and UI designers around the world.

Follow our website and social media to stay up to date with more content like this.

If you like our content, join our busy bees community on .

How to use Figma? – table of contents:

1. Create your portfolio and resume
2. Prepare simple responsive graphics
3. Design presentations

Create your portfolio and resume

If you’re looking for a job and searching for a way to present your designs to employers, Figma is a great alternative to paid portfolio builders. And if you don’t know where to start, you can use the ready-made projects provided in the Figma Community. Just type “portfolio” in the search bar and get inspired. What is more, in Community you will find great resume templates. You can save the finished document in PDF format and easily attach it when applying for a job.

Prepare simple responsive graphics

Are you preparing graphics for Facebook and Instagram or other social media? In this case, Figma will also make your work easier. Thanks to the auto layout option, you can very quickly reformat your graphics for different media – you can efficiently turn an Instagram story into a square graphic for Facebook.

An unquestionable benefit here is support for vector graphics, pasted directly from other programs – for example, from Adobe Illustrator.There are tools available in Figma Community to help you master the skill of creating responsive frames. One of them can be found here:

Design presentations

When you think of creating a presentation, Microsoft PowerPoint is certainly the first thing that comes to mind. This program is equipped with an impressive set of features, but its downside is the low clarity of the interface. In this case, Figma is also a great alternative.

If you need inspiration for your presentation, take a look at Figma Community – type “presentation” in the search bar. You can save the finished presentation as a PDF, so you can easily send it to other people, or open it on any device during your speech.

Congratulations! You have just completed the introductory course to Figma. You have successfully gone through all the lessons we have prepared for you. Follow our website and social media to stay up to date with more content like this.

If you like our content, join our busy bees community on

Best Figma plugins – table of contents:

1. Installing plugins
2. Best Figma plugins

Installing plugins

Plugins are scripts or applications that extend the functionality of Figma and FigJam. You can find and install them through:

• File browser, click Community in the Sidebar. To see the results, go to Community, and select Plugins at the top of the page.

• Figma or FigJam file: click on Resources in the Toolbar and choose the Plugins tab.

You can see the details of the selected plugin by clicking on its name. Once clicked, a page will open with a description of the plugin and instructions for use. You will also find community comments, history of versions and suggestions for similar plugins in the More like this section.

Installing plugins is very easy – just click on the Try it out button next to the selected plugin in the list or in its details. Figma will redirect you to edit the file, where you can try out the selected plugin.

To run the plugin, click the Run button.

Once you click Run, you can use the plugin.

If you like the plugin, you can install it. To do so, click the Install button, which is marked with an ellipsis icon.

Best Figma plugins

There are plenty of plugins for Figma. It would take you a long time to go through them all, so we have prepared a list of a few suggestions that you should know at the beginning to make the design process more enjoyable.

1. Grid System

This plugin will help you choose the right Layout grid in your project. Link:

As the name suggests, the Clean Document plugin will control the chaos and inconsistencies in layers, names and groups in your file. This is very useful especially when you want to share your project with other team members or a client. Link:

You already know that typography is a key element of interfaces. The Typescale plugin will take care of the typographic order – it will give the proper hierarchy and size to headings and other elements according to the selected pattern.

ĚýWhen you enable Typescale, you need to select a text layer, which will be the base size of the font, and the plugin will generate the given number of sizes accordingly – above and below the base size. Link:

Coming up with content for projects on your own can be difficult.Thanks to this plugin, you can paste automatically generated addresses, specific data, numbers, photos, avatars and icons. Link:

This plugin searches for and automatically replaces text in the file. It’s especially useful when you are working on a large project and suddenly decide to make changes to the content. Link:

This plugin is used for creating custom bullet lists. Link:

This plugin will help you choose the right colors for your project. Link:

With this plugin, you can upload Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and many more to your file. Link:

Thanks to this plugin, you have a whole gallery of beautiful photos at your fingertips. Link:

10. Logo Creator

If you are looking for inspiration for a logo, you will certainly love this plugin. You can choose a logo from ready-made collections or create your own using the available shapes. Link:

With this plugin, you will make beautiful, personalized illustrations. You can choose an illustration from a rich collection and adjust its variables to fit your design. Link:

You’ve just read about best Figma plugins. Read also: What are research questions and how to write them?

If you like our content, join our busy bees community on

Collaboration tools in Figma – table of contents:

1. Getting started with comments
2. FigJam files

Getting started with comments

To enter the comment mode, click Add comment in the Toolbar, then click the desired location on the Canvas where you want to pin the comment.

With the enabled comment mode, you can manage comments in the Properties panel.

Making changes to layers in the Canvas is not possible while comment mode is enabled. To exit a comment mode, press Esc or select another tool in the Toolbar.

Comments in prototypes work the same way as comments in files. To add a comment to a prototype, open it in the Presentation view and go to the screen you want to comment on. Next, click Add comment in the Toolbar and select the place on the screen where you want to pin the comment.

FigJam files

FigJam is a digital whiteboard for efficient teamwork. You can use FigJam files for:

• brainstorming and generating ideas,
• creating decision trees, diagrams and mind maps,
• adding feedback on projects,
• organizing research,
• planning and conducting meetings and interactive sessions.

To create a FigJam file, go to File browser and click New FigJam file.

A FigJam file consists of an infinite whiteboard and two toolbars.

1. Top toolbar

a) Main menu – a list of all FigJam functions and their keyboard shortcuts. Some options will be available only after selecting an object.

b) Templates – here you will find board templates that you can use.Ěý

c) File name – here you can see and change the location of the file or its name.

d) Users – here you will see the avatars of the people who are currently viewing or editing the file.

Useful tip: In FigJam files, too, you can click on another user’s avatar to enable observation mode and follow their actions in real time.

e) Share settings – you can manage other users’ access to the file.Ěý

f) Copy link – you can quickly allow other people to access the file by sending them a link.Ěý

g) Add comment – allows you to add comments anywhere on the board.Ěý

h) Collaborate – here you have tools that facilitate communication during teamwork and a timer.

i) Zoom/view options – you can quickly adjust the view options in the file.

2. Bottom toolbar

a) Navigation

• Move tool allows you to move and zoom objects
• Hand tool allows you to move around the file without moving items accidentally

b) Drawing tools – after clicking on the Marker tool, you have access to various drawing options. Thanks to Marker and Highlihter tools, you can draw freehand lines and shapes. This is a great way to draw attention to something important.

c) Shapes – you can use shapes to create diagrams. You can add content to the shapes and connect them with lines.

d) Stickies are the virtual equivalent of paper post-it notes you can write down your ideas on. To add a stickie, you can use the shortcut S.

Useful tip: Remember to write down only one thought per stickie. This will make it easier for you to group ideas and choose the best solutions. The stickies you create will display your name. You can remove this information or restore it using the Show/hide author option.

e) Text – this is a key element when brainstorming and communicating information to other team members.

f) Connectors and lines – lines allow you to create paths between shapes and stickies, change order or add notes.

Click the lines icon on the toolbar and select the type of line you want to create, then click and drag the cursor between the objects you want to connect.

Lines can be moved around the board and combined with other objects.

g) Sections – thanks to this option, you can group related objects or guide workshop participants through specific activities. Using sections will help you avoid chaos on the board.

h) Stamps and emotes – allow you to add visual responses that can be more effective than text in certain situations.

Stamps can be used to generate heat maps, vote on ideas or assign people to tasks.

Emotes are temporary reactions used, among others, to provide quick feedback during collaboration and attract other users’ attention.

i) Widgets, stickers, templates and more – here you will find the resources you can use while you work.

You’ve just read about collaboration tools in Figma. Read also: 7 factors of outstanding User Experience.

If you like our content, join our busy bees community on

Prototyping in Figma – table of contents:

1. Usability testing
2. Creating prototypes
3. Prototype options
4. Flow
5. Sharing prototypes

Usability testing

Interactive interface prototypes allow you to map put the path of user’s journey through your application. You can use them for research to find out how users interact with your interface. This is called usability testing, and it helps you find problems that users may encounter.

Usability testing in the early stages of developing an application helps minimize the losses a company could bear by launching an untested application to the market. Sometimes ideas that seem great to designers turn out to be unintuitive to users.Ěý

Creating prototypes

You can create prototypes in the Prototype tab in the Properties panel.

Prototype options

When you do not select any layer, you will see the settings for the prototype in the Prototype tab.

• Device – select Device and Model
• Preview – here you can see how the settings you change will affect the appearance of the prototype you share later.
• Background – you can select a background color to customize the prototype to match your brand
• Flows – you can choose the initial frame of the prototype

Useful tip: A flow starting point will be created automatically when you add your first connection between two frames.

Flow

A flow is the network of frames and connections in a single page. You can create several separate flows, such as a flow for creating an account, another for viewing products or completing transactions.Ěý

To create a connection you must have the Prototyping tab active, then select a frame or object in a frame and use the circular node to drag a connection to another frame.

You can adjust the settings of the added connections in the Interactions section of the Properties panel, after clicking on the connected object. You can specify the type of interaction.

Once you click on a given interaction, you have access to additional settings.

a) Interaction details – specifies the type of interaction (On tap, On drag, While hovering, While pressing) and what the interaction should cause (Navigate to, Change to).Ěý

b) Animation – here you can specify how the element should behave after the interaction.Ěý

To remove the connection, click and drag on both ends.

Sharing prototypes

To share a prototype, you must first preview it with the Present button. In the prototype preview, the Share prototype button in the Toolbar will be available.

When you click the Share prototype button, a window opens where you can set the access level (Can view, Can edit) and specify who can open the file (Anyone with the link, Only people invited to this file).

Task 7. Add connections between your screens.Ěý

• Link the “Log in” button to the Home frame.
• Link the photo and product name that are in the Home frame to the Product frame.
• Use the “Back” button and create a connection to return to the Home screen.

After adding connections, you can preview them with the Present button and check how your prototype works.Ěý

You’ve just learned more about prototyping in Figma. Other resources: What is UX research?

If you like our content, join our busy bees community on

Libraries in Figma – table of contents:

1. Styles
2. Components
3. Publishing styles and components in a library

Styles

These are sets of properties that can be applied to layers in projects. To create a style you must first select the object whose properties you want to save. Then click the Styles icon in the Properties panel next to the selected property, then click the + icon.

A window will open where you’ll need to enter the name of the style you are creating. Click Create style.

You will see the created styles in the Properties panel when there are no objects selected.

In the Edit styles panel, you can add a description and edit the properties of each style. Whenever you make changes to the properties of the selected style, those changes will be applied to all objects that use it.

You can create the following styles:

Color (paints) styles – for fills and strokes, text and backgrounds, and even for images and gradients.

Text styles – thanks to text styles you can define styles for headings and main text. You can apply text styles to an entire block of text or only to part of the text in the block. You can define: font family, size, line height, spacing.

Note: with text styles you can’t set text alignment.

Effects – here you can define shadow and blur attributes.

Layout grids – creating Layout grids styles is useful if you want to duplicate a certain structure in multiple projects.

To apply a style to the active layer, click the Styles icon in the Properties panel next to the selected property, and select the style from the list.

To remove a style from the active layer, click on Detach styles. This is useful when you want to make changes to an object without interfering with the style.

Task 6.1. Practice creating styles in Figma. Create styles for section headings on the home page, product names, and prices.

Components

These are the building blocks of your designs that you can reuse. They can be icons, buttons or more complex elements. Components help keep your designs consistent and allow you to quickly make changes to multiple files and projects.

To create a component, you must first select the layers that will make up the component and then click Create component in the Toolbar.

The component layers will be embedded in a special frame and highlighted in purple, so you can easily tell them apart from other layers in the Layer panel.

Components take automatic names. You can rename components in the Layers tab. Just like in the case of other layers, double-click on the name. After selecting a component in the Properties panel, you can add a component description and Documentation link for team members.

You can view the components in the Assets tab in the Layers panel.

Task 6.2. Practice creating components in Figma. Create the following components:

• a search bar – consisting of a placeholder, magnifying glass icon and “Search” text,
• a bottom bar – consisting of a rectangle and icons,
• CTA buttons – consisting of a rectangle and text.

Publishing styles and components in a library

When you create styles and components, you only have access to them in the current file. To use styles and components in other files, you can publish them in the library. The option to share styles is available in the Toolbar – expand the menu next to the file name and click Publish styles and components.

You’ve just learned how to use libraries in Figma. Read also: What does a UX designer do?

If you like our content, join our busy bees community on

Typography and text in Figma – table of contents:

1. Adding text
2. Text properties

Adding text

You can add text to your file using the Text tool that you will find in the Toolbar

You can create two types of text boxes. Choose the Text tool, and then:

• clik on the Canvas – in this way you will create a text box that will adjust automatically to the entered text.
• click and drag the cursor in the Canvas, in this way you will create a text box of fixed width. This means that text that does not fit into the width of the box will be automatically moved to the next line.Ěý

Text properties

Just like in the case of frames and shapes, you can see text properties in the Properties panel, after selecting a text layer. Available options let you control many aspects of text layers, among others, size, font and alignment.

1. Text styles – here you can view and create text styles.

2. Font – here you can choose a type of font that you want to use. After clicking, a dropdown list will be expanded. If you know the name of the font, just enter it.

Useful tip: Text is one of the key elements of interface, therefore its legibility is very important. Avoid using script fonts. Although they look beautiful, they make content less readable. If you don’t have much experience with typography, use the following fonts: Open Sans, Roboto or Source Sans Pro.

The “Typescale” plugin will make your work easier as it will select the appropriate sizes.

3. Text weight and slant – here you can customize the appearance of the text by selecting one of the available font variants.

Useful tip: some fonts don’t have their variants, so this option may not be available.

4. Text size – here you can change the size of the text.

Useful tip: changing the size of the text box, doesn’t change the text size.

5. Line height – allows you to adjust the vertical distance between the lines of text.

6. Letter spacing – lets you adjust the horizontal distance between letters.

7. Paragraph spacing – helps you adjust the horizontal distance between paragraphs.

8. Auto width – it makes the length of the text box adjust to the length of the text you type.

9. Auto height – enabling this option makes you control the width of the text box, and its height will adjust automatically.

10. Fixed size – this option makes the size of the text box adjust to its content.

11.Text align left / center / right – allows you to adjust the horizontal alignment in the text box.

12. Align top / middle / bottom – lets you adjust the vertical alignmentin the text box.

Task. 5.1. Add texts to your application. Remember to keep the font sizes appropriate. Make sure that the most important content is eye-catching.

• In the case of an e-commerce app, it’s important that the price information and product name are clearly visible. Use the bold font to highlight the text you want to draw the user’s attention to.
• Ensure that CTA (call to action) buttons are clearly visible and encourage the user to click on them. In this case, the buttons are: “Log in” and “Add to cart”.
• The color of the button and the color of the text on it must contrast with each other so that the text is easy to read.
• Add labels to the pleceholders.Ěý

You’ve just learned how to use typography and text in Figma. Read also: Do you know what UX design means?

If you like our content, join our busy bees community on

How to create shapes in Figma – table of contents:

1. Adding shapes
2. Properties panel – Design
3. Edit object
4. Boolean groups
5. Masks

Adding shapes

You can add a shape using the Shape tools function that you will find in the Toolbar. This function allows you to create basic vector shapes: rectangle, line, arrow, ellipse, polygon, star.Ěý

You can also create custom shapes using Drawing Tools. You can choose either a Pen or a Pencil.

Just like in the case of frames, there are many ways of creating shapes:

• After selecting a shape from the Shape tools list, click on the Frame or the Canvas area. This will create a shape with a default size of 100×100 px.
• If you want to have control over the size of the created element, click on the Frame or Canvas area and hold down the left mouse button, then by moving you can manipulate the size of the shape.
• If you want to create a perfect square, circle or polygon, hold down the Shift key while dragging.

Each shape, text object or image that you add to the Canvas will be a separate layer. This allows you to modify the individual properties of each element.

Properties panel – Design

You can view and edit object properties in the Design tab of the Properties panel. The type of layer determines what parameters will be displayed here. Most parameters are the same in all layer types.ĚýIf you do not choose any layer, the Properties panel will display all local styles for the file and the Canvas color.

In the Design tab, you can add the following parameters:

1. Alignment – alignment tools allow you to properly align layers in the Canvas with respect to each other. These functions are only available when two or more layers are selected.

2. Distribution and Tidy up – this function allows you to organize layers by creating equal spacing between them.Ěý These functions are only available when two or more layers are selected.

3. Position of the Canvas (X and Y) – here you can adjust the position of layers in the Canvas along the horizontal (X) and vertical (Y) axes.

4. Dimensions of the Object (Width and Height) – here you can change the size of a layer.

5. Constrain proportions – allows you to keep the proportions of the shape while resizing. You can change the height or width of the shape, and the second parameter will adjust automatically.

6. Rotation – here you can set the angle of a frame.

7. Corner Radius – with this function you can round the corners of the frame.

8. Independent corners – the independent corner setting lets you adjust the corner radius for each corner.

9. Layer (Blend Modes) – here you can specify how two layers should blend together. You can apply only one blend mode to each layer.Ěý

10. Fill and Stroke – you can apply fills and strokes to shapes and text layers. To add a fill or stroke, select the desired layer and click on the + icon. You can add several fills and outlines to each layer.

For fills and strokes, Solid color is set by default. To adjust the properties, click on the color swatch. This will open the color sector, where the options are availablle: Solid color, gradient (linear, radial, angular, diamond) and image.

If you need to modify the stroke style more, you can use Advanced stroke settings, which are available under the ellipsis icon.Ěý

Useful tip: You can switch on and off the visibility of each property in the active layer using the Eye icon. Active properties will be displayed in black, so you can easily distinguish them from the inactive ones.

11.Effects – here you can add a shadow or blur to the layer. To adjust the effect values, click Effect settings, which are located under the button with the sun icon.Ěý

12.Export Settings – here you can export the selected layer to the format of your choice: PNG, JPG, SVG and PDF.

Task 4.1. Plan the layout of your application’s interface elements. First, create wireframes using simple shapes.Ěý

Useful tip: Remember to give each layer proper names on a regular basis. If you don’t keep an eye on this, you will certainly make a mess in your layers.Ěý

Let’s start from the Login screen:

• At the top of the screen we will place the logo of the application being designed.
Ěý
• There will be placeholders with labels below: login and password. At this point you can mark the place for the text with a rectangle.
• At the bottom of the screen we will place the login button.

Useful tip: If you are looking for a logo for your project, visit this website: and download it for free.

Every file on Freepik.com has a license notice. Before downloading, make sure its license allows you to use it as you need.

You can also use a logo available in the “Logo creator” plugin.

Now let’s deal with the Home frame:Ěý

• We will place a search bar at the top of the screen.
• There will be the “Bestsellers” header below.
• Under the header, we will place product images in two columns. Create a rectangle that fits one column and duplicate it several times.Ěý
• Under each product there should be some space for its name and price.Ěý
• Another element of our interface will be the bottom bar, where we will place the icons: home, favorite, profile, basket.

Useful tip: You can easily add icons to your project, copying them from the Figma library.

Community.ĚýYou will find a sample file here: Ěý

Just click on Get a copy button and it will open Iconia file – fully editable icon pack of 1,300+ ready to use and scalable vector icons in 6 unique styles. To copy the selected icons, go to the Iconia library page in the Layers panel.Ěý

Find the icon you want to use in your file, right-click on it and click Copy. Then go back to your file, right-click anywhere again and choose Paste here.ĚýAnother way to add icons is to use plugins.

Remember that consistency of interface is very important. Decide on one style of icons and stick to it everywhere in your application. Apply the same principle later to text styles, image sizes and other elements.

Once you have planned the layout of the elements on the home page, you can move to the Product frame:

• At the top of the screen, we will place the “Back” button on the left side.
• There will be a large photo of the product below.
• In the right corner of the photo, we will place a button with the “favorite” icon.
Ěý
• Below the photo, we will place the name and price of the product and space for a description.
• At the bottom of the screen we will add a CTA button “Add to cart”.Ěý

Edit object

You can easily modify all shapes using the tool Edit object which can be found in the middle of the Toolbar. In order to use this function, first you need to select the shape that you want to modify.

Activating the editing mode will make new features appear in the Toolbar, and you will see corners points on the edited shape. You can click on the desired corner point and drag it to change the form of a shape.Ěý

You can also add other Corners points to the shape using the Pen tool. This will allow you to make more modifications.Ěý

You can freely bend shapes using the Bend tool. Select the Bend tool in the Toolbar, and then click on the chosen corner point.

The Paint bucket tool allows you to remove and restore the fill of a shape. To do this, select Paint bucket and then click on the shape you are editing.Ěý

In order to exit the editing mode, click Done.

Boolean groups

If you select two or more shapes, the Boolean groups tool appears in the Toolbar. It allows you to create custom shapes by combining them, using one of the four available formulas: union, subtract, intersect, exclude.

• union selection – combines the selected shapes into one new shape.

• subtract selection – subtracts all upper shapes and their overlapping areas from the lowest shape

• intersect selection – the new shape consists only of overlapping fragments of selected shapes

• exclude selection – the created shape consists only of fragments of selected shapes that do not overlap.

After applying the Boolean group tool, all the selected shapes merge into a single layer, which means they share fill and stroke properties. You can combine them with other shapes and perform further logical operations.

Task 4.2. Practice modifying shapes with the Edit object and Boolean group tools. Even if you don’t need these functions at this stage of your project, it’s worth consolidating your knowledge through practice. Be creative and have fun. You can also try to recreate the sample shapes you see in the following screenshot.To do this, create a new page in the file or add objects next to the frames with the project, and then simply delete them.Ěý

Masks

Masks allow you to show only selected areas of an image and hide the rest without cropping. This means that no part of the layers in the masking process is removed or modified, so you can modify the mask at any time if you want to show another part of the image.Ěý

To understand this better, you can imagine a picture frame with a small opening. You will only see part of the photo in it, while the rest is hidden, but if you open the frame, you can still see the whole photo.Ěý

You can use any layer as a mask, such as vector shapes, text layers and images.Ěý The order of the layers is very important. The lowest layer in is considered the container of the mask, that is, the opening through which you will see the image.

To create a mask, make sure the layers are properly aligned. Then select both layers and choose Use as mask in the Toolbar.

All outer areas of the layer that are above the container will be hidden. Only those areas that will be inside the mask area will remain visible.Ěý

Task 4.3. Use masks to add product images to your design.ĚýRemember the correct order of layers. The layer that will be the container must be below the image layer.

Useful tip: You can download free images for your projects from the website ĚýĚý

ĚýYou can also use the “Unsplash”plugin.

You’ve just learned how to create shapes in Figma. Read also: 10 usability heuristics for UX design.

If you like our content, join our busy bees community on

Basic project settings in Figma – table of contents:

1. Frames
2. Layout grid
3. Rulers

Basic project settings in Figma

First, you need to choose an area of the Canvas to create your designs in. That’s what the Frame tool is for. You will find it in the Toolbar. After activating the Frame tool, you have a few options of creating a frame.

• click on the Canvas in order to create a default frame with 100×100 dimensions

• click and drag in the Canvas to create a frame with custom dimensions

• use the dropdown in the right sidebar to select a frame preset


After adding and selecting a frame, you have access to it in the Properties panel.



a) Position of the Canvas (X and Y) – here you can specify the position of the frame in the Canvas on the horizontal (X) and vertical (Y) axis.

b) Dimensions of the Object (Width and Height) – here you can change the size of the frame

c) Constrain proportions – It allows you to keep the proportions of the frame when resizing. This way you can change the height or width of the frame, and the second parameter will adjust automatically.

d) Resize to fit – this function lets you resize the frame to fit its contents.

Useful tip: You can also change the size of the frame manually: grab the edge or corner of the frame (the cursor will turn into a black double arrow), then drag to get the preferred size.

e) Portrait and Landscape – here you can change the orientation of your frame to vertical or horizontal

f) Rotation – it lets you adjust the angle of a frame

g) Corner Radius – thanks to this function you can round the corner of a frame to create softer edges

h) Independent corners – the independent corner setting lets you adjust the corner radius for each corner.

i) Clip Content – it will allow you to hide any objects that extend beyond the frame’s boundaries

j) Auto Layout – it lets you create responsive frames

k) Layout Grids – this feature helps create a structured user interface

l) Fill – using this option will let you fill your frame with color, gradient or photo

m) Stroke – it helps add strokes to a frame. You can also use Advanced stroke settings that can be found under the ellipsis icon.



n) Effects – here you can add a shadow or blurs to a Frame. Click the Effect settings icon to adjust the shadow’’s settings.



o) Export – here you can export your frame to the following formats: PNG, JPG, SVG and PDF.Ěý



Above each frame in the Canvas, its name is displayed. In order to change it, click on it twice. You can copy frames along with its contents and paste them to the Canvas as many times as you want.

Task.3.1 Start working on the project from choosing the right size of a frame.

Useful tip: If you don’t know what size should your frame be, a good choice would be to use one of the most popular screen sizes. Go to for more information.

In this tutorial we’ll design an e-commerce mobile app, so let’s select one of the most frequently used resolutions for smartphones – 360×640 px.

We’ll prepare 3 projects together

• login screen (Login)
• homepage (Home)Ěý
• product landing page (Product)

After adding a frame, duplicate it right away, and name each screen properly, so as to keep the file organized.



Layout grid

Layout grid is a system of horizontal and vertical lines (columns or rows) that help you keep elements precisely aligned in your frames. A properly set grid will certainly make your work easier and speed up the entire design process. There are two ways to set the layout grid in your design:

1. you can enable the grid view even before you start designing and use ready-made grid layouts (if there are any in your library) or create your own,
2. you can also start creating the design first, and set the grid later based on the designed elements.

Useful tip: If you’re a novice designer, we recommend applying a layout grid to any project. There is nothing worse than a completely empty workspace.

You can add a Layout grid to an active frame in the Properties panel. You have 3 options: grid, columns, row. You may choose a few options at the same time.



You can adjust the settings of every grid in the Layout grid settings panel. You can turn the grid’s visibility on or off at any time by clicking the Eye icon.



Useful tip: If you don’t know which layout grid to choose in your project, you can use the Grid System plugin, which will do it for you.

Task 3.2. Set the layout grid in your project. For the purposes of this project, we selected Columns and set the following values:

• Count 2 (number of columns)Ěý
• Margin 20 (distance of columns from the edge of the screen)Ěý
• Gutter 30 (distance between columns)


Rulers

Rulers are another useful feature that will help you align the elements in the file and keep it in order. To switch on the Rulers view, click on the Main menu, then View and Rulers.

Rulers can be seen at the top and left of the Canvas. With this feature, you can create vertical and horizontal lines (guides) – click and hold the chosen ruler, then move the cursor to the Canvas area. A thin, red line will appear, which you can move. You may create as many guides as you want.Ěý You can easily delete unnecessary lines – just select the line (the chosen line will turn blue), and then click Delete.



Task 3.3. Experiment with adding rulers. They will be helpful when aligning the elements.

You’ve just learned about basic project settings in Figma. Read also: AI-assisted chat bots.



If you like our content, join our busy bees community on

]]> /basic-project-settings/feed 0 /figma-interface-basic-information-figma-for-beginners-2 /figma-interface-basic-information-figma-for-beginners-2#respond Tue, 16 Aug 2022 10:38:26 +0000 /?p=39749 In this article we will discuss the elements of the Figma interface. Getting acquainted with the interface at the beginning will make your later work much easier. We will discuss the file browser and application interface when editing a file. Read on to find out more.

Figma interface – table of contents:

1. File browser interface
2. File interfaceĚý

File browser interface in Figma interface

The first thing that you’ll see after logging in to Figma will be the File browser, which will allow you to navigate your account. From here, you can access your projects, teams, and resources. The file browser interface consists of 3 sections: Navigation bar, Sidebar and Files.



1. Navigation bar is located at the top of the screen and allows you to perform certain actions at the account level.



A) User name – here, the name of the active user is displayed. When clicked, you can switch between the accounts you are logged into on a particular device.

B) Search bar – in this section, you can quickly search for projects, coworkers, and files by name.

C) Notifications – this is where notifications will appear about everything that will happen on your account.

D) Account menu – here you can manage your account settings and installed plugins.

Useful tip: If you are using the Figma desktop app, you can easily switch between projects and the file browser. Projects open as new tabs, and the file browser is marked with the Home icon.

2. Sidebar – this is the interface area located on the left side of the screen. It allows you to navigate through files and prototypes.



Recents – in this tab the files and prototypes you have recently viewed or edited are displayed first.

Drafts – here you will see all the draft versions you have created. Additionally, you will find the Deleted tab where you can view archived files.



You can restore or permanently delete already deleted files – right-click on the file to see these options.



Community – this is a space where you can browse files and plugins shared by other Figma users. We will return to this section in our next blog post.

Teams – here you will see all the teams that you belong to.

3. Files – in this section, all your files will be displayed.

For each page in the File browser, you can choose how to display the files: Show as grid or Show as list. By default, the grid view is set.



Files may be filtered and sorted according to your needs.



Above the list of files in the Recents and Drafts tabs, there are buttons for adding files: New design file or New FigJam file. Each file type has its own set of features and tools.

Design files will let you create your interface designs.

FigJam files are digital whiteboards used for, among other things, online meetings and workshops.



Task 2.1.ĚýGet acquainted with the File browser interface in Figma and open your first project. Use the New design file button.

File interface

Your user interface when editing a file in Figma consists of four sections: Canvas, Toolbar, Layers panel, Properties panel.



1. Canvas is the main area, located in the center of the screen. This is the space where you will work.

2. Toolbar is the bar located at the top of the screen. Here you will find the necessary tools and functions you need to design interfaces.



a) Main menu – in this place you have access to the list of all functions in Figma. Keyboard shortcuts are also displayed on the list.



Useful tip: You can view all Keyboard shortcuts in a special panel. In order to switch it on, click on the Main menu > Help and account > Keyboard shortcuts.



The Main menu contains the following options:

• Back to files – it moves you to the File browser.
• Quick action – here you can search for functions you need by name.
• File – it lets you Save and Export files.
• Edit – here you will find basic functions for editing files, such as Undo, Redo, Copy, Paste and advanced functions for selecting objects.
• View – it allows you to control the Grids and Rulers view settings, it also contains functions for zooming and navigating within a file.Ěý
• Object – here you’ll find all the functions needed to work with objects.
• Text – it allows you to format text (Bold, Italics, Alignment) and create Bulleted and Numbered lists.
• Arrange – it lets you organize objects using many variants of Align and Distribute functions.
• Plugins – here you can manage installed plugins. Plugins extend Figma’s functionality and make the design process easier.
• Integrations – using this function you can share your designs in connected applications.
• Preferences – here you can customize Figma’s settings, when it comes to dragging objects and the visibility of selected elements.
• Libraries – this module will contain components and styles that you can use in your file.

b) Move and scale tools

• Move tool lets you move objects in Canvas and reorder layers in the Layers panel.
• Scale tool allows you to resize layers without distorting them.

c) Frame and Slice tools

• Frame tool lets you choose the screen size of the device you will be designing on.
• Slice tool allows you to export a specific part of the screen to a new layer.

d) Shape tools – here you will find basic geometric shapes and the Place image function.

e) Pen and Pencil tools

• Pen tool is used to create custome shapes.
• Pencil tool allows you to add hand-drawn images.

f) Text tool – it creates text layers.

g) Hand tool – it allows you to move around the project and click within the file without selecting and moving objects accidentally.

h) Comment tool – it allows you to quickly exchange ideas with team members.

i) File name – here you can see and change the location of the file or its name.

j) Users – here you’ll see the people who are currently viewing or editing a file.

Useful tip: When you work in a team, you can click on another user’s avatar to enable the observation mode and track their actions in real-time. The canvas and avatar of the tracked user will be marked with a colored frame when the Observation mode is on.



You can also make yourself more visible so other team members can easily track your actions. Click on your avatar and select Spotlight me.



k) Share settings – here you can manage other users’ access to the file.

l) Present – this option allows you to preview the file and interact with the created prototypes.

m) Zoom/view options – here you can quickly adjust the file view options.

3. The layers panel is the area on the left side of the screen. He4re all components and layers of the file will be displayed.

a) Layers – here you will see all objects added to the Canvas. Each object is a separate layer. Next to each layer you will see an icon that indicates its type.



You can change the name of the layer by double-clicking on the selected layer in the Layers panel.Ěý

Useful tip: It’s not easy to remember about changing the names of default layers, but try to bear it in mind. This will keep your file in order and make it easier to find a specific element when you want to edit it. However, if you still happen to forget about it, nothing is lost. There are plug-ins such as “Clean Document” that will help you clean up the mess.

New object layers are placed in the parent frame or group. This makes it possible to collapse and expand the view of the frame and group layers.



You can lock and unlock each layer. To do this, click on the Padlock icon that appears next to the layer name when you hover over the layer. You will be able to distinguish locked or invisible layers very easily from other layers, as they will be marked with a suitable icon.

Useful tip: The possibility to lock layers is very useful, especially when some of them are in the background. This will help you avoid moving elements accidentally.

Here you can also switch off and on the visibility of the selected layers. To do this, click on the Eye icon. You can very easily differentiate between locked and disabled layers on the list of layers – they are marked with suitable icons.



b) Assets – In this tab you will see the components that you can use in your file. These can be icons, buttons, or other more complex user interface elements. To find a specific component use the search box. Components can be searched for in the current file and the libraries, you have access to.



c) Page – You can add an unlimited number of pages in each file. Each page has its Canvas backdrop, so you can create separate prototypes in one file.



Useful tip: You can adjust the width of the Layers panel. To do so, grab the right edge of this panel – your cursor will turn into a white double arrow. Then drag the edge until you get your preferred width.

4.Properties panel is the area on the right side of the screen, which consists of three tabs: Design, Prototype, Inspect.

a) Design – here you can view and adjust the properties of all layers: frames, shapes and texts.

b) Prototype – here you will find the settings of the prototype and connections between elements in the file.

c) Inspect – in this tab you can see how to put the individual objects of your project in code. The available formats are: CSS, Android and iOS.Ěý



Task 2.2. Get familiar with the file interface in Figma. Make sure you already know the names of the main elements of the interface so that it will be easier for you to navigate through the file when doing practical tasks.Ěý

That’s all you need to know about Figma interface. Check out our other articles: Scaling scrum.

If you like our content, join our busy bees community on

]]> /figma-interface-basic-information-figma-for-beginners-2/feed 0 /intro-to-figma-figma-basics-for-beginners /intro-to-figma-figma-basics-for-beginners#respond Thu, 21 Jul 2022 06:00:58 +0000 /?p=32897 Do you want to start your adventure with design, but you don’t know in which direction to go? We have prepared a comprehensive tutorial on Figma for you, a powerful tool that will help you build wonderful prototypes. After completing all our lessons, you will learn not only the basics of design, but also create the first project for your portfolio. Check out our intro to Figma. Read on.

Intro to Figma – table of contents:

1. What is Figma for? Intro to Figma
2. Who uses Figma?
3. How Figma works
4. Is Figma better than Sketch and AdobeXD?Ěý
5. How to start? Browser vs. Desktop App

What is Figma? Intro to Figma.

Figma is a complex user interface design tool that is used by teams at every stage of the design process. Even Figma’s starter plan offers its users all the necessary functions to create projects freely. Thus, we can say without hesitation that it is an excellent app for novice designers.

Who uses Figma?

Figma is aimed at people involved in graphic design and software development (UX and UI designers, web developers), as well as product owners or managers. It’s ideal for teams, as it has a lot of features for effective collaboration during real-time development. To put it in a nutshell, you and your team members can simultaneously log into the project and make changes to it, as well as observe the actions of other users.



How Figma works

Figma is entirely browser-based, which means it can run on iOS, Windows, Linux and even Chromebooks. You can log in from any device and always have access to your project, without installing software or buying several licenses. You also don’t have to worry about lost progress, as everything is saved automatically.

It’s great that you don’t need a top-notch graphics card and a lot of RAM to use Figma. It is a well-optimized tool, so it makes it possible to create extensive projects even on weaker hardware, without the device crashing. You will definitely love the efficiency of the program and the clarity of its interface.

Is Figma better than Sketch and AdobeXD?Ěý

In recent years, Figma has been attracting more and more users and catching up with the most popular software available on the market: Adobe XD and Sketch. If you are wondering which tool will be best for you, check out the table below with a comparison of their options. The key features of the applications have been taken into account here, such as the platform they run on, the operating system, the possibility to collaborate with a team, plug-ins, pricing and the offered support.

The final assessment of the competition between Figma, Adobe XD and Sketch always boils down to the designer’s personal preferences and needs. Each of these applications has features for effective interface design. However, the general view is that Figma is the best choice for beginners – due to its free version, the availability of learning materials, and the possibility to work on any device.Ěý



How to start? Browser vs. Desktop App

In order to use Figma, just visit this website: and register. After you log in, you can start working on your projects straight away.



Apart from its browser version, Figma also has an app that you can install on any device. However, you need to remember that in both cases you will need an internet connection to work. There are no functional differences between the browser version and the app. Decide which one you would like to use.Ěý

To download Figma Desktop App, go to and choose your device’s operating system.



Task 1. Get ready to work on your application. Hit this website: https://www.figma.com and sign up. In this way, after reading our next article, you’ll be able to get straight to action.Ěý

You’ve just read our intro to Figma. Check out our other resources: Digital twins. When Black Mirror becomes a reality.

If you like our content, join our busy bees community on

]]> /intro-to-figma-figma-basics-for-beginners/feed 0