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>
66 lines
7.1 KiB
Plaintext
66 lines
7.1 KiB
Plaintext
---
|
||
title: Радите са Фигмом
|
||
info: Сазнајте како можете сарађивати са Twenty-јевом Фигмом
|
||
image: /images/user-guide/objects/objects.png
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/objects/objects.png" alt="Header" />
|
||
</Frame>
|
||
|
||
Фигма је алат за дизајн интерфејса који омогућава колаборативни рад, превазилазећи комуникационе баријере између дизајнера и програмера.
|
||
Овај водич објашњава како можете сарађивати са Фигмом.
|
||
|
||
## Приступ
|
||
|
||
1. **Приступите подељеној вези:** Можете приступити Twenty-јевој Фигма датотеци [овде](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
|
||
2. **Пријавите се:** Ако већ нисте пријављени, Фигма ће вас позвати да се пријавите.
|
||
Кључне функције доступне су само корисницима који су пријављени, као што су режим за програмере и могућност избора посебног оквира.
|
||
|
||
<Warning>
|
||
|
||
Нећете моћи ефикасно да сарађујете без налога.
|
||
|
||
</Warning>
|
||
|
||
## Структура Фигме
|
||
|
||
У левом бочном тракасту можете приступити различитим страницама Twenty-јеве Фигме. Овако су организоване:
|
||
|
||
- **Страница компоненти:** Ово је прва страница. Дизајнер је користи за креирање и организовање поновно употребљивих дизајнерских елемената који се користе у целом пројекту. На пример, дугмади, иконе, симболи или било које друге компоненте које је могуће поново користити. Она служи за одржавање доследности у дизајну.
|
||
- **Главна страница:** Друга страница је главна страница, која приказује комплетан кориснички интерфејс пројекта. Можете притиснути _**Play**_ да користите целу апликацију као прототип.
|
||
- **Странице карактеристика:** Остале странице су обично посвећене карактеристикама које су у току. Оне садрже дизајн посебних карактеристика или модула апликације или веб странице. Оне су обично још увек у току развоја.
|
||
|
||
## Корисни савети
|
||
|
||
Са приступом само за читање, не можете уређивати дизајн, али можете приступити свим функцијама које ће бити корисне за претварање дизајна у код.
|
||
|
||
### Користите Дев режим
|
||
|
||
Фигмин Дев режим повећава продуктивност програмера пружајући једноставну навигацију за дизајн, ефикасно управљање ресурсима, ефективне алате за комуникацију, интеграцију алата, брзе исечке кода и кључне информације о слојевима, чиме се премошћује јаз између дизајна и развоја. Можете сазнати више о Дев режиму [овде](https://www.figma.com/dev-mode/).
|
||
|
||
Пребаците се на "Програмерски" режим у десном делу траке алата да бисте видели спецификације дизајна, копирали CSS и приступили ресурсима.
|
||
|
||
### Користите Прототип
|
||
|
||
Кликните на било који елемент на платну и притисните дугме „Play“ у горњем десном углу интерфејса да бисте приступили погледу прототипа. Прототип мод вам омогућава да интерактивно користите дизајн као да је финални производ. Он приказује ток између екрана и како елементи интерфејса као што су дугмад, линкови или менији реагују на интеракцију.
|
||
|
||
1. **Разумевање прелаза и анимација:** У режиму Прототипа, можете видети прелазе или анимације које је дизајнер додао између екрана или елемената интерфејса, пружајући јасна визуелна упутства програмерима о предвиђеном понашању и стилу.
|
||
2. **Разјашњење имплементације:** Прототип такође може помоћи у смањењу нејасноћа. Програмери могу интерактивно приступити прототипу како би стекли боље разумевање функционалности или изгледа одређених елемената.
|
||
|
||
За више детаља и савета о учењу Фигма платформе, можете посетити званичну [Фигма документацију](https://help.figma.com/hc/en-us).
|
||
|
||
### Измерите раздаљине
|
||
|
||
Изаберите елемент, држите `Option` тастер (Mac) или `Alt` тастер (Windows), а затим пређите преко другог елемента да бисте видели растојање између њих.
|
||
|
||
### Фигма екстензија за VSCode (Препоручено)
|
||
|
||
[Фигма за VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) вам омогућава да навигирате и прегледате дизајн датотеке, сарађујете с дизајнерима, пратите промене и убрзавате имплементацију - све без напуштања текстуалног едитора.
|
||
То је део наших препоручених екстензија.
|
||
|
||
## Сарадња
|
||
|
||
1. **Коришћење коментара:** Добродошли сте да користите функцију коментара кликом на икону облачића са леве стране траке алата.
|
||
2. **Ћаскање помоћу курсора:** Лепа карактеристика Фигме је Ћаскање помоћу курсора. Само притисните `;` на Mac-у и `/` на Windows-у да пошаљете поруку ако видите неког другог како користи Фигму у исто време кад и ви.
|