Hodnotenia editora: Hodnotenia používateľov:[Celkom: 0 Priemer: 0].ilfs_responsive_below_title_1 { width: 300px; } @media(min-width: 500px) {.ilfs_responsive_below_title_1 { width: 300px; } } @media(min-width: 800px) {.ilfs_responsive_below_title_1 { width: 336px; } }
V tomto príspevku vám ukážem, ako bezplatne previesť návrhy Figma na komponenty React pomocou bezplatného doplnku. Clapy je bezplatná online webová aplikácia, ktorá vám umožňuje generovať kód z návrhov. Teraz poskytuje bezplatný plugin pre Figma na generovanie kódu React. Pomocou doplnku Clapy-Figma môžete previesť akýkoľvek svoj vlastný dizajn na vlastný komponent React. Dokáže vygenerovať kompletný kód Reactu a môžete ho tiež bezplatne exportovať.
Ak ste začiatočník vo vývoji Reactu a nedokážete skutočne vytvárať zložité komponenty Reactu, tento doplnok sa vám bude naozaj hodiť. Stačí navrhnúť komponent ručne vo Figme a tento Clapy plugin vám poskytne ekvivalentný kód React. Je to také jednoduché. Tento doplnok vám však zatiaľ poskytuje iba 10 kreditov každý mesiac na export kódu. Ak chcete získať viac kreditov, budete sa musieť prihlásiť na odber jedného z profi plánov.
Ako bezplatne previesť dizajn Figma na komponenty React?
Uistite sa, že ste prihlásení do svojej Figmy účtu. Potom stačí kliknúť na tento odkaz a nainštalovať tento doplnok. Je tu možnosť Vyskúšať a stačí na ňu kliknúť, aby ste pridali tento plugin do svojho pracovného priestoru Figma.
Teraz navrhnite niečo v oblasti pracovného priestoru Figma. Stačí vytvoriť nový projekt, pridať umelecké plátno a potom jednoducho nakresliť čokoľvek. Pomocou rôznych nástrojov z panela nástrojov nakreslite tvar alebo čokoľvek, čo chcete previesť na React.
Teraz už len vyberiete objekt, pre ktorý chcete vygenerovať kód. Aktivujte doplnok a počkajte niekoľko sekúnd. Spracuje vybratý prvok a zobrazí vám vykreslenú verziu Reactu.
V tom istom vyskakovacom okne doplnku sa posuňte trochu nadol a uvidíte možnosť exportovať kód v súbore ZIP. Keď rozbalíte súbor ZIP, v Reacte nájdete všetok JS kód, ktorý môžete kdekoľvek nasadiť.
Takýmto spôsobom môžete použiť tento jednoduchý doplnok Figma na konverziu akéhokoľvek dizajnu na React kód. Postup je veľmi jednoduchý. Všetko, čo potrebujete, je účet Figma a trochu vedomostí o navrhovaní používateľského rozhrania a prototypovaní.
Záverečné myšlienky:
Ako používateľ Figma môžete teraz previesť svoje prototypy a návrhy na funkčné Reagovať kód zadarmo. Stačí použiť plugin Clapy, ktorý som tu spomenul. Je dobré, ak ste individuálny používateľ. A ak potrebujete viac kreditov, môžete si kedykoľvek predplatiť ktorýkoľvek z platených plánov, ktoré ponúka.
