Návod pre dizajnérov
V dizajnérskom nástroji Figma nájdete knižnicu dizajnového systému IDSK – knižnicu štýlov, komponentov či vzorov.
Všetky súbory sú voľne prístupné na prepoužitie a pre prácu s nimi je nevyhnutné duplikovať súbory alebo skopírovať do nového súboru.
Pomocou týchto komponentov je možné vyskladať elektronickú službu a/alebo webové sídlo v IDSK.
Obsah knižnice
- Štýly:Určujú typografiu, farby, ikonografiu, medzery, tiene a mriežku.
- Komponenty:Definujú opakovane použiteľné prvky a ich varianty.
- Vzory:Spájajú komponenty do použiteľných blokov pre návrh používateľského rozhrania.
- Šablóny:Spájajú vzory a komponenty do šablón na použitie.
Ako pracovať s knižnicou
Knižnicu IDSK použite ako prvý krok pri návrhu rozhrania. Rozhranie tvoria štýly a komponenty.
- Štýl vyberte v pravom paneli vo Figme. Panel zobrazuje typografiu, farby a mriežku.
- Komponenty vyberte v ľavom navigačnom paneli vo Figme. V hornej časti otvorte sekciu Assets, kde nájdete zoznam komponentov. Vyberte komponent a začnite navrhovať rozhranie.
Spätná väzba a podnety
Pomôžte nám zlepšovať dizajnovú knižnicu IDSK. Svoju spätnú väzbu pošlite na idsk@mirri.gov.sk.
- Ak ste našli chybu v komponente alebo máte návrh na zlepšenie, napíšte nám.
- Ak knižnicu začínate používať, hľadáte odpovede alebo sa chcete zapojiť do jej rozvoja ako dizajnér či vývojár, kontaktujte nás.
Dizajnový systém IDSK
IDSK je súbor pravidiel tvorby obsahu a funkčnosti verejných elektronických služieb a webových sídiel v súlade s potrebami používateľov. Definuje komponenty, pojmy, princípy, vzory a pravidlá pre návrh používateľského rozhrania.
Zjednocuje komunikáciu a používateľskú skúsenosť naprieč elektronickými službami verejnej správy. Pomáha vytvárať prístupné, konzistentné a jednotné elektronické služby verejnej správy.
Z čoho sa skladá dizajnový systém
1. Základy (Foundations)
Určujú vizuálny a interakčný jazyk systému. Obsahujú:
- farby a kontrast,
- typografiu a hierarchiu textu,
- rozstupy, mriežku a rozloženie,
- ikony a ilustrácie,
- pohyby a animácie,
- pravidlá prístupnosti (WCAG 2.1).
2. Rozloženie a štruktúra
Určujú správanie obsahu pri rôznych veľkostiach obrazovky. Zahŕňajú:
- mriežkové systémy,
- šírky kontajnerov,
- rozloženie hlavičky, navigácie, obsahu a päty,
- vzory rozloženia (napr. formulár, dvojstĺpcové rozloženie).
3. Komponenty
Definujú stavebné prvky používateľského rozhrania. Každý komponent obsahuje:
- popis a pravidlá použitia,
- vizuálny návrh a stavy,
- ukážku kódu,
- odporúčania pre prístupnosť.
Príklady: tlačidlá, formulárové prvky, karty, upozornenia, navigácia.
4. Vzory (Patterns)
Spájajú komponenty do funkčných celkov, riešia bežné úlohy, napríklad:
- prihlásenie alebo registráciu,
- vyhľadávanie,
- vypĺňanie formulárov,
- navigáciu medzi stránkami.
5. Obsah a jazyk
Definujú tón komunikácie a pravidlá písania textov. Udržiavajú jazyk zrozumiteľný, inkluzívny a konzistentný.
6. Kód a implementácia
Umožňujú používať komponenty priamo. Zahŕňajú:
- Frontend knižnicu (napr. SCSS alebo JavaScript),
- dokumentáciu,
- pravidlá pomenovania,
- príklady implementácie.
Ako sa používa dizajnový systém
- Navrhnite – Použite existujúce komponenty a vzory vo Figme.
- Prototypujte – Otestujte návrh s používateľmi a overte prístupnosť.
- Implementujte – Použite frontend knižnicu IDSK vo svojom projekte.
- Testujte – Otestujte vizuálnu konzistenciu a funkčnosť komponentov.
- Zdieľajte – Ak vznikne nová potreba, navrhnite jej doplnenie do systému.
Návod na prácu s knižnicou
Knižnica IDSK vo Figme obsahuje pripravené komponenty, ktoré môžete opakovane používať v projekte. Dizajnér vytvoril komponenty tak, aby ste ich nemuseli navrhovať od začiatku.
Príklady komponentov: tlačidlá, karty, hlavičky, ikony, bannery.
Tip
Prehliadanie knižnice
- V ľavom navigačnom paneli nájdete sekciu Pages (Stránky). Obsahuje skupiny komponentov a štýlov.
- Každá stránka združuje prvky podľa typu alebo účelu, napríklad tlačidlá, formuláre, ikony a pod.
- Medzi stránkami sa prepínajte kliknutím.
- Knižnicu môžete prehliadať aj posúvaním zvislého posuvníka v ľavom navigačnom paneli.
Obsah knižnice
- Štýly:Určujú typografiu, farby, ikonografiu, medzery, tiene a mriežku.
- Komponenty:Definujú opakovane použiteľné prvky a ich varianty.
- Vzory:Spájajú komponenty do použiteľných blokov pre návrh používateľského rozhrania.
- Šablóny:Spájajú vzory a komponenty do šablón na použitie.
Posúvanie po plátne
- Po plátne sa posúvajte kolieskom myši alebo touchpadom.
- Približovanie a vzďaľovanie ovládajte kombináciou Ctrl + koliesko myši (Windows) alebo Cmd + trackpad (MacOS).
- Na horizontálne posúvanie použite kombináciu Shift + koliesko myši.
Vyhľadávanie komponentov
- Na ľavej strane, pod zoznamom stránok (Pages), nájdete vyhľadávacie pole. Pomocou skratky Ctrl/Cmd + F vyhľadáte komponent podľa názvu alebo časti názvu.
- Vyhľadávanie prehľadá všetky stránky a zvýrazní nájdené komponenty.
- Vo Figme majú komponenty fialové ohraničenie a fialovú ikonu. Komponent je hlavná verzia prvku, z nej vznikajú ďalšie prvky, tzv. inštancie.
Varianty komponentov
- Každý komponent môže mať viac variantov, napríklad rôzne farby, stavy alebo veľkosti.
- Varianty sú zoskupené na jednej stránke a usporiadané vedľa seba.
- Prehliadajte jednotlivé položky na stránke a vyberte variant, ktorý potrebujete.
Spätná väzba a podnety
Pomôžte nám zlepšovať dizajnovú knižnicu IDSK. Svoju spätnú väzbu pošlite na idsk@mirri.gov.sk.
- Ak ste našli chybu v komponente alebo máte návrh na zlepšenie, napíšte nám.
- Ak knižnicu začínate používať, hľadáte odpovede alebo sa chcete zapojiť do jej rozvoja ako dizajnér či vývojár, kontaktujte nás.
Návod na prácu s knižnicou pre nedizajnérov
Knižnica IDSK vo Figme obsahuje pripravené komponenty, ktoré môžete opakovane používať v projekte. Dizajnér vytvoril komponenty tak, aby ste ich nemuseli navrhovať od začiatku.
Príklady komponentov: tlačidlá, karty, hlavičky, ikony, bannery. Používajte komponenty z knižnice a vkladajte ich do projektu bez úprav základnej štruktúry.
Ako pracovať s knižnicou
Pridanie knižnice IDSK 3 do súboru vo Figme
- Otvorte svoj súbor vo Figme.
- V ľavom navigačnom paneli kliknite na Assets.
- V paneli Assets kliknite na ikonu knižnice (ikonka knižky). Otvorí sa okno Manage libraries.
- Do vyhľadávacieho poľa zadajte IDSK 3 (MIRRI SR) a kliknite na Add to file.
Knižnicu IDSK 3 následne nájdete medzi dostupnými knižnicami vo svojom súbore.
Aktualizácia knižnice
Ak dizajnéri upravia komponenty v pôvodnej knižnici IDSK 3, zmeny sa automaticky prejavia aj vo vašom súbore.
Pozor
Obsah knižnice
- Štýly:Určujú typografiu, farby, ikonografiu, medzery, tiene a mriežku.
- Komponenty:Definujú opakovane použiteľné prvky a ich varianty.
- Vzory:Spájajú komponenty do použiteľných blokov pre návrh používateľského rozhrania.
- Šablóny:Spájajú vzory a komponenty do šablón na použitie.
Vyhľadávanie a pridanie komponentov na plátno
- V ľavom navigačnom paneli Assets vyhľadajte požadovaný komponent. Môžete použiť aj vyhľadávacie pole.
- Komponenty vo Figme majú fialové ohraničenie a fialovú ikonu. Komponent je hlavná verzia prvku. Z nej vznikajú ďalšie prvky, tzv. inštancie.
- Kliknite na komponent a potiahnite ho na plátno (drag and drop).
- Komponent sa zobrazí na plátne a môžete s ním ďalej pracovať.
Úprava textu, obrázkov a obsahu komponentov
Komponenty môžete upravovať bez zmeny ich základnej štruktúry.
Zmena textu:
- Dvojkliknite na text.
- Zadajte nový obsah.
Zmena ikon alebo obrázkov:
- Ak komponent obsahuje ikonu, zvyčajne ju nie je možné meniť voľne.
- Niektoré komponenty však umožňujú zmeniť variant ikony v pravom paneli.
Zmena variantov (stavov):
Komponenty môžu mať viac verzií, tzv. varianty (napríklad informačný, úspešný, upozorňovací, oznamovací banner). Prepínate ich v pravom paneli.
Čomu sa vyhnúť:
- Nepoužívajte možnosť Detach instance. Komponent sa tým odpojí od zdrojovej knižnice a prestane sa aktualizovať.
- Neupravujte štruktúru vrstiev vo vnútri komponentu. Nemeňte textové štýly, rozmery ani farby, ktoré sú pevne nastavené v dizajnovom systéme.
- Nekopírujte komponenty do súborov, v ktorých knižnica IDSK nie je aktivovaná. Komponenty tam môžu stratiť svoje prepojenie.
Oprava chýb
Ak pri úprave komponentu urobíte chybu, použite jeden z týchto krokov:
- Kliknite pravým tlačidlom myši na komponent a vyberte Reset all changes (alebo Reset instance). Komponent sa vráti do pôvodného stavu z knižnice.
- Použite klávesovú skratku Cmd + Z (MacOS) alebo Ctrl + Z (Windows) pre krok späť.
- Ak problém pretrváva a komponent je nenávratne rozbitý, odstráňte ho z plátna a jednoducho vložte nový z knižnice v paneli Assets.
Návody a zdroje pre začiatočníkov
Ste začiatočník? Dizajnový systém IDSK využíva aj pokročilé funkcie Figmy. Ak hľadáte oficiálne návody na prácu s Figmou, pripravili sme pre vás tieto užitočné odkazy (v angličtine):
Figma návod pre začiatočníkov
Začnite pracovať vo Figme a zoznámte sa s jej základným rozhraním a funkciami podľa tohto oficiálneho návodu.
Ako funguje Auto Layout
Zistite, ako využívať Auto Layout na tvorbu flexibilných komponentov, ktoré sa automaticky prispôsobujú svojmu obsahu a veľkosti obrazovky.
Práca s variantmi
Naučte sa vytvárať a spravovať komponenty a ich rôzne varianty (napr. stavy tlačidiel) pre zefektívnenie vašej práce.
Spätná väzba a podnety
Pomôžte nám zlepšovať dizajnovú knižnicu IDSK. Svoju spätnú väzbu pošlite na idsk@mirri.gov.sk.
- Ak ste našli chybu v komponente alebo máte návrh na zlepšenie, napíšte nám.
- Ak knižnicu začínate používať, hľadáte odpovede alebo sa chcete zapojiť do jej rozvoja ako dizajnér či vývojár, kontaktujte nás.