---
title: Робота з Figma
info: Learn how you can collaborate with Twenty's Figma
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Figma — це інструмент для проєктування інтерфейсів, який сприяє усуненню бар'єру в комунікації між дизайнерами та розробниками.
Цей посібник пояснює, як можна співпрацювати з Figma.

## Доступ

1. **Отримайте доступ до спільного посилання:** Ви можете отримати доступ до файлу Figma проєкту [тут](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
2. **Увійдіть в систему:** Якщо ви ще не ввійшли, Figma запросить вас це зробити.
   Ключові функції доступні тільки для зареєстрованих користувачів, такі як режим розробника та можливість вибору окремого фрейму.

<Warning>

Ви не зможете ефективно співпрацювати без акаунту.

</Warning>

## Структура Figma

On the left sidebar, you can access the different pages of Twenty's Figma. Ось як вони організовані:

- **Сторінка компонентів:** Це перша сторінка. Дизайнер використовує її для створення та організації змінних дизайн-елементів, що використовуються по всьому файлу дизайну. Наприклад, кнопки, іконки, символи або будь-які інші повторно використані компоненти. Це служить для підтримки цілісності дизайну.
- **Основна сторінка:** Друга сторінка є основною сторінкою, де показується повний користувацький інтерфейс проєкту. Ви можете натиснути _**Play**_, щоб використовувати повний прототип додатку.
- **Сторінки функцій:** Інші сторінки зазвичай присвячені функціям, які знаходяться у розробці. Вони містять дизайн конкретних функцій або модулів додатку чи вебсайту. Вони зазвичай ще знаходяться в розробці.

## Корисні поради

З доступом тільки для читання, ви не можете редагувати дизайн, але можете отримати доступ до всіх функцій, які будуть корисні для переведення дизайнів у код.

### Використовуйте режим Dev

Режим Dev Figma підвищує продуктивність розробників, надаючи легку навігацію по дизайну, ефективне управління ресурсами, ефективні засоби комунікації, інтеграції з інструментами, швидкі уривки коду та основну інформацію про шари, усуваючи розрив між дизайном і розробкою. Ви можете дізнатися більше про режим Dev [тут](https://www.figma.com/dev-mode/).

Перемкніться в "Режим розробника" в правій частині панелі інструментів, щоб побачити специфікації дизайну, скопіювати CSS і отримати доступ до ресурсів.

### Використовуйте Прототип

Клацніть на будь-який елемент на полотні і натисніть кнопку “Play” в правому верхньому кутку інтерфейсу, щоб перейти в режим перегляду прототипу. Режим прототипу дозволяє вам взаємодіяти з дизайном, наче це готовий продукт. Він демонструє потік між екранами та як елементи інтерфейсу, такі як кнопки, посилання або меню, поводяться при взаємодії.

1. **Розуміння переходів і анімацій:** У режимі прототипу ви можете переглядати будь-які переходи або анімації, що додаються дизайнером між екранами або елементами інтерфейсу, надаючи розробникам чіткі візуальні вказівки щодо їхнього поведінки та стилю.
2. **Уточнення реалізації:** Прототип також може зменшити неоднозначності. Розробники можуть взаємодіяти з ним, щоб краще зрозуміти функціональність або зовнішній вигляд певних елементів.

For more comprehensive details and guidance on learning the Figma platform, you can visit the official [Figma Documentation](https://help.figma.com/hc/en-us).

### Вимірювання відстаней

Виберіть елемент, утримуйте клавішу `Option` (Mac) або `Alt` (Windows), а потім наведіть мишу на інший елемент, щоб побачити відстань між ними.

### Розширення Figma для VSCode (Рекомендоване)

[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
дозволяє вам навігувати та оглядати файли дизайну, співпрацювати з дизайнерами, відслідковувати зміни та прискорювати реалізацію — все без виходу з текстового редактора.
Це частина наших рекомендованих розширень.

## Співпраця

1. **Використання Коментарів:** Ви можете використовувати функцію коментарів, натиснувши на значок бульбашки в лівій частині панелі інструментів.
2. **Чат курсору:** Приємною функцією Figma є Чат курсору. Просто натисніть `;` на Mac і `/` на Windows, щоб надіслати повідомлення, якщо ви бачите, що хтось інший використовує Figma одночасно з вами.
