Figma

You've probably heard about Figma – a tool that has taken the world of user interface design by storm in recent years, becoming the industry standard for teams developing web and mobile applications. Figma is a tool that works directly in your browser and allows designers and developers to work together on interfaces in real time. No more sending files back and forth and confusion over project versions!
Figma has become an indispensable tool for UX/UI specialists, offering a complete environment for designing user experiences and interfaces – from research and wireframes to pixel-perfect mock-ups.

Collaboration in Figma – this is how it really works!

Real-time operation

Imagine that your entire team can work on a project simultaneously — that's how Figma works! It's like drawing together on a single sheet of paper, only digitally:

• You can see other people's cursors in real time.
• You can watch others edit elements.
• Changes synchronise immediately.
• There are no conflicts when saving.
• Fast iterations and immediate feedback.

FigJam – a digital whiteboard for your team

FigJam is like Figma's little brother – a place where you can brainstorm with your team, draw diagrams and schematics, stick digital sticky notes, vote on ideas using emojis, use ready-made templates for workshops, or organise remote workshops and planning sessions.

Integrations with other tools

Figma works well with other applications that you probably use every day:

Communication

• Slack – notifications about changes and comments
• Microsoft Teams – preview projects without leaving the chat
• Zoom – share projects during meetings

Project management

• Jira – linking projects to tasks
• Asana – automatic status updates
• Trello – integration with cards and boards
• Linear – tracking project progress

Developer tools

• GitHub – synchronisation with repositories
• GitLab – automatic updates
• Zeplin – specification export
• Abstract – project versioning

What's cool about Figma?

Ease of use

You don't need to install anything – all you need is a web browser. Projects are saved automatically, and you can access them from any computer. Want to show a project to a client? Just send them a link!
Figma allows you to start working on your project immediately without having to set up your environment – just open your browser and you can start creating professional mock-ups.

Tools that make life easier

• Everything you need for interface design
• A clever component system that saves you loads of time
• The ability to create clickable prototypes
• Lots of useful plugins

Free or paid? We compare the versions of Figma

What will you get for free?

• Unlimited number of files to edit
• Basic design tools
• Real-time collaboration
• Three projects to share
• Access to social plugins
• Basic version of FigJam

What does the Professional version (2024) offer you?

• Unlimited team projects
• Advanced prototyping tools
• Custom team libraries
• Audio conversations in projects
• Better file organisation options
• More export options
• Full version of FigJam
• Price: approximately £15/month with annual payment

Or perhaps Organisation?

• Everything from the Professional version
• Advanced team management
• Centralised libraries
• Private plugins
• Analytics and reports
• Advanced integrations
• Price: approximately £35/month with annual payment

What do you need to know about performance?

Hardware requirements

Before you begin your adventure with Figma, it is worth knowing what your computer needs:

• Minimum 4GB RAM, but 8GB or more is better
• A relatively new processor (preferably no older than 4-5 years)
• An up-to-date browser (Chrome or Firefox work best)
• A stable internet connection (minimum 10 Mbps)

Large projects? No worries!

Figma can consume a lot of resources on larger projects. Here are a few tricks to help you keep things running smoothly:

• Divide your project into smaller files.
• Use frames instead of groups wherever possible.
• Close unused tabs in your browser.
• Clear your cache regularly.

What to do when Figma slows down?

• Enable low-quality rendering mode
• Hide unused layers
• Use fewer blur and shadow effects
• Limit the number of elements in a single workspace

And what are the downsides?

You need the internet

Unfortunately, you can't do anything without the internet. With a weak connection, Figma may lag a bit. There is an offline mode, but it is very limited.

You need to learn a little bit.

At first, Figma can be overwhelming – there are so many options! Don't worry, everything becomes clear with time. Some things aren't super intuitive, but you can get used to them.

Design Systems, or order in projects

A Design System is a recipe for a consistent product – a set of rules, elements, and guidelines that the entire team follows. Figma has great tools to manage all of this:

Components and styles

• You create one component and use it everywhere
• Common colours, fonts, and effects
• Libraries that you can use in different projects
• Smart element placement with auto-layout

All these tools enable the creation of consistent, scalable design systems that significantly speed up the work of the entire team and minimise the risk of visual inconsistencies.

Organisation

• You can organise everything into pages and frames.
• You can create documentation directly in the project.
• You can easily track changes in components.
• Simple labelling and tagging system.

Security at Figma – can you rest easy?

How does Figma protect your designs?

• SSL/TLS encryption during data transfer
• Automatic project backups
• Two-step verification for accounts
• Regular security audits

Access control

• Different permission levels for team members
• Ability to restrict access to specific files
• Detailed activity logs
• Option to disable access for specific domains

Data privacy

• GDPR compliance
• Ability to export all your data
• Clear privacy policy
• Control over project sharing

How do designers and programmers work together?

The code at your fingertips

• Figma generates CSS itself
• Shows all dimensions and spacing
• Text and colour properties are immediately visible
• You can easily export the files you need

Communication

• Comments directly in the design
• Tag people like on Facebook
• Shared component libraries
• You can write down all the technical details

What is it like to work at Figma?

Interface

It is transparent and straightforward. Everything is at your fingertips, you can easily switch between projects, and the most frequently used tools are always on top.

User experience

• Works smoothly and quickly
• Keyboard shortcuts speed up your work
• Hints appear at the right moments
• The interface adapts to what you are doing

Where can one learn this?

Learning how to use Figma doesn't have to be difficult – the platform offers an intuitive interface that allows you to quickly master the basics, and you'll learn advanced features gradually as you work on real projects.

Official materials

• Figma Academy – a great place to start
• Documentation (also available in Polish!)
• Figma blog full of tips
• Official YouTube channel

Inne źródła

• Kursy na Udemy i podobnych platformach
• Masa tutoriali na YouTube
• Społeczność na Discordzie
• Blogi doświadczonych projektantów

Practice

• Free templates to play with
• Open-source projects where you can practise
• Various design challenges
• Groups where you can ask for help

How do designers and programmers work together?

Dev Mode – the bridge between design and code

Dev Mode is a new feature in Figma that really makes life easier for developers:

• Special view optimised for developers
• Automatic generation of CSS, iOS and Android code
• Preview component properties in a familiar interface
• Easy access to assets and specifications
• Track changes in the project from a developer's perspective

The code at your fingertips

• Figma generates CSS itself
• Shows all dimensions and spacing
• Text and colour properties are immediately visible
• You can easily export the files you need

Plugins that combine design with code

Figma has a whole collection of plugins that help translate design into code:

• Inspect - generates React and Vue code
• CSS Generator - creates clean CSS code
• Developer Handoff - facilitates the transfer of projects
• Figma to Code - exports to HTML/CSS
• Style Dictionary - synchronises styles with code
• Component Variants - helps manage component variants

Figma in education and development

Partnership with Google for Education

Figma has teamed up with Google to bring design to schools:

• Free access to Figma for educational institutions
• Integration with Google Classroom
• Special templates for teachers and students
• Workshops and educational materials
• Support for student projects

Educational programmes

• Free licences for students
• Design learning materials
• Sample projects and exercises
• Support for lecturers
• Educational community

Skill development

• Learning paths for different levels
• Certificates and achievements
• Practical projects
• Mentoring and community support

Useful plugins for project teams

For cooperation

• Figma Comments - enhanced commenting capabilities
• Version History - advanced change tracking
• Team Library - team library management
• Collaboration Toolkit - teamwork tools

For prototyping

• Smart Animate - advanced animations
• Interactive Components - interactive elements
• Prototype Preview - preview on mobile devices
• User Flows - creating user paths

For automation

• Auto Layout - automatic component placement
• Batch Styling - bulk editing of styles
• Content Reel - automatic content filling
• Design Lint - checking the consistency of the design

What next for Figma?

Adobe has acquired Figma, but rest assured – it continues to operate as a separate product. It is receiving new features and improvements, and in the future, there may be exciting integrations with Adobe tools.

Figma is one of the most popular interface design tools today. And no wonder – it is easy to use, great for teamwork, and constantly evolving. It works well for both small projects and large companies.