Figma - Introduction

Description

Introduction to Figma

Figma has rapidly become one of the foremost tools for web design and development. Embraced by numerous web agencies both in Iceland and globally, its appeal lies not just in its capabilities for web design, but also in graphics creation, prototyping, presentation, and collaboration. This guide will introduce you to the fundamental tools within Figma and showcase what they offer.

Setting Up Figma

  1. We start by going to Figma.com and creating our account.
  2. Now in the upper right corner we can click on "+Design file" and create our first project.
  3. We're here! Feel free to roam around and explore and get familiar with tools of Figma.

We can use figma in two ways in the browser like we're doing now or we can download and install a figma desktop application here are a couple of pros and cons for both.


Figma desktop:

pros:

  • Performance: While Figma is optimized for browsers, the desktop app can sometimes offer slightly better performance, especially with larger files.
  • Offline Mode: The desktop app allows you to work on files without an internet connection (though real-time collaboration requires connectivity).
  • Keyboard Shortcuts: Some keyboard shortcuts, especially system-level ones, work more seamlessly in the desktop app and allows us to work faster on our projects.
  • OS Integration: Easier integration with other apps on your computer, like using third-party plugins or dragging and dropping files.
  • Dedicated Workspace: Without the distractions of other browser tabs or notifications, you can focus solely on design.

cons:

  • Updates: Even though Figma's desktop app updates automatically, there might be slight delays compared to the browser version.

Figma browser version:

pros:

  • Universal Access: As long as you have an internet connection and a modern browser, you can access Figma from any computer without needing to install any software.
  • Always Updated: The browser version will always be the most up-to-date since updates are pushed immediately to the web platform.
  • No Installation Required: No need to download or install anything, which can be handy on shared or restricted computers.

cons:

  • Performance: While Figma is highly optimized for web, for some users, especially with extensive design files, the browser version might feel a tad slower.
  • Internet Dependency: You always need an internet connection to access and work on your files.
  • Browser Limitations: Certain functionalities or keyboard shortcuts might be restricted due to browser limitations.

In conclusion Figma for browser is for lightweight uses and Figma for desktop is for more extensive projects, but for our studies it's recommend to download the desktop version.


Now let's get started with Figma! Below you can see what every tool in figma does.

Example

Idea for return

Return:

  • Create some design display the usage of Figma tools
  • Tell us about your experience with Figma whether you are using it for the first time or if you have used it before.

Optional:

  • If you feel confident create a landing/home webpage of a website.

Topics

    return
  • Things to Google:

    • Figma beginners guide
    • Figma tools explained
    • Figma design tips and tricks
    • Using Figma for team projects
    • How to use plugins in Figma
    • Figma prototyping tutorial
  • ;

Tips

If you get stuck you can always contact us on Slack and we will reply to you as soon as we can. You can also ask us to do a “huddle” (a video call on Slack) with you and then we will find a time to do that.

Requirements

Knoweldge
  • Understand what basics tools in figma do.
Skills
  • Be able to use basic tools in figma to create something.
You are not logged in, if you want to return this guide you need to log in via authpage