---
title: Práce s 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 je nástroj pro návrh uživatelského rozhraní, který pomáhá překlenout komunikační bariéru mezi návrháři a vývojáři.
Tento průvodce vysvětluje, jak můžete spolupracovat s Figma.

## Přístup

1. **Přístup ke sdílenému odkazu:** K Figma souboru projektu můžete přistoupit [zde](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty).
2. **Přihlásit se:** Pokud ještě nejste přihlášeni, Figma vás k tomu vyzve.
   Klíčové funkce jsou dostupné pouze přihlášeným uživatelům, jako je režim pro vývojáře a možnost výběru dedikovaného rámce.

<Warning>

Nebudete moci účinně spolupracovat bez účtu.

</Warning>

## Struktura Figma

On the left sidebar, you can access the different pages of Twenty's Figma. Takto jsou organizovány:

- **Stránka komponentů:** Toto je první stránka. Návrhář ji používá k vytváření a organizování znovupoužitelných návrhových prvků použitých v celém návrhovém souboru. Například tlačítka, ikony, symboly nebo jakékoli jiné znovupoužitelné komponenty. Slouží k zajištění konzistence v celém návrhu.
- **Hlavní stránka:** Druhá stránka je hlavní stránka, která zobrazuje kompletní uživatelské rozhraní projektu. Můžete stisknout **"Přehrát"**, abyste použili kompletní prototyp aplikace.
- **Stránky funkcí:** Ostatní stránky jsou obvykle věnovány funkcím ve vývoji. Obsahují návrh specifických funkcí nebo modulů aplikace či webu. Typicky se stále vyvíjejí.

## Užitečné tipy

S přístupem pouze pro čtení nemůžete návrh upravovat, ale máte přístup ke všem funkcím užitečným pro přeměnu návrhu na kód.

### Použití režimu pro vývojáře

Dev Mode Figma zvyšuje produktivitu vývojářů díky snadné navigaci designem, efektivnímu spravování prvků, efektivním komunikačním nástrojům, integracím do nástrojů, rychlým částem kódu a klíčovým informacím o vrstvě, čímž překonává mezeru mezi návrhem a vývojem. O Dev Mode se můžete dozvědět více [zde](https://www.figma.com/dev-mode/).

Přepněte na režim „Vývojář“ v pravé části nástrojové lišty, kde si můžete prohlédnout specifikace návrhu, kopírovat CSS a přistupovat k prvkům.

### Použití prototypu

Klikněte na libovolný prvek na plátně a stiskněte tlačítko „Přehrát“ v pravém horním rohu rozhraní k zobrazení prototypu. Režim prototypu vám umožňuje interakci s návrhem, jakoby to byl finální produkt. Ukazuje tok mezi obrazovkami a jak se prvky uživatelského rozhraní jako tlačítka, odkazy nebo menu chovají při interakci.

1. **Pochopení přechodů a animací:** V prototypovém režimu můžete vidět libovolné přechody nebo animace, které návrhář přidal mezi obrazovky nebo prvky UI, což poskytuje jasné vizuální instrukce vývojářům o zamýšleném chování a stylu.
2. **Objasnění implementace:** Prototyp může také pomoci snížit nejasnosti. Vývojáři s ním mohou interagovat pro lepší pochopení funkčnosti či vzhledu konkrétních prvků.

Pro podrobnější detaily a pokyny k Figma platformě můžete navštívit oficiální [Figma Documentation](https://help.figma.com/hc/en-us).

### Měření vzdálenosti

Vyberte prvek, podržte klávesu `Option` (Mac) nebo `Alt` (Windows) a pak přejeďte kurzorem nad jiným prvkem, abyste viděli vzdálenost mezi nimi.

### Rozšíření Figma pro VSCode (doporučeno)

[Figma pro VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
vám umožňuje procházet a zkoumat návrhové soubory, spolupracovat s návrháři, sledovat změny a zrychlit implementaci – vše bez opuštění vašeho textového editoru.
Je součástí našich doporučených rozšíření.

## Spolupráce

1. **Použití komentářů:** Jste vítáni použít funkci komentářů kliknutím na bublinu vlevo na nástrojové liště.
2. **Rozhovor prostřednictvím kurzoru:** Hezkou funkcí Figma je Rozhovor prostřednictvím kurzoru. Stačí stisknout `;` na Macu a `/` ve Windows a odeslat zprávu, pokud vidíte, že někdo jiný používá Figma současně s vámi.