github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
67 lines
7.5 KiB
Plaintext
67 lines
7.5 KiB
Plaintext
---
|
||
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 одновременно с вами.
|