16. Jul 2020Design

TOP Figma pluginy, ktoré zjednodušia život dizajnérom aj developerom

Prešiel už nejaký ten piatok odkedy náš tím používa Figmu. V čase, keď sme zvažovali zmenu sme sa stretávali najmä s častými výpadkami. Odvtedy si všímame, že Figma neustále napreduje. Je to skutočne skvelá náhrada za Sketch. Pluginy pre teba neustále aktualizujeme.

Pluginy, ktoré pomáhajú a zjednodušujú prácu nielen na dizajne ale aj vývoji mobilných a webových aplikácií sú už dlhší čas súčasťou Figmy

Pluginy nájdeš priamo vo Figme v sekcii Plugins a odtiaľ si ich nainštaluješ. Výhodou je, že ich nemusíš hľadať a sťahovať z externých stránok, ako to bolo napríklad v Sketchi, avšak vybrali sme pre teba aj jeden, ktorý je zatiaľ dostupný len ako development plugin.

V tomto článku sme pre teba vybrali 15 TOP Figma pluginov, ktoré používame aj my a stoja minimálne za vyskúšanie.

Motion

Figma plugin Motion umožňuje tvorbu animácií priamo vo figme
Autor: Pavel Babkin

S Pluginom Motion môžeš tvoriť jednoduché animácie priamo vo Figme. Ak potrebuješ rozhýbať ikonu alebo ilustráciu vo svojom dizajne, Motion je vhodná odľahčená alternatíva k AE.

AEUX

AEUX figma plugin pre pokročilejšie animácie
Autori: Adam Plouff + friends at Google motion design

Pre náročných animátorov odporúčame plugin AEUX, ktorý (takmer) bezpečne exportuje vrstvy z Figmy do Adobe AE. Následne zanimovať a vyexportovať ako Lottie animáciu pomocou Bodymovin pluginu v AE. Návod na inštaláciu nájdete v odkaze. V súčasnosti je totiž tento plugin dostupný len ako "Development plugin".

Easometric

Easometric plugin umožňuje dizajnérom otáčiť dizajn
Autor: Aaron Iker

Flat niekedy jednoducho nestačí. S pomocou Easometric pluginu môžeš otočiť svoj dizajn do izometrickej perspektívy jedným klikom. A skvelé je, že tento krok je ne-deštruktívny.

Better Font Picker
 

Vďaka pluginu Font selection môžeš vyberať písmo podľa ukážky
Autor: Nitin Gupta

Presne ako názov naznačuje, vďaka tomuto pluginu vidíš ukážku fontu priamo pri výbere a bude z teba "better font picker".

Shadow Maker
 

Vytvoriť rofesionálne tiene je vďaka Shadow maker pluginy omnoho jednoduchšie
Autor: Gautham 🌶

Nikdy nebolo jednoduchšie vytvárať profesionálne vyzerajúce tiene. Jedným klikom dáš vďaka Shadow maker pluginu svojim dizajnom hĺbku ako profíci na Dribbble a Behance. Dávaj však pozor, aby ťa tvoji Front end developeri nepreklínali za 10-úrovňové tiene.

Mesh Gradient
 

Mesh gradient, figma plugin pre tvorbu zaujimavých gradientov
Autor: Gautham 🌶

"Make it pop" hovoria. "Nech je to sexi..." Mesh gradient ti pomôže vytvoriť Image vrstvu s parádnym farebným gradientom. Môžeš si vybrať z matíc 2x2, 3x3 alebo 4x4. Plugin ma tiež funkciu Randomize, ktorá vytvára zaujímavé abstraktné útvary.

Instance Finder
 

Instance finder, ti pomôže nájsť a upraviť komponent naprieč celým súborom
Autor: Idan Arbel

Asi poznáš ten pocit, keď chceš upraviť komponent ale nie ste si istý, kde všade sa nachádza. Instance Finder ti pomôže identifikovať všetky miesta v súbore kde si komponent použil a ak chceš, na klik ťa k nemu prenesie.

Style Organizer
 

Pri dokončovaní projektu ti plugin Style Organizer dokáže ušetriť množstvo času
Autor: SHOPEE SINGAPORE PRIVATE

Merge and link all color & text styles in the page. Čas sa kráti a ty potrebuješ upratať svoje dizajny? Nie je problém. Style organizer zoskenuje tvoju page-u a umožní ti merge-ovať všetky farby a texty do štýlov, ktoré si vytvoríš. Upozornenie: správne použitie pluginu je návykové a môže viesť k výraznej úspore času.

Unsplash Figma plugin

unsplash figma plugin

Pekné dizajny a pekné obrázky spolu kráčajú ruka v ruke. Určite si už aj ty do svojho dizajnu nejaký hľadal. 
Nie vždy je to jednoduché a často ide o zdĺhavú záležitosť. Nájsť tematicky vhodný a zároveň vysokokvalitný obrázok si vyžaduje čas. 
Unsplash plugin sa postará o to, aby si namiesto hľadania cez rôzne portály mal obrázky dostupné priamo. Umožňuje sťahovať free fotky priamo do Figmy a to z najväčšej free databázy Unsplash.

Autoflow plugin

autoflow figma plugin

Ako dizajnéri sa takmer vždy snažíme vytvoriť zoradený flow screenov, kde máme veľa frame-ov.  Prípadne sa usilujeme vytvoriť stromovú štruktúru, takzvaný flow celého dizajnu. 
A to je zdĺhavý proces. 
Pomocou Autoflow si jednoducho vyznačíš dva framy, z ktorých chceš flow vytvoriť. Nakoniec potvrdíš jedným klikom a hotovo.

Brandfetch plugin

brandfetch figma plugin

Už ťa nebaví zdĺhavé hľadanie korporátnych log na webstránkach? Brandfetch ti ušetrí kopec času. 
Do pluginu zadáš URL adresu firmy, ktorej logo chceš použiť. Ten ti ho následne vygeneruje.

Figma Stark Plugin

stark figma plugin

Ak máš aj ty niekedy problém rozoznať správny pomer kontrastu farieb oceníš práve plugin Stark. Jednoducho označíš dve prekryté vrstvy a plugin podľa algoritmu vyhodnotí, či je kontrast farieb ideálny.

ImagePallette plugin

image pallete figma plugin

Sú rôzne teórie o farebných paletách a jedna z nich je, že najkrajšie farebné palety sú vytvorené z fotiek. Práve plugin ImagePallette ti pomôže vygenerovať farebnú paletu z fotky. Stačí iba označiť obrázok, spustiť plugin a paleta je na svete. :-)

Content Reel plugin

content rell figma plugin

Super plugin z dielne Microsoftu. Často sa ti stáva, že potrebuješ vyplniť design reálnym contentom? Či už ide o meno, email, avatara alebo telefónne číslo - Content Reel plugin ti urýchli a zjednoduší prácu. 
Jednoducho vygeneruje tento content za teba. Do budúcna plánujú pridať aj pridávanie rôznych ikoniek. Oplatí sa sledovať aktualizácie.

Android Resources Export plugin

android resource export figma plugin

Tento plugin slúži na rýchle exportovanie assetov pre platformu Android. Dizajnér, ktorý pracuje na mobilných aplikáciách a potrebuje často exportovať assety pre developerov tento plugin ocení. 
Android resources export pripraví assety v priečinkoch drawable aj Nine-patch. Okrem exportu Nine-Patch môžeš exportovať aj adaptívne app ikony do Play Store.

 

Zaujíma ťa ako vyzerá náš UX dizajn proces krok za krokom? Pridaj sa k nám a presvedč sa sa na vlastné oči.

Voľná pozícia pre digital UX UI dizajnéra

Ak sa chceš stať súčasťou Figma komunity na Slovensku pridaj sa do našej Friends of Figma Slovakia - Žilina user group.
 

Peter LinekHead of Design