Figma - это совместный инструмент для проектирования пользовательских интерфейсов, который помогает преодолеть барьер в коммуникации между дизайнерами и разработчиками.
Это руководство объясняет, как вы можете работать с Figma.
Доступ
- Получите доступ к общей ссылке: Вы можете открыть файл проекта Figma здесь.
- Войдите в систему: Если вы ещё не вошли, Figma предложит вам это сделать.
Ключевые функции доступны только для авторизованных пользователей, такие как режим разработчика и возможность выбора конкретного фрейма.
Вы не сможете эффективно сотрудничать без учетной записи.
Структура Figma
На левой боковой панели вы можете получить доступ к разным страницам Figma компании Twenty. Вот как они организованы:
- Страница компонентов: Это первая страница. Дизайнер использует её для создания и организации элементов дизайна, которые могут быть переиспользованы в течение всего файла дизайна. Например, кнопки, иконки, символы или любые другие переиспользуемые компоненты. Она служит для поддержания консистентности дизайна.
- Главная страница: Вторая страница — это главная страница, которая показывает полный пользовательский интерфейс проекта. Вы можете нажать Play, чтобы использовать полный прототип приложения.
- Страницы с функциями: Другие страницы обычно посвящены функциям в процессе разработки. Они содержат дизайн определённых функций или модулей приложения или веб-сайта. Они, как правило, все еще в процессе разработки.
Полезные советы
С доступом только для чтения, вы не можете редактировать дизайн, но вы можете получить доступ ко всем функциям, которые будут полезны для преобразования дизайнов в код.
Используйте режим разработчика
Dev Mode Figma повышает производительность разработчиков, обеспечивая легкую навигацию по дизайну, эффективное управление ресурсами, инструменты связи, интеграции с инструментами для разработки, быстрые фрагменты кода и информацию о ключевых слоях, устраняя разрыв между дизайном и разработкой. Подробнее о режиме Dev можно узнать здесь.
Переключитесь в режим “Разработчик” в правой части панели инструментов, чтобы посмотреть спецификации дизайна, скопировать CSS и получить доступ к ресурсам.
Использование прототипа
Кликните на любой элемент на холсте и нажмите кнопку “Play” в верхней правой части интерфейса, чтобы открыть просмотр прототипа. Режим прототипа позволяет взаимодействовать с дизайном, как если бы это был финальный продукт. Он демонстрирует переходы между экранами и то, как элементы интерфейса, такие как кнопки, ссылки или меню, ведут себя при взаимодействии.
- Понимание переходов и анимаций: В режиме Прототипа вы можете увидеть любые переходы или анимации, добавленные дизайнером между экранами или элементами интерфейса, предоставляя четкие визуальные инструкции разработчикам о предположительном поведении и стиле.
- Уточнение реализации: Прототип также может помочь уменьшить неясности. Разработчики могут взаимодействовать с ним, чтобы лучше понять функциональность или внешний вид определенных элементов.
Для получения более подробной информации и руководств о платформе Figma, вы можете посетить официальную Документацию Figma.
Измерение расстояний
Выберите элемент, удерживая клавишу Option (Mac) или Alt (Windows), затем наведите курсор на другой элемент, чтобы увидеть расстояние между ними.
Расширение Figma для VSCode (Рекомендуется)
Figma для VS Code
позволяет вам просматривать и инспектировать файлы дизайна, сотрудничать с дизайнерами, отслеживать изменения и ускорять внедрение - все это, не покидая текстового редактора.
Это часть наших рекомендуемых расширений.
Сотрудничество
- Использование комментариев: Вы можете воспользоваться функцией комментариев, кликнув по значку пузыря в левой части панели инструментов.
- Чат курсора: Приятная особенность Figma - это чат курсора. Просто нажмите
; на Mac и / на Windows, чтобы отправить сообщение, если вы видите, что кто-то еще использует Figma одновременно с вами.
