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.0 KiB
Plaintext
67 lines
7.0 KiB
Plaintext
---
|
||
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 одночасно з вами.
|