---
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-у да пошаљете поруку ако видите неког другог како користи Фигму у исто време кад и ви.