Getting the desktop app

For the best experience it is recommended to use desktop app. You can download it here:

https://www.figma.com/downloads/

Getting Around

Once you’ve downloaded your app and logged in you’ll get to the landing page. Find more details about individual items below.

Open

1. Clicking the House icon always gets you to your landing page.

2. The Black bar on the top works similarly to web browser- various tabs here are design files that you have currently opened (whatever you have opened here is unique to you, even thought there can be multiple people working on the same file at the same time)

3. Clicking on Your name opens Themes and settings

4. You can go directly to the file you desire to work with if you type its name or a word it contains into the Search field.

   Open

   

5. Clicking on the Recents opens a gallery of all the files you’ve opened recently. This would be helpful if you closed a file by accident and don’t want the hassle of searching for it in folders and you don’t remember its name.

6. If you are a member of multiple teams clicking on Kinetic/ (Company) icon will help you to navigate between companies should you be member of more than 1.

7. Clicking on the All teams and keeping it selected will mean, that you will see the landing page just like in the picture above. Teams that are important to us are Student Web and Kx BnB.

8. For a quick access you can add the team/ design file to Starred.

   1. To add a team into Starred. Simply click on the little star circled in the picture and the page appears on your Stared side bar:

   2. To add a file to starred go to the folder where file is present and click on the little star:

Student Web structure & Substructure

Once you double click the Student Web team you will be presented with the structure below. You can personalize how exactly you see the team by clicking 1 (which will sort the items in your desired order) or 2 ( which will display the team as a list or as a grid)

Let’s say you want to add a new design file for Hub and Applications page for a new logo. Double click Hub and Applications. To add a new file click +Design file. This will crate a design file in Hub and apps folder and open it for you.

The crated file has now name Untitled. To ensure we can find our files easily naming convention is clients name. To rename a file simply click on 'Untitled'. This will become highlighted and you can type you desired name:

Creating designs

Now we have our ‘Tabula Rasa’, clean board and we can start adding some structure to it. We can either copy baseline files and update those or we can crate new items from scratch.

Using a Baseline design:

1. Go to baseline Hub and Applications design file

2. Select all files and click Copy ( similarly you can just do CTRL +C)

3. go to your new design file and click Paste (CTRL +V)

4. TA-DA!! Now you can start editing this file to match the clients requirements

Starting from scratch

When starting from scratch we need to understand the Figma structure.

Frame

We call every “representation of a web page” on the board in Figma FRAME. Frames act as a top-level containers for everything we crate in Figma. Figma loves keyboard shortcuts. There are multiple ways to create a frame. One of them is simply clicking F key. Another way to add frame is using top design toolbar. Hovering over icons opens a tooltip which tells you what each of the icons mean.

Once the Frame has been clicked a left side menu will open with different pre-set screen sized Frames. You can also alternatively just drag and drop across the screed to add your custom sized frame.

Adding an Object

To add a container we can click on the rectangle and drag and drop it in place. Once we added it a menu on the right had side appear with options for this object type.

First we are gonna give our object a border make our object stand out. We change it’s color by clicking FILL and selecting a color. We will add a border around the shape. This is done with STROKE. Clicking on + adds basic border and open menu with stroke personalisations. We can remove it by clicking - icon.

Simple way

Constraints

Constraints allow you to fix design elements to different sides of the parent Frame. This can help with building layouts to support different device sizes. These are horizontal and vertical and can be set independently.

First (burgundy) container is set to be fixed to the left horizontally and to be in the middle vertically.

Second (pink) container is fixed to the bottom vertically and fixed to the middle horizontally.

The video below shows the behaviour of these containers to demonstrate constraints function:

Scale functionality can be particularly helpful when creating responsive designs:

Components

Components give us a chance to reuse existing parts of our designs, so we don’t have to create the same items over and over again.

There are 2 types of components:

• MAIN COMPONENT - defines the properties of the component

• INSTANCE - copy of the Component that can be reused. Instances are not copies in the real sense - we can override their properties without impacting the main component. Instances are linked to the main component (unless they are detached), any changes done to the Main component will be applied to the instance.

How main component is created:

Select your new component, right click on the element and choose Create component.

Once the component is created it has a purple border (rather than the blue above).

We can access our components from the assets section:

Component 1 as a name isn’t very descriptive. We should give our components easy-to-find & intuitive names. You can change the name in the highlighted section.

To insert an INSTANCE go to assets, click on the desired component and click insert instance:

Once the instance is added, we can change it without impact on main component;

Styles

Styles allow us to set properties of object like color, font or effects and reuse them across our designs.

How to create a font style:

1. Click on your text and create a font style that you will be reusing

2. Once you’re satisfied with this font click '+' plus button to create a new text style

3. Create a name and add a description and click Create style button

Once you change properties of your style all components using this style will change. This can increase the speed of change of component styles.

Adding a new font to Figma

You will need to have a desktop version of Figma to add a new font. When a client wants a font that currently isn’t in our Figma library and it’s free to use/licensed, we can add it to Figma in the following way:

1. Download the font online. Fonts usually come in a form of Zip file.

2. Open the downloaded folder and install the font

3. If your Figma app was running when you installed your font restart your app to find the font in the font library.

4. Done! Now you can start using your font. If the font doesn't show after restarting your app try extracting the Zip file into some folder first and then install. This should solve the issue.