> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Работа с Figma

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 одновременно с вами.