---
title: Работа с Figma
info: Узнайте, как можно сотрудничать с Figma компании Twenty
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

На левой боковой панели вы можете получить доступ к разным страницам Figma компании Twenty. Вот как они организованы:

- **Страница компонентов:** Это первая страница. Дизайнер использует её для создания и организации элементов дизайна, которые могут быть переиспользованы в течение всего файла дизайна. Например, кнопки, иконки, символы или любые другие переиспользуемые компоненты. Она служит для поддержания консистентности дизайна.
- **Главная страница:** Вторая страница — это главная страница, которая показывает полный пользовательский интерфейс проекта. Вы можете нажать _**Play**_, чтобы использовать полный прототип приложения.
- **Страницы с функциями:** Другие страницы обычно посвящены функциям в процессе разработки. Они содержат дизайн определённых функций или модулей приложения или веб-сайта. Они, как правило, все еще в процессе разработки.

## Полезные советы

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

### Используйте режим разработчика

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

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

### Использование прототипа

Кликните на любой элемент на холсте и нажмите кнопку “Play” в верхней правой части интерфейса, чтобы открыть просмотр прототипа. Режим прототипа позволяет взаимодействовать с дизайном, как если бы это был финальный продукт. Он демонстрирует переходы между экранами и то, как элементы интерфейса, такие как кнопки, ссылки или меню, ведут себя при взаимодействии.

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

Для получения более подробной информации и руководств о платформе Figma, вы можете посетить официальную [Документацию Figma](https://help.figma.com/hc/en-us).

### Измерение расстояний

Выберите элемент, удерживая клавишу `Option` (Mac) или `Alt` (Windows), затем наведите курсор на другой элемент, чтобы увидеть расстояние между ними.

### Расширение Figma для VSCode (Рекомендуется)

[Figma для VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
позволяет вам просматривать и инспектировать файлы дизайна, сотрудничать с дизайнерами, отслеживать изменения и ускорять внедрение - все это, не покидая текстового редактора.
Это часть наших рекомендуемых расширений.

## Сотрудничество

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