Figma – 3 nieoczywiste sposoby wykorzystania – om贸wione zagadnienia:

1. Stw贸rz swoje portfolio i CV
2. Przygotowywanie prostych grafik w wersji responsywnej听
3. Projektowanie prezentacji

Stw贸rz swoje portfolio i CV

Je艣li starasz si臋 o prac臋 i szukasz sposobu na zaprezentowanie pracodawcom swoich projekt贸w, jest to 艣wietna alternatywa dla p艂atnych kreator贸w portfolio. A je艣li nie wiesz od czego zacz膮膰, mo偶esz skorzysta膰 z gotowych projekt贸w udost臋pnionych w Figma Community. Wpisz 鈥減ortfolio鈥� w wyszukiwarce i zainspiruj si臋.

Dodatkowo w Community znajdziesz 艣wietne szablony CV. Gotowy dokument mo偶esz zapisa膰 w formacie PDF i bez problemu do艂膮czy膰 go podczas aplikowania do pracy.

Przygotowywanie prostych grafik w wersji responsywnej听

Przygotowujesz grafiki na Facebooka i Instagrama lub inne social media? W tym przypadku Figma r贸wnie偶 u艂atwi Ci prac臋. Dzi臋ki opcji auto-layout i pozycjonowaniu konkretnych element贸w wzgl臋dem ramki, mo偶esz bardzo szybko przeformatowa膰 swoje grafiki na r贸偶ne media – relacj臋 z instagrama mo偶esz sprawnie zmieni膰 w kwadratow膮 grafik臋 na Facebooka.

Niew膮tpliwym plusem jest tutaj wsparcie grafik wektorowych, wklejanych bezpo艣rednio z innych program贸w – na przyk艂ad z Adobe Illustrator.听 W Figma Community dost臋pne s膮 narz臋dzia, kt贸re pomog膮 Ci opanowa膰 umiej臋tno艣膰 tworzenia responsywnych ramek. Jedno z nich znajdziesz tutaj:

Projektowanie prezentacji

Kiedy my艣lisz o projektowaniu prezentacji, z pewno艣ci膮 jako pierwszy do g艂owy przychodzi Ci Microsoft PowerPoint. Program ten jest wyposa偶ony w imponuj膮cy zestaw funkcji, jednak jego minusem jest ma艂a przejrzysto艣膰 interfejsu. W tym przypadku Figma r贸wnie偶 jest 艣wietn膮 alternatyw膮.

Je艣li potrzebujesz inspiracji dla swojej prezentacji, zajrzyj do Figma Community – wpisz 鈥減resentation鈥� w wyszukiwarce. Gotow膮 prezentacj臋 mo偶esz zapisa膰 w formacie PDF, dlatego bez problemu b臋dziesz m贸g艂 wys艂a膰 j膮 innym osobom, albo otworzy膰 na dowolnym sprz臋cie podczas swojego wyst膮pienia.听

Gratulacje! Uko艅czy艂e艣 w艂a艣nie kurs wprowadzaj膮cy do Figmy. Uda艂o Ci si臋 przerobi膰 wszystkie 10 lekcji, kt贸re dla Ciebie przygotowali艣my. 艢led藕 nasz膮 stron臋 i social media, aby by膰 na bie偶膮co z kolejnymi tre艣ciami tego typu.

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Figma Plugins- om贸wione zagadnienia:

1. Instalowanie Figma Plugins
2. Polecane wtyczki

Instalowanie Figma Plugins

Wtyczki to skrypty lub aplikacje, kt贸re rozszerzaj膮 funkcjonalno艣膰 Figmy i FigJam. Mo偶esz je znale藕膰 i zainstalowa膰 poprzez:

• File browser, kliknij Community w Sidebar. Aby wy艣wietli艂y si臋 interesuj膮ce Ci臋 wyniki, po przej艣ciu do Community zaznacz Plugins, na g贸rze strony./li>

• plik Figma alboFigJam file: kliknij w Resources w Toolbar i wybierz zak艂adk臋Plugins.

Szczeg贸艂y wybranej wtyczki mo偶esz zobaczy膰 klikaj膮c w jej nazw臋. Po klikni臋ciu otworzy si臋 strona z opisem wtyczki i instrukcj膮 u偶ytkowania. Znajdziesz tam te偶 komentarze spo艂eczno艣ci, histori臋 wersji oraz propozycje podobnych wtyczek w sekcji听More like this.

Instalowanie wtyczek jest bardzo proste – wystarczy klikn膮膰 w przycisk Try it out przy wybranej wtyczce na li艣cie lub w jej szczeg贸艂ach. Figma przekieruje Ci臋 do edycji pliku, gdzie mo偶esz wypr贸bowa膰 wybran膮 wtyczk臋.听

Aby uruchomi膰 wtyczk臋, kliknij przycisk Run.听

Po klikni臋ciu Run, mo偶esz korzysta膰 z mo偶liwo艣ci, jakie daje wtyczka.听

Je艣li wtyczka Ci si臋 podoba mo偶esz j膮 zainstalowa膰. W tym celu kliknij przycisk Install, kt贸ry jest oznaczony ikon膮 3 dots menu.

Polecane wtyczki

Wtyczek do Figmy jest mn贸stwo. Przejrzenie ich wszystkich zaj臋艂oby Ci du偶o czasu, dlatego przygotowali艣my list臋 kilku propozycji, kt贸re warto zna膰 na pocz膮tku, aby projektowanie by艂o przyjemniejsze.

1. Grid System

Ta wtyczka rozwi膮偶e problemy z wyborem odpowiedniego Layout grid w Twoim projekcie.听 Link:

Jak sama nazwa wskazuje, wtyczka Clean Document zapanuje nad chaosem i niesp贸jno艣ciami w warstwach, nazwach i grupach w Twoim pliku. To bardzo przydatne zw艂aszcza, kiedy chcesz udost臋pni膰 sw贸j projekt innym osobom z zespo艂u lub klientowi.听 Link:

Ju偶 wiesz, 偶e typografia jest kluczowym elementem interfejs贸w. Wtyczka Typescale zadba o typograficzny porz膮dek – nada odpowiedni膮 hierarchi臋 i wielko艣膰 nag艂贸wkom oraz pozosta艂ym elementom wed艂ug wybranego wzorca.听 Po w艂膮czeniu Typescale musisz wybra膰 warstw臋 tekstow膮, kt贸ra b臋dzie stanowi艂a听 wielko艣膰 bazow膮 fontu, a wtyczka wygeneruje odpowiednio podan膮 liczb臋 rozmiar贸w 鈥� ponad i poni偶ej wielko艣ci bazowej. Link:

Samodzielne wymy艣lanie danych do projekt贸w mo偶e by膰 uci膮偶liwe. Dzi臋ki tej wtyczce mo偶esz wkleja膰 automatycznie generowane adresy, specyficzne typy danych, numery a tak偶e zdj臋cia, avatary i ikony. Link:

Ta wtyczka wyszukuje i automatycznie podmienia teksty w pliku. To 艣wietne rozwi膮zanie w sytuacji, gdy masz ju偶 du偶y projekt i nagle zdecydujesz si臋 na wprowadzenie zmian w tre艣ci. Link:

Ta wtyczka s艂u偶y do tworzenia niestandardowych list punktowych.听 Link:

Ta wtyczka pomo偶e Ci wybra膰 odpowiednie kolory do swojego projektu.听Link:

Dzi臋ki tej wtyczce mo偶esz wgra膰 do swojego pliku Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji i wiele innych. Link:

Dzi臋ki tej wtyczce masz pod r臋k膮 ca艂膮 galeri臋 pi臋knych zdj臋膰 z Unsplash. Link:

10. Logo Creator

Je艣li szukasz inspiracji do logo dla Twojego projektu, to ta wtyczka na pewno Ci si臋 spodoba. Mo偶esz wybra膰 logo z gotowych kolekcji lub stworzy膰 w艂asne przy pomocy dost臋pnych kszta艂t贸w. Link:

Ta wtyczka s艂u偶y do tworzenia pi臋knych, spersonalizowanych ilustracji. Mo偶esz wybra膰 ilustracj臋 z bogatej kolekcji i dostosowa膰 jej zmienne tak, aby pasowa艂a do Twojego projektu.听 Link:

Pozna艂e艣 podstawowe Figma Plugins, sprawd藕 nast臋pnie: 3 nieoczywiste sposoby wykorzystania Figmy

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Collaborative tools- om贸wione zagadnienia:

1. Komentarze w plikach i prototypach
2. FigJam files

Komentarze w plikach i prototypach

Mo偶liwo艣膰 komentowania w plikach i prototypach to jeden z podstawowych collaborative tools. Aby w艂膮czy膰 tryb komentowania, kliknij narz臋dzie Add comment w Toolbar, nast臋pnie kliknij wybran膮 lokalizacj臋 na Canvie, do kt贸rej chcesz przypi膮膰 komentarz.

Przy w艂膮czonym trybie komentowania mo偶esz zarz膮dza膰 komentarzami w Properties panel.

Wprowadzanie zmian w warstwach na Canvie nie jest mo偶liwe podczas, gdy w艂膮czony jest tryb komentowania. Aby wyj艣膰 z trybu komentarzy wci艣nij Esc lub wybierz inne narz臋dzie Toolbar.

Komentarze w prototypach dzia艂aj膮 tak samo jak komentarze w plikach. Aby doda膰 komentarz do prototypu otw贸rz go w widoku prezentacji i przejd藕 do ekranu, kt贸ry chcesz skomentowa膰. Nast臋pnie kliknij w narz臋dzie Add comment w Toolbar i wybierz lokalizacj臋 na ekranie, do kt贸rej chcesz przypi膮膰 komentarz.听

FigJam files

FigJam to cyfrowa tablica umo偶liwiaj膮ca sprawn膮 prac臋 w zespole.听 Mo偶esz u偶ywa膰 FigJam do:

• przeprowadzania burzy m贸zg贸w i generowania pomys艂贸w,
• tworzenia drzew decyzyjnych, diagram贸w i map my艣li,
• dodawania opinii na temat projekt贸w,
• organizowania bada艅,
• planowania i przeprowadzania spotka艅 i sesji interaktywnych.

Aby stworzy膰 FigJam file wejd藕 w File browser i kliknij New FigJam file.

FigJam file sk艂ada si臋 z niesko艅czonej tablicy i dw贸ch pask贸w narz臋dzi.

1. Top toolbar

a) Main menu – lista wszystkich funkcji FigJam i ich skr贸ty klawiaturowe. Niekt贸re dzia艂ania b臋d膮 dost臋pne tylko po zaznaczeniu obiektu.

b) Templates– tutaj znajdziesz szablony tablic, kt贸re mo偶esz wykorzysta膰.听

c) File name– w tym miejscu mo偶esz zobaczy膰 i zmieni膰 lokalizacj臋 pliku lub jego nazw臋.

d) Users– tutaj wy艣wietlaj膮 si臋 awatary os贸b, kt贸re aktualnie przegl膮daj膮 lub edytuj膮 plik.

奥蝉办补锄贸飞办补: W plikach FigJam r贸wnie偶 mo偶esz klikn膮膰 w awatar innego u偶ytkownika, aby w艂膮czy膰 observation mode i 艣ledzi膰 jego dzia艂ania w czasie rzeczywistym.

e) Share settings– mo偶esz zarz膮dza膰 dost臋pem innych u偶ytkownik贸w do pliku.

f) Copy link – mo偶esz szybko umo偶liwi膰 dost臋p do pliku innym osobom, wysy艂aj膮c im link.听

g) Add comment – umo偶liwia dodawanie komentarzy w dowolnym miejscu na tablicy.听

h) Collaborate –听 tutaj dost臋pne s膮 narz臋dzia, kt贸re u艂atwiaj膮 komunikacj臋 podczas pracy zespo艂owej oraz timer.听

i) Zoom/view options – mo偶esz szybko dostosowa膰 opcje widoku w pliku.

2. Bottom toolbar

a) Navigation

• Move tool umo偶liwia przesuwanie i powi臋kszanie obiekt贸w.听
• Hand tool umo偶liwia poruszanie si臋 po pliku bez przypadkowego przesuwania element贸w听

b) Drawing tools – po klikni臋ciu w Marker masz dost臋p do r贸偶nych opcji rysowania. Dzi臋ki narz臋dziom marker i highlighter mo偶esz rysowa膰 odr臋czne linie i kszta艂ty. To 艣wietny spos贸b na zwr贸cenie uwagi na co艣 wa偶nego.

c) Shapes – mo偶esz u偶ywa膰 kszta艂t贸w do tworzenia diagram贸w. Do kszta艂t贸w mo偶esz dodawa膰 tre艣膰 i 艂膮czy膰 je ze sob膮 za pomoc膮 linii.听

d) Stickies s膮 wirtualnym odpowiednikiem papierowych karteczek samoprzylepnych, na kt贸rych mo偶esz zapisywa膰 swoje pomys艂y. Aby doda膰 karteczk臋 mo偶esz te偶 skorzysta膰 ze skr贸tu S.

奥蝉办补锄贸飞办补: Warto pami臋ta膰, aby na jednej karteczce zapisywa膰 tylko jedn膮 my艣l lub pomys艂. U艂atwi Ci to dalsz膮 prac臋 z karteczkami, np grupowanie pomys艂贸w i wybieranie najlepszych rozwi膮za艅.Na karteczkach, kt贸re stworzysz b臋dzie wy艣wietla艂o si臋 Twoje imi臋 i nazwisko.听 Mo偶esz usun膮膰 t膮 informacj臋 lub ponownie j膮 w艂膮czy膰 – u偶yj opcji Show/hide author.听听听

e) Text – to kluczowy element podczas burzy m贸zg贸w i przekazywania informacji innym cz艂onkom zespo艂u.听

f) Connectors and lines – linie pozwalaj膮 tworzy膰 艣cie偶ki mi臋dzy shapes i stickies, przedstawia膰 kolejno艣膰 lub dodawa膰 adnotacje.听 Kliknij ikon臋 liniii na pasku narz臋dzi i wybierz rodzaj linii jak膮 chcesz utworzy膰, a nast臋pnie kliknij i przeci膮gnij kursor mi臋dzy obiektami kt贸re chcesz po艂膮czy膰.听

Linie mo偶na przesuwa膰 po planszy i 艂膮czy膰 je z innymi obiektami.听

g) Sections – dzi臋ki tej funkcji mo偶esz grupowa膰 powi膮zane obiekty lub prowadzi膰 uczestnik贸w warsztat贸w przez okre艣lone dzia艂ania. U偶ywanie sections pomo偶e Ci unikn膮膰 chaosu na tablicy.听

h) Stamps and emotes – pozwalaj膮 dodawa膰 wizualne reakcje, kt贸re w pewnych sytuacjach mog膮 by膰 skuteczniejsze ni偶 tekst.听

Stamps mog膮 by膰 u偶ywane do generowania map ciep艂a, g艂osowania mi臋dzy pomys艂ami lub przydzielania os贸b do zada艅.

Emotes to tymczasowe reakcje u偶ywane m.in. do przekazywania szybkich informacji zwrotnych podczas wsp贸艂pracy i przyci膮gania uwagi innych u偶ytkownik贸w.

i) Widgets, stickers, templates and more – tutaj znajdziesz zasoby, kt贸re mo偶esz wykorzysta膰 podczas pracy.

Znasz ju偶 collaborative tools, kt贸re usprawni膮 twoj膮 prac臋 z zespo艂em. Sprawd藕 r贸wnie偶: Figma Plugins

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Prototypowanie w Figmie – om贸wione zagadnienia:

1. Badania u偶yteczno艣ci
2. Tworzenie prototyp贸w听
3. Ustawienia prototyp贸w听
4. Flow
5. Udost臋pnianie prototypu听

Badania u偶yteczno艣ci

Interaktywne prototypy interfejs贸w umo偶liwiaj膮 przedstawienie 艣cie偶ki podr贸偶y u偶ytkownik贸w po aplikacji. Mo偶esz wykorzystywa膰 je do bada艅, aby dowiedzie膰 si臋 jaki spos贸b u偶ytkownicy wchodz膮 w interakcj臋 z Twoim interfejsem. Takie badania nazywane s膮 badaniami u偶yteczno艣ci i pomagaj膮 znale藕膰 problemy, z jakimi mog膮 spotka膰 si臋 u偶ytkownicy.听

Stosowanie bada艅 u偶yteczno艣ci ju偶 w pocz膮tkowych etapach pracy nad aplikacj膮 pozwala zminimalizowa膰 straty, jakie firma mog艂aby ponie艣膰 wdra偶aj膮c na rynek nieprzetestowan膮 aplikacj臋. Zdarza si臋, 偶e pomys艂y, kt贸re na pocz膮tku wydaj膮 si臋 艣wietne dla projektant贸w, okazuj膮 si臋 by膰 ma艂o intuicyjne dla u偶ytkownik贸w.听

Tworzenie prototyp贸w

Prototypy mo偶esz tworzy膰 w zak艂adce Prototype w Properties panel.

Ustawienia prototyp贸w听

Kiedy nie zaznaczysz 偶adnej warstwy, w zak艂adce Prototype zobaczysz ustawienia dla prototypu.

• Device – wybierz Device i Model
• Preview – w tym miejscu mo偶esz zobaczy膰 jak zmieniane przez Ciebie ustawienia b臋d膮 wp艂ywa艂y na wygl膮d udost臋pnianego p贸藕niej prototypu.听
• Background – mo偶esz wybra膰 kolor t艂a, aby dostosowa膰 prototyp do swojej marki
• Flows – mo偶esz wybra膰 pocz膮tkow膮 ramk臋 prototypu

奥蝉办补锄贸飞办补:Punkt pocz膮tkowy flow utworzy si臋 automatycznie, gdy dodasz swoje pierwsze po艂膮czenie mi臋dzy dwiema ramkami.

Flow

Jest to 艣cie偶ka, kt贸r膮 u偶ytkownicy przechodz膮 przez sie膰 po艂膮czonych ze sob膮 Frames. Na jednej stronie w pliku mo偶esz stworzy膰 kilka osobnych flow, np flow dla tworzenia konta, inne do przegl膮dania produkt贸w lub realizacji transakcji.听

Aby utworzy膰 po艂膮czenie musisz mie膰 aktywn膮 zak艂adk臋 Prototyping.

Ustawienia dodanych po艂膮cze艅 mo偶esz dostosowa膰 w sekcji Interactions w Properties panel, po klikni臋ciu w po艂膮czony obiekt. Mo偶esz okre艣li膰 rodzaj interakcji.听

Po klikni臋ciu w dan膮 interakcj臋 masz dost臋p do dodatkowych ustawie艅.听

a) Interaction details – okre艣l rodzaj interakcji (On tap, On drag, While hovering, While pressing) oraz co dana interakcja ma powodowa膰 (Navigate to, Change to).听

b) Animation w tym miejscu mo偶esz okre艣li膰 jak dany element ma si臋 zachowa膰 po interakcji.听

Aby usun膮膰 po艂膮czenie, kliknij i przeci膮gnij na obu ko艅cach.听听

Udost臋pnianie prototypu

Aby udost臋pni膰 prototyp, musisz najpierw wy艣wietli膰 jego podgl膮d przyciskiem Present. W podgl膮dzie prototypu b臋dzie dost臋pny przycisk Share prototype w Toolbar.听

Po klikni臋ciu przycisku Share prototype otworzy si臋 okno, w kt贸rym mo偶esz ustali膰 poziom dost臋pu (Can view, Can edit) oraz okre艣li膰 kto mo偶e otworzy膰 plik (Anyone with the link, Only people invited to this file).

Zadanie 7.Dodaj po艂膮czenia mi臋dzy swoimi ekranami.听

• Po艂膮cz przycisk 鈥淟og in鈥� z ramk膮 Home.
• Po艂膮cz zdj臋cie i nazw臋 produktu, kt贸re znajduj膮 si臋 w ramce Home, z ramk膮 Product.
• U偶yj przycisku 鈥淏ack鈥� i stw贸rz po艂膮czenie umo偶liwiaj膮ce powr贸t do ekranu Home.

Po dodaniu po艂膮cze艅, mo偶esz wy艣wietli膰 podgl膮d przyciskiem Present i zobaczy膰 jak dzia艂a Tw贸j prototyp.听

Wiesz ju偶 jak optymalnie przeprowadzi膰 prototypowanie w Figmie, sprawd藕 nast臋pnie: Collaborative tools

If you like our content, join our busy bees community on

Jak u偶ywa膰 biblioteki styl贸w i komponent贸w w Figmie? – om贸wione zagadnienia:

1. Styles
2. Components
3. Biblioteka styl贸w i komponent贸w – jak publikowa膰?

Styles

S膮 to zestawy w艂a艣ciwo艣ci, kt贸re mo偶na zastosowa膰 do warstw w projektach. Aby utworzy膰 styl musisz najpierw zaznaczy膰 obiekt, kt贸rego w艂a艣ciwo艣ci chcesz zapisa膰. Nast臋pnie kliknij ikon臋 Style w Properties panel przy wybranej w艂a艣ciwo艣ci, nast臋pnie kliknij ikon臋 +.

Otworzy si臋 okno, w kt贸rym musisz wpisa膰 nazw臋 tworzonego stylu i kliknij Create style.

Utworzone style zobaczysz w Properties panel, gdy nie b臋d膮 zaznaczone 偶adnych obiekt贸w.听听

W panelu Edit styles mo偶esz doda膰 opis i edytowa膰 w艂a艣ciwo艣ci ka偶dego stylu. Za ka偶dym razem, gdy dokonasz zmian we w艂a艣ciwo艣ciach wybranego stylu, zmiany te zostan膮 zastosowane do wszystkich obiekt贸w, kt贸re go u偶ywaj膮.

Mo偶esz tworzy膰 style dla:听

Color (paints) styles– do wype艂nie艅 i obrys贸w obiekt贸w, tekstu i t艂a, a nawet dla obraz贸w i gradient贸w.

Text styles mo偶esz definiowa膰 style nag艂贸wk贸w i tekstu g艂贸wnego.听 Text styles mo偶esz stosowa膰 do ca艂ego bloku tekstu lub tylko do cz臋艣ci tekstu w bloku. Mo偶esz definiowa膰: font family, size, line height, spacing.

奥蝉办补锄贸飞办补: za pomoc膮 text styles nie mo偶na ustawi膰 wyr贸wnania tekstu.听

Effects – mo偶esz zdefiniowa膰 atrybuty shadow i blur

Layout grids – tworzenie styl贸w Layout grids jest przydatne, je艣li chcesz powiela膰 okre艣lon膮 struktur臋 w wielu projektach.

听Aby zastosowa膰 styl w aktywnej warstwie, kliknij ikon臋 Style w Properties panel obok wybranej w艂a艣ciwo艣ci i wybierz styl z listy.

Aby usun膮膰 styl z aktywnej warstwy, kliknij w Detach style. Jest to przydatne kiedy chcesz dokona膰 zmian w danym obiekcie bez ingerowania w styl.

Zadanie 6.1. Po膰wicz tworzenie styl贸w w Figmie.听 Stw贸rz styl dla:

• nag艂贸wk贸w sekcji na stronie g艂贸wnej,听
• nazw produkt贸w,
• cen.

Components

S膮 to elementy konstrukcyjne Twoich projekt贸w, kt贸re mo偶esz ponownie wykorzysta膰. Mog膮 to by膰 ikony, przyciski lub bardziej z艂o偶one elementy. Komponenty pomagaj膮 zachowa膰 sp贸jno艣膰 projekt贸w i umo偶liwiaj膮 szybkie wprowadzanie zmian w wielu plikach i projektach.

Aby stworzy膰 komponent musisz najpierw znaczy膰 warstwy, kt贸re b臋d膮 tworzy艂y komponent, a nast臋pnie klikn膮膰 Create component w Toolbar.

Warstwy komponentu zostan膮 zagnie偶d偶one w specjalnej ramce i wyr贸偶nione kolorem fioletowym, dzi臋ki temu 艂atwo odr贸偶nisz je spo艣r贸d innych warstw w Layer panel.

Komponenty przyjmuj膮 automatyczne nazwy. Nazw臋 komponent贸w mo偶esz zmienia膰 w zak艂adce Layers, tak jak w przypadku innych warstw – kliknij dwa razy w nazw臋.听

Po zaznaczeniu komponentu w Properties panel mo偶esz doda膰 opis komponentu i Documentation link dla wsp贸艂pracownik贸w.听

Komponenty mo偶esz przegl膮da膰 w zak艂adce Assets w Layers panel.

Zadanie 6.2. Po膰wicz tworzenie komponent贸w w Figmie.听Utw贸rz komponenty:

• a search bar – sk艂adaj膮cy si臋 z placeholdera, ikony lupy i tekstu 鈥淪earch鈥�;
• a bottom bar – sk艂adaj膮cy si臋 z prostok膮ta i ikon;
• CTA buttons – sk艂adaj膮ce si臋 z prostok膮ta i tekstu.

Biblioteka styl贸w i komponent贸w – jak publikowa膰?

Kiedy stworzysz style i komponenty, masz do nich dost臋p tylko bie偶膮cym pliku.听 Aby m贸c u偶ywa膰 styl贸w i komponent贸w w innych plikach, mo偶esz opublikowa膰 je w bibliotece. Akcja udost臋pniania styl贸w dost臋pna jest w Toolbar – rozwi艅 opcje obok nazwy pliku i kliknij Publish styles and components.

Znasz ju偶 opcje biblioteki styl贸w i komponent贸w, sprawd藕 teraz: Prototypowanie w Figmie

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Typography and text in Figma – om贸wione zagadnienia:

1. Dodawanie tekstu
2. W艂a艣ciwo艣ci tekstu

Dodawanie tekstu

Tre艣膰 do swojego pliku mo偶esz doda膰 za pomoc膮 Text tool, kt贸re znajduje si臋 w Toolbar.听

Mo偶esz utworzy膰 dwa rodzaje p贸l tekstowych. Wybierz narz臋dzie Text tool, a nast臋pnie:

• kliknij w Canvas – w ten spos贸b stworzysz pole tekstowe, kt贸rego wielko艣膰 b臋dzie dostosowywa膰 si臋 automatycznie do wpisywanej tre艣ci.
• kliknij i jednocze艣nie przeci膮gaj膮c kursor w canvas, w ten spos贸b stworzysz pole tekstowe o sta艂ej szeroko艣ci. Oznacza to, 偶e tekst nie mieszcz膮cy si臋 w szeroko艣ci pola b臋dzie automatycznie przenoszony do kolejnej linii.听

W艂a艣ciwo艣ci tekstu

Tak jak w przypadku ramek i kszta艂t贸w, w艂a艣ciwo艣ci tekstu mo偶esz zobaczy膰 w Properties panel, po zaznaczeniu warstwy tekstowej. Dost臋pne opcje pozwalaj膮 kontrolowa膰 wiele aspekt贸w wygl膮du warstw tekstowych, mi臋dzy innymi ich rozmiar, font i wyr贸wnanie.

1. Text styles – w tym miejscu mo偶esz przegl膮da膰 i tworzy膰 style tekst贸w.

2. Font – tutaj mo偶esz wybra膰 rodzaj fontu, kt贸rego chcesz u偶y膰. Po klikni臋ciu rozwinie si臋 lista wyboru. Je艣li znasz nazw臋 fontu, kt贸rego szukasz mo偶esz po prostu j膮 wpisa膰.

奥蝉办补锄贸飞办补: Tekst jest jednym z kluczowych element贸w interfejsu, dlatego bardzo wa偶na jest jego czytelno艣膰. Unikaj stosowania script fonts, kt贸re cho膰 wygl膮daj膮 pi臋knie, utrudniaj膮 odbi贸r tre艣ci. Je艣li nie masz du偶ego do艣wiadczenia w pracy z typografi膮, to dobrym rozwi膮zaniem na pocz膮tku b臋dzie korzystanie z jednego z bezpiecznych font贸w, dost臋pnych w Figmie: Open Sans, Roboto lub Source Sans Pro.听

Prac臋 z tekstem u艂atwi Ci wtyczka 鈥淭ypescale鈥�, kt贸ra dobierze odpowiednie wielko艣ci.

3. Text weight and slant– w tym miejscu mo偶esz dostosowa膰 wygl膮d tekstu wybieraj膮c jeden z dost臋pnych wariant贸w fontu听

奥蝉办补锄贸飞办补: niekt贸re fonty nie maj膮 swoich wariant贸w, wi臋c opcja ta mo偶e by膰 niedost臋pna.听

4. Text size – w tym miejscu mo偶esz zmieni膰 rozmiar tekstu.听

奥蝉办补锄贸飞办补: zmiana rozmiaru pola warstwy tekstowej nie powoduje zmiany wielko艣ci tekstu.

5. Line height – pozwala dostosowa膰 odleg艂o艣膰 w pionie mi臋dzy wierszami tekstu

6. Letter spacing – pozwala dostosowa膰 odleg艂o艣膰 w poziomie mi臋dzy literami.听

7. Paragraph spacing– pozwala dostosowa膰 odleg艂o艣膰 w pionie mi臋dzy akapitami

8. Auto width – w艂膮czenie tej opcji powoduje, 偶e d艂ugo艣膰 pola tekstowego dostosowuje si臋 do d艂ugo艣ci wpisywanej tre艣ci.

9. Auto height 鈥� w艂膮czenie tej opcji sprawia, 偶e mo偶emy kontrolowa膰 szeroko艣膰 pola tekstowego, a jego wysoko艣膰 b臋dzie dostosowywa艂a si臋 automatycznie听

10. Fixed size – ta opcja sprawia, 偶e wielko艣膰 pola tekstowego dostosowuje si臋 do jego zawarto艣ci

11.Text align left / center / right– pozwala dostosowa膰 poziome wyr贸wnanie w polu tekstowym

12. Align top / middle / bottom – pozwala dostosowa膰 pionowe wyr贸wnanie w polu tekstowym

Zadanie 5.1. Dodaj teksty do swojej aplikacji. Pami臋taj o zachowaniu odpowiednich wielko艣ci font贸w. Zadbaj o to, aby najwa偶niejsze informacje od razu rzuca艂y si臋 w oczy.

• W przypadku aplikacji e-commerce wa偶ne jest aby informacje o cenie i nazwie produktu by艂y dobrze widoczne. Zastosuj pogrubienie fontu aby wyr贸偶ni膰 tekst, na kt贸ry chcesz zwr贸ci膰 uwag臋 u偶ytkownika.听
• Zadbaj o to, aby przyciski CTA (Call to action) by艂y dobrze widoczne i zach臋ca艂y do klikni臋cia w nie. W tym przypadku s膮 to przyciski: 鈥淟og in鈥� i 鈥淎dd to card鈥�.听 Kolor przycisku i kolor tekstu umieszczonego na nim musz膮 ze sob膮 kontrastowa膰, aby tekst by艂 艂atwy do przeczytania.听
• Dodaj te偶 etykiety do pleceholder贸w.听

Zadanie 5.2. Kiedy b臋dziesz mia艂 ju偶 wszystkie elementy, mo偶esz zaj膮膰 si臋 dobraniem odpowiednich kolor贸w do swojego projektu. Pomo偶e Ci w tym wtyczka Color palettes.

Sprawd藕 r贸wnie偶 kolejny wpis z cyklu Figma dla Pocz膮tkuj膮cych: Jak u偶ywa膰 biblioteki styl贸w i komponent贸w w Figmie?

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Tworzenie kszta艂t贸w i ich modyfikacja w Figmie – om贸wione zagadnienia:

1. Dodawanie kszta艂t贸w
2. Properties panel – Design听
3. Edit object
4. Boolean groups
5. Masks w Figma

Dodawanie kszta艂t贸w

Kszta艂t mo偶esz doda膰 poprzez funkcj臋 Figma Shape tools, kt贸r膮 znajdziesz w Toolbar. Funkcja ta umo偶liwia tworzenie podstawowych kszta艂t贸w wektorowych: prostok膮t, linia, strza艂ka, elipsa, wielok膮t, gwiazda.听

Mo偶esz te偶 rysowa膰 dowolne kszta艂ty za pomoc膮 Drawing tools. Do wyboru masz Pen oraz Pencil.听

Tak jak w przypadku dodawania ramek, istnieje kilka sposob贸w tworzenia kszta艂t贸w:

• po wybraniu kszta艂tu z listy Shape tools kliknij w obszar frame lub Canvas. Spowoduje to utworzenie kszta艂tu o domy艣lnym rozmiarze 100×100 px
• Je艣li chcesz od razu mie膰 kontrol臋 nad wielko艣ci膮 tworzonego elementu, to kliknij na obszar frame lub Canvas i przytrzymaj lewy przycisk myszy, a nast臋pnie przesuwaj膮c mo偶esz dowolnie manipulowa膰 wielko艣ci膮 kszta艂tu,
• Je艣li chcesz stworzy膰 idealny kwadrat, ko艂o lub wielok膮t przytrzymaj klawisz Shift podczas przeci膮gania.听

Ka偶dy kszta艂t, obiekt tekstowy lub obraz, kt贸ry dodasz do Canvas, b臋dzie stanowi艂 osobn膮 warstw臋. Dzi臋ki temu mo偶esz modyfikowa膰 indywidualne w艂a艣ciwo艣ci ka偶dego elementu.听

Properties panel – Design听

W艂a艣ciwo艣ci obiekt贸w mo偶esz przegl膮da膰 i edytowa膰 w zak艂adce Design w Properties panel. Od typu warstwy zale偶y jakie parametry b臋d膮 tutaj wy艣wietlane. Wi臋kszo艣膰 parametr贸w powtarza si臋 we wszystkich typach warstw.听

Je艣li nie zaznaczysz 偶adnej warstwy, to w Properties panel b臋d膮 wy艣wietla膰 si臋 wszystkie lokalne style dla pliku i kolor Canvas.

W zak艂adce Design mo偶esz dostosowa膰 nast臋puj膮ce parametry:听

1. Alignment – narz臋dzia wyr贸wnywania umo偶liwiaj膮 odpowiednie u艂o偶enie warstw w Canvas wzgl臋dem siebie. Te funkcje s膮 dost臋pne tylko po zaznaczeniu dw贸ch lub wi臋cej warstw.

2. Distribution and Tidy up – Umo偶liwiaj膮 porz膮dkowanie warstw poprzez tworzenie r贸wnych odst臋p贸w mi臋dzy nimi.听 Te funkcje s膮 dost臋pne tylko po zaznaczeniu dw贸ch lub wi臋cej warstw.听

3. Position of the Canvas (X and Y) – w tym miejscu mo偶esz dostosowa膰 po艂o偶enie warstw w Canvas wzd艂u偶 osi poziomej X i pionowej Y.

4. Dimensions of the Object (Width and Height)– w tym miejscu mo偶esz zmieni膰 wymiary warstwy.听

5. Constrain proportions – pozwala zachowa膰 proporcje kszta艂tu podczas zmiany rozmiaru. Dzi臋ki temu mo偶esz zmieni膰 wysoko艣膰 lub szeroko艣膰 kszta艂tu, a drugi parametr dostosuje si臋 automatycznie.听

6. Rotation – mo偶esz ustawi膰 pochylenie ramki

7. Corner Radius – dzi臋ki tej funkcji mo偶esz zaokr膮gli膰 rogi ramki,

8. Independent corners– po zaznaczeniu tej opcji mo偶esz ustali膰 indywidualn膮 warto艣膰 zaokr膮glenia dla ka偶dego rogu ramki.

9. Layer (Blend Modes)– w tym miejscu mo偶esz okre艣li膰 w jaki spos贸b dwie warstwy maj膮 si臋 ze sob膮 艂膮czy膰. Do ka偶dej warstwy mo偶esz zastosowa膰 tylko jeden tryb mieszania.听

10. Fill and Stroke – mo偶esz nak艂ada膰 wype艂nienia i obrysy na kszta艂ty i warstwy tekstowe. Aby doda膰 wype艂nienie lub obrys, zaznacz wybran膮 warstw臋 i kliknij w ikon臋 +.听 Do ka偶dej warstwy mo偶esz doda膰 kilka wype艂nie艅 i obrys贸w.

Dla wype艂nie艅 i obrys贸w domy艣lnie ustawiona jest opcja Solid color. Aby dostosowa膰 w艂a艣ciwo艣ci kliknij w pr贸bk臋 koloru. Otworzy si臋 sektor kolor贸w, w kt贸rym dost臋pne s膮 opcje: Solid color, gradient (linear, radial, angular, diamond) i image.

Je艣li potrzebujesz bardziej zmodyfikowa膰 styl obrysu mo偶esz skorzysta膰 z Advanced stroke settings, kt贸re s膮 dost臋pne pod ikon膮 three dots menu.听

奥蝉办补锄贸飞办补: mo偶esz w艂膮cza膰 i wy艂膮cza膰 widoczno艣膰 ka偶dej w艂a艣ciwo艣ci w aktywnej warstwie, za pomoc膮 ikony Eye. Aktywne w艂a艣ciwo艣ci b臋d膮 wy艣wietla艂y si臋 kolorem czarnym, dzi臋ki temu 艂atwo odr贸偶nisz je od nieaktywnych.

11.Effects – tutaj mo偶esz doda膰 cie艅 lub rozmycie do warstwy. Aby dostosowa膰 warto艣ci efekt贸w kliknij Effect settings, kt贸re znajduj膮 si臋 pod przyciskiem z ikon膮 s艂o艅ca.听

12.Export Settings w tym miejscu mo偶esz export wybran膮 warstw臋 do wybranego formatu: PNG, JPG, SVG i PDF.听听

Zadanie 4.1. Zaplanuj rozmieszczenie element贸w interfejsu swojej aplikacji. Na pocz膮tku stw贸rz wireframes za pomoc膮 prostych kszta艂t贸w.听

奥蝉办补锄贸飞办补: Pami臋taj o nadawaniu ka偶dej warstwie odpowiednich nazw na bie偶膮co. Je艣li nie b臋dziesz tego pilnowa艂, z pewno艣ci膮 bardzo szybko zauwa偶ysz jak w Twoich warstwach powstaje chaos.听

Zacznijmy od ramki Login:

• Na g贸rze ekranu umie艣cimy logo projektowanej aplikacji.听
听
• Poni偶ej b臋d膮 znajdowa艂y si臋 placeholdery z etykietami: login i has艂o.听 W tej chwili miejsce na tekst mo偶esz zaznaczy膰 prostok膮tem. Dodawaniem tekstu zajmiemy si臋 w kolejnym rozdziale.听
• Na dole ekranu umie艣cimy przycisk logowania.听

奥蝉办补锄贸飞办补: Je艣li szukasz logo do swojego projektu, mo偶esz wej艣膰 na stron臋: i pobra膰 wybrane logo z darmowych zasob贸w.听

Ka偶dy plik na Freepik.com ma informacj臋 o licencji. Przed pobraniem upewnij si臋, 偶e jego licencja umo偶liwia Ci korzystanie z niego w taki spos贸b, w jaki potrzebujesz.

Mo偶esz te偶 wykorzysta膰 logo dost臋pne w wtyczce 鈥淟ogo creator鈥�.

Teraz zajmijmy si臋 ramk膮 Home:听听

• Na g贸rze ekranu umie艣cimy search bar.
• Poni偶ej b臋dzie znajdowa艂 si臋 nag艂贸wek 鈥淏estsellers鈥�.
• Pod nag艂贸wkiem umie艣cimy zdj臋cia produkt贸w w dw贸ch kolumnach. Stw贸rz prostok膮t mieszcz膮cy si臋 w szeroko艣ci jednej kolumny i powiel go kilka razy.听
• Pod ka偶dym produktem powinno znale藕膰 si臋 miejsce na jego nazw臋 i cen臋.听
• Kolejnym elementem naszego interfejsu b臋dzie pasek dolny, w kt贸rym umie艣cimy ikony: home, favorite, profile, koszyk.

奥蝉办补锄贸飞办补: Ikony mo偶esz bardzo 艂atwo doda膰 do swojego projektu, kopiuj膮c je z plik贸w dost臋pnych w Figma

Community.听YPrzyk艂adowy plik znajdziesz tutaj: 听

Wystarczy, 偶e klikniesz w przycisk Get a copy, a otworzy si臋 plik Iconia – fully editable icon pack of 1,300+ ready to use and scalable vector icons in 6 unique styles. Aby skopiowa膰 wybrane ikony przejd藕 do strony Iconia library w Layers panel.听

Znajd藕 ikon臋, kt贸rej chcesz u偶y膰 w swoim pliku, kliknij w ni膮 prawym przyciskiem myszy i kliknij Copy. Nast臋pnie wr贸膰 do swojego pliku, ponownie kliknij prawym przyciskiem myszy w dowolnym miejscu i wybierz Paste here.听

Innym sposobem na dodawanie ikon jest korzystanie z wtyczek. W 9 rozdziale 鈥淔igma Plugins鈥� znajdziesz opis wtyczki 鈥淚conify鈥�, dzi臋ki kt贸rej b臋dziesz mia艂 szybki dost臋p do biblioteki ikon.

Pami臋taj, 偶e sp贸jno艣膰 interfejsu jest bardzo wa偶na. Zdecyduj si臋 na jeden styl ikon i trzymaj si臋 go w ka偶dym miejscu swojej aplikacji. T膮 sam膮 zasad臋 stosuj p贸藕niej do styl贸w tekst贸w, wielko艣ci zdj臋膰 i innych element贸w.听

Kiedy masz ju偶 zaplanowane rozmieszczenie element贸w na stronie g艂贸wnej, mo偶esz przej艣膰 do ramki Product:

• Na g贸rze ekranu, po lewej stronie umie艣cimy przycisk 鈥淏ack鈥�.
• Poni偶ej b臋dzie znajdowa艂o si臋 du偶e zdj臋cie produktu.
• W prawym rogu zdj臋cia umie艣cimy przycisk z ikon膮 鈥渇avorite鈥�.听
• Pod zdj臋ciem umie艣cimy nazw臋 i cen臋 produktu oraz miejsce na opis.听
听
• Na dole ekranu doy przycisk CTA听 鈥淎dd to card鈥�.听

Edit object

Wszystkie kszta艂ty mo偶esz swobodnie modyfikowa膰 za pomoc膮 narz臋dzia Edit object, kt贸re znajduje si臋 na 艣rodku paska Toolbar. Aby zobaczy膰 t膮 funkcj臋 musisz najpierw zaznaczy膰 kszta艂t, kt贸ry chcesz zmodyfikowa膰.听

Aktywowanie trybu edycji sprawi, 偶e w Toolbar pojawi膮 si臋 nowe funkcje, a na edytowanym kszta艂cie zobaczysz corners points. Mo偶esz klikn膮膰 w wybrany corner point i przeci膮gn膮膰 go, aby zmieni膰 form臋 kszta艂tu.听

Mo偶esz te偶 doda膰 inne Corners points do kszta艂tu za pomoc膮 narz臋dzia Pen. Pozwoli Ci to na wi臋ksze modyfikacje.听

Mo偶esz te偶 dowolnie zgina膰 kszta艂ty za pomoc膮 Bend tool. Zaznacz Bend tool w toolbar, a nast臋pnie kliknij w wybrany corner point.听

Narz臋dzie Paint bucket pozwala usuwa膰 i przywraca膰 wype艂nienie kszta艂tu. Aby to zrobi膰 zaznacz Paint bucket, a nast臋pnie kliknij w edytowany kszta艂t.听

Aby wyj艣膰 z trybu edycji kszta艂tu kliknij w niebieski przycisk Done.

Boolean groups

Je艣li zaznaczysz dwa lub wi臋cej kszta艂t贸w, to w Toolbar pojawi si臋 narz臋dzie Figma Boolean groups. Pozwala ono tworzy膰 niestandardowe kszta艂ty poprzez 艂膮czenie ich, za pomoc膮 jednej z czterech dost臋pnych formu艂: union, subtract, intersect, exclude.

• union selection – 艂膮czy wybrane kszta艂ty w jeden nowy kszta艂t.

• subtract selection – odejmuje wszystkie g贸rne kszta艂ty i ich nak艂adaj膮ce si臋 obszary od najni偶szego kszta艂tu

• intersect selection– nowy kszta艂t sk艂ada si臋 tylko z nak艂adaj膮cych si臋 fragment贸w wybranych kszta艂t贸w

• exclude selection – powsta艂y kszta艂t sk艂ada si臋 tylko z fragment贸w wybranych kszta艂t贸w, kt贸re nie nak艂adaj膮 si臋 na siebie.

Po zastosowaniu narz臋dzia Boolean group wszystkie wybrane kszta艂ty 艂膮cz膮 si臋 w pojedyncz膮 warstw臋 kszta艂tu, co oznacza, 偶e maj膮 wsp贸lne w艂a艣ciwo艣ci wype艂nienia i obrysu. Mo偶esz 艂膮czy膰 je z kolejnymi kszta艂tami i wykonywa膰 kolejne operacje logiczne.听

Zadanie 4.2. Po膰wicz modyfikowanie kszta艂t贸w za pomoc膮 narz臋dzi Edit object oraz Boolean group. Nawet je艣li funkcje te nie b臋d膮 Ci potrzebne na tym etapie Twojego projektu, to warto utrwali膰 swoj膮 wiedz臋 poprzez praktyk臋. B膮d藕 kreatywny i baw si臋. Mo偶esz te偶 spr贸bowa膰 odtworzy膰 przyk艂adowe kszta艂ty, kt贸re widzisz na poni偶szym screenie. Mo偶esz w tym celu stworzy膰 now膮 stron臋 w pliku lub dodawa膰 obiekty obok ramek z projektem, a p贸藕niej po prostu je usun膮膰.听

Masks w Figma

Maski pozwalaj膮 pokazywa膰 tylko wybrane obszary obrazu i ukry膰 reszt臋 bez konieczno艣ci przycinania. Oznacza to, 偶e 偶adna cz臋艣膰 warstw w procesie maskowania nie jest usuwana ani modyfikowana, wi臋c w ka偶dej chwili mo偶esz zmodyfikowa膰 mask臋, je艣li zechcesz pokaza膰 inn膮 cz臋艣膰 obrazu.听

Aby lepiej to zrozumie膰 mo偶esz wyobrazi膰 sobie ramk臋 na zdj臋cie z ma艂ym otworem. Zobaczysz w niej tylko cz臋艣膰 zdj臋cia, podczas gdy reszta jest ukryta, ale je艣li otworzysz ramk臋, to nadal mo偶esz zobaczy膰 ca艂e zdj臋cie.听

Jako maski mo偶esz u偶y膰 dowolnej warstwy, np. kszta艂t贸w wektorowych, warstw tekstowych i obraz贸w.听

Bardzo wa偶na jest kolejno艣膰 warstw. Najni偶sza warstwa w jest uwa偶ana za kontener maski, czyli otw贸r, przez kt贸ry zobaczysz obraz.听

Aby utworzy膰 mask臋 nale偶y upewni膰 si臋, 偶e warstwy s膮 odpowiednio u艂o偶one. Nast臋pnie nale偶y zaznaczy膰 obie warstwy i wybra膰 opcj臋 Use as mask w Toolbar.听

Wszystkie zewn臋trzne obszary warstwy, kt贸re znajduj膮 si臋 nad kontenerem zostan膮 ukryte. Widoczne pozostaj膮 tylko te obszary, kt贸re znajd膮 si臋 wewn膮trz obszaru maski.听

Zadanie 4.3. U偶yj masek aby doda膰 zdj臋cia produkt贸w do swojego projektu.听 Pami臋taj o odpowiedniej kolejno艣ci warstw. Warstwa, kt贸ra stanowi膰 b臋dzie kontener musi znale藕膰 si臋 pod warstw膮 obrazu.

奥蝉办补锄贸飞办补:: Darmowe zdj臋cia do projekt贸w mo偶esz pobra膰 ze strony 听听

听听Mo偶esz r贸wnie偶 skorzysta膰 z wtyczki 鈥淯nsplash鈥�.

Sprawd藕 kolejny krok przewodnika z obs艂ugi narz臋dzia Figma: Typography and text in Figma

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Figma interface- om贸wione zagadnienia:

1. File browser interface
2. File Figma interface听

File browser interface

Pierwsz膮 rzecz膮, kt贸r膮 zobaczysz po zalogowaniu si臋 w Figmie, b臋dzie File browser, kt贸ra umo偶liwia nawigacj臋 po koncie. Z tego miejsca masz dost臋p do swoich projekt贸w, zespo艂贸w i zasob贸w.听 Interfejs File browser sk艂ada si臋 z trzech segment贸w: Navigation bar, Sidebar oraz Files.

1. Navigation bar znajduje si臋 u g贸ry ekranu i umo偶liwia wykonywanie okre艣lonych dzia艂a艅 na poziomie konta.

A) User name – tutaj wy艣wietla si臋 nazwa aktywnego u偶ytkownika. Po klikni臋ciu mo偶esz prze艂膮cza膰 si臋 mi臋dzy kontami, do kt贸rych jeste艣 zalogowany na danym urz膮dzeniu.

B) Search bar – tutaj mo偶esz szybko wyszuka膰 po nazwie swoje pliki, projekty oraz wsp贸艂pracownik贸w.听

C) Notifications– w tym miejscu b臋d膮 pojawia艂y si臋 powiadomienia o wszystkim, co b臋dzie dzia艂o si臋 na Twoim koncie.

D) Account menu– tutaj mo偶esz zarz膮dza膰 ustawieniami konta i zainstalowanymi wtyczkami.

奥蝉办补锄贸飞办补: Je艣li korzystasz z aplikacji komputerowej Figma, mo偶esz 艂atwo prze艂膮cza膰 si臋 mi臋dzy projektem, a przegl膮dark膮 plik贸w. Projekty otwieraj膮 si臋 jako nowe zak艂adki, a przegl膮darka plik贸w oznaczona jest ikon膮 Home.

2. Sidebar – to obszar interfejsu znajduj膮cy si臋 z lewej strony ekranu. Umo偶liwia on nawigacj臋 po plikach i prototypach.

Recents – w tej zak艂adce w pierwszej kolejno艣ci wy艣wietlaj膮 si臋 pliki i prototypy, kt贸re ostatnio przegl膮da艂e艣 lub edytowa艂e艣.

Drafts – w tym miejscu wy艣wietlaj膮 si臋 wszystkie wersje robocze, kt贸re utworzy艂e艣.听Dodatkowo znajdziesz tu zak艂adk臋 Deleted, w kt贸rej mo偶esz zobaczy膰 archiwalne pliki.

Usuni臋te pliki mo偶esz przywr贸ci膰 lub usun膮膰 na zawsze – kliknij prawym przyciskiem myszy na plik, aby zobaczy膰 te opcje.听

Community – jest to przestrze艅, w kt贸rej mo偶esz przegl膮da膰 pliki i wtyczki udost臋pniane przez innych u偶ytkownik贸w Figmy. Do Community jeszcze wr贸cimy w dalszej cz臋艣ci ebooka.听

Teams– tutaj zobaczysz wszystkie zespo艂y, do kt贸rych nale偶ysz.听

3. Files – w tym miejscu wy艣wietlane s膮 wszystkie Twoje pliki.听

Dla ka偶dej strony w File browser mo偶esz wybra膰 spos贸b wy艣wietlania plik贸w: Show as grid lub Show as list. Domy艣lnie ustawiony jest widok grid.听

Pliki mo偶esz filtrowa膰 i sortowa膰 wed艂ug swoich potrzeb.

Nad list膮 plik贸w w zak艂adkach Recents i Drafts znajduj膮 si臋 przyciski dodawania plik贸w: New design file lub New FigJam file. Ka偶dy typ plik贸w ma w艂asny zestaw funkcji i narz臋dzi.

Design files to przestrze艅, w kt贸rej b臋dziesz tworzy膰 swoje projekty interfejs贸w.

FigJam files to cyfrowe tablice wykorzystywane m.in. do spotka艅 i warsztat贸w online. Wi臋cej na ten temat dowiesz si臋 w 8 rozdziale 鈥淐ollaborative tools鈥�.

Zadanie 2.1.听Zapoznaj si臋 z interfejsem File browser w Figmie i otw贸rz sw贸j pierwszy projekt. U偶yj przycisku New Design File.听

File Figma interface

Interfejs u偶ytkownika Figmy podczas edycji pliku sk艂ada si臋 z czterech obszar贸w: Canvas, Toolbar, Layers panel, Properties panel.

1. Canvas to obszar g艂贸wny, znajduj膮cy si臋 na 艣rodku ekranu. Jest to przestrze艅, w kt贸rej b臋dziesz pracowa膰.

2. Toolbar to pasek znajduj膮cy si臋 na g贸rze ekranu. W tym miejscu dost臋pne s膮 niezb臋dne narz臋dzia i funkcje, kt贸rych potrzebujesz do projektowania interfejs贸w.

a) Main menu – w tym miejscu masz dost臋p do listy wszystkich funkcji Figmy. Na li艣cie wy艣wietlaj膮 si臋 te偶 Keyboard shortcuts funkcji.听

奥蝉办补锄贸飞办补: Wszystkie Keyboard shortcuts mo偶esz zobaczy膰 r贸wnie偶 w specjalnym panelu. Aby go w艂膮czy膰 kliknij w Main menu > Help and account > Keyboard shortcuts.

Main menu zawiera:

• Back to files – przenosi do File browser.
• Quick action – tutaj mo偶esz wyszuka膰 funkcje po nazwie, kt贸rych potrzebujesz.
• File – pozwala na wykonywanie akcji w plikach, takich jak Save i Export.听
• Edit – tutaj znajdziesz podstawowe funkcje umo偶liwiaj膮ce edycj臋 plik贸w, takie jak: Undo, Redo, Copy, Paste oraz zaawansowane funkcje zaznaczania obiekt贸w.
• View – pozwala kontrolowa膰 ustawienia widoku Grids i Rulers, zawiera te偶 funkcje powi臋kszania i nawigacji w obr臋bie pliku.听
• Object – tutaj znajduj膮 si臋 wszystkie funkcje potrzebne do pracy z obiektami.
• Text – pozwala formatowa膰 tekst (Pogrubienie, Pochylenie, Wyr贸wnanie) i tworzy膰 Bulleted and Numbered lists.
• Arrange – pozwala uporz膮dkowa膰 obiekty za pomoc膮 wielu wariant贸w funkcji Align and Distribute.
• Plugins – tutaj mo偶esz zarz膮dza膰 zainstalowanymi wtyczkami. Wtyczki rozszerzaj膮 funkcjonalno艣膰 Figmy i u艂atwiaj膮 projektowanie. Polecane wtyczki znajdziesz w 9 rozdziale 鈥淔igma Plugins鈥�.
• Integrations – za pomoc膮 tej funkcji mo偶esz udost臋pnia膰 swoje projekty w pod艂膮czonych aplikacjach.
• Preferences – w tym miejscu mo偶esz dostosowa膰 ustawienia pliku, dotycz膮ce mi臋dzy innymi przyci膮gania obiekt贸w i widoczno艣ci wybranych element贸w
• Libraries – w tym module znajdowa膰 si臋 b臋d膮 komponenty i style, kt贸re mo偶esz wykorzysta膰 w swoim pliku.

b) Move and scale tools

• Move tool umo偶liwia przenoszenie obiekt贸w w Canvas i zmian臋 kolejno艣ci warstw w Layers panel.听
• Scale toolumo偶liwia zmian臋 rozmiaru warstw, bez zniekszta艂cania ich.

c) Frame and Slice tools

• Frame tool pozwala wybra膰 wielko艣膰 ekranu urz膮dzenia, na kt贸re b臋dziesz projektowa艂.听
• Slice tool umo偶liwia wyeksportowanie do nowej warstwy okre艣lonej cz臋艣ci ekranu.听

d) Shape tools – w tym miejscu znajduj膮 si臋 podstawowe kszta艂ty geometryczne oraz funkcja Place image.

e) Pen and Pencil tools

• Pen tool s艂u偶y do tworzenia niestandardowych kszta艂t贸w.
• Pencil tool umo偶liwia dodawanie odr臋cznych rysunk贸w.听

f) Text tool – tworzy warstwy tekstowe.听

g) Hand tool – umo偶liwia poruszanie si臋 po projekcie i klikanie w obr臋bie pliku bez przypadkowego zaznaczania i przesuwania obiekt贸w.听

h) Comment tool – pozwala na szybk膮 wymian臋 pomys艂贸w z cz艂onkami zespo艂u.

i) File name – w tym miejscu mo偶esz zobaczy膰 i zmieni膰 lokalizacj臋 pliku lub jego nazw臋.

j) Users – tutaj zobaczysz osoby, kt贸re aktualnie przegl膮daj膮 lub edytuj膮 plik.听

奥蝉办补锄贸飞办补: Kiedy pracujesz w zespole mo偶esz klikn膮膰 w awatar innego u偶ytkownika, aby w艂膮czy膰 observation mode i 艣ledzi膰 jego dzia艂ania w czasie rzeczywistym. Canvas i avatar 艣ledzonego u偶ytkownika b臋dzie oznaczony kolorow膮 ramk膮, kiedy Observation mode b臋dzie aktywny.

Mo偶esz te偶 wyr贸偶ni膰 si臋, aby inni cz艂onkowie zespo艂u mogli 艂atwo 艣ledzi膰 Twoje ruchy. Kliknij na sw贸j awatar i wybierz Spotlight me.

k) Share settings – w tym miejscu mo偶esz zarz膮dza膰 dost臋pem innych u偶ytkownik贸w do pliku.听

l) Present – ta opcja umo偶liwia podgl膮d pliku i interakcj臋 z utworzonymi prototypami.听

m) Zoom/view options – w tym miejscu mo偶esz szybko dostosowa膰 opcje widoku pliku.

3. Layers panel to obszar znajduj膮cy si臋 po lewej stronie ekranu. Tutaj wy艣wietla膰 si臋 b臋d膮 wszystkie komponenty i warstwy pliku.听

a) Layers – w tym miejscu widoczne b臋d膮 wszystkie obiekty dodane do Canvas. Ka偶dy obiekt stanowi osobn膮 warstw臋.听 Obok ka偶dej warstwy widoczna jest ikona, kt贸ra wskazuje jej typ.

奥蝉办补锄贸飞办补: Zmienianie domy艣lnych nazw warstw jest czynno艣ci膮, o kt贸rej 艂atwo zapomnie膰, ale staraj o tym pami臋ta膰. Dzi臋ki temu utrzymasz porz膮dek w pliku i b臋dzie Ci 艂atwiej znale藕膰 konkretny element, kiedy b臋dziesz chcia艂 go edytowa膰.听

Je艣li jednak zapomnisz o porz膮dkowaniu swojego pliku na bie偶膮co – nic straconego. Istniej膮 wtyczki, takie jak 鈥淐lean Document鈥�, kt贸re pomog膮 Ci zapanowa膰 nad chaosem. Nowe warstwy obiekt贸w umieszczane s膮 w nadrz臋dnej ramce lub grupie. Dzi臋ki temu mo偶liwe jest zwijanie i rozwijanie widoku warstw ramek i grup.

Ka偶d膮 warstw臋 mo偶esz zablokowa膰 i odblokowa膰. Aby to zrobi膰 kliknij ikon臋 Padlock, kt贸ra wy艣wietla si臋 obok nazwy warstwy, po najechaniu kursorem na warstw臋. Zablokowane lub niewidoczne warstwy b臋dziesz m贸g艂 bardzo 艂atwo odr贸偶ni膰 od innych warstw, poniewa偶 b臋d膮 oznaczone odpowiedni膮 ikon膮.听

奥蝉办补锄贸飞办补: Mo偶liwo艣膰 zablokowania warstw jest bardzo przydatna, zw艂aszcza w przypadku, gdy jakie艣 warstwy znajduj膮 si臋 w tle. Dzi臋ki temu unikniesz przypadkowego przesuwania element贸w.听

W tym miejscu mo偶esz r贸wnie偶 wy艂膮cza膰 i w艂膮cza膰 widoczno艣膰 wybranych warstw. Aby to zrobi膰 kliknij ikon臋 Eye.

Zablokowane i wy艂膮czone warstwy mo偶esz bardzo 艂atwo odr贸偶ni膰 na li艣cie warstw – oznaczone s膮 odpowiednimi ikonami.

b) Assets tej zak艂adce wy艣wietlane s膮 komponenty, kt贸re mo偶esz wykorzysta膰 w swoim pliku. Mog膮 by膰 to ikony, przyciski lub inne, bardziej z艂o偶one elementy interfejsu u偶ytkownika. Aby znale藕膰 okre艣lony komponent u偶yj pola wyszukiwania. Komponenty wyszukiwane s膮 w bie偶膮cym pliku oraz w bibliotekach, do kt贸rych masz dost臋p. Wi臋cej na ten temat dowiesz si臋 w 6 rozdziale 鈥淟ibraries鈥�.听

c) Page– w ka偶dym pliku mo偶esz doda膰 nieograniczon膮 liczb臋 stron. Ka偶da strona ma swoj膮 w艂asn膮 przestrze艅 Canvas, dzi臋ki temu w jednym pliku mo偶esz tworzy膰 odr臋bne prototypy.

奥蝉办补锄贸飞办补: mo偶esz dostosowa膰 szeroko艣膰 Layers panel. Aby to zrobi膰 z艂ap praw膮 kraw臋d藕 tego panelu – Tw贸j kursor zmieni si臋 w bia艂膮 podw贸jn膮 strza艂k臋. Nast臋pnie przeci膮gnij kraw臋d藕 do momentu uzyskania preferowanej szeroko艣ci.

4.Properties panel to obszar znajduj膮cy si臋 po prawej stronie ekranu, kt贸ry sk艂ada si臋 z trzech zak艂adek: Design, Prototype, Inspect.

a) Design – w tym miejscu mo偶esz przegl膮da膰 i dostosowa膰 w艂a艣ciwo艣ci wszystkich warstw: ramek, kszta艂t贸w i tekst贸w. Szczeg贸艂owy opis zak艂adki Design znajdziesz w 4 rozdziale 鈥淭worzenie i modyfikowanie kszta艂t贸w鈥�.

b) Prototype – w tym miejscu znajdziesz ustawienia prototypu i po艂膮cze艅 mi臋dzy elementami w pliku.

c) Inspect – w tej zak艂adce mo偶esz zobaczy膰 jak wyrazi膰 poszczeg贸lne obiekty swojego projektu w postaci kodu. Dost臋pne s膮 formaty: CSS, Android i iOS.听

Zadanie 2.2. Zapoznaj si臋 z interfejsem pliku w Figmie. Upewnij si臋, 偶e znasz ju偶 nazwy g艂贸wnych element贸w interfejsu, aby 艂atwiej by艂o Ci porusza膰 si臋 po pliku podczas wykonywania zada艅 praktycznych.听

Znasz ju偶 Figma interface, sprawd藕 kolejny wpis i kontynuuj zg艂臋bianie tej aplikacji: Podstawowe ustawienia projektu w Figmie

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Podstawowe ustawienia projektu w Figmie – om贸wione zagadnienia:

1. Frames
2. Layout grid
3. Rulers

Frames

Pierwszym krokiem w ka偶dym projekcie powinien by膰 wyb贸r rozmiaru ekranu, na kt贸ry b臋dziesz projektowa膰. Do tego s艂u偶y narz臋dzie Frames, kt贸re znajdziesz w Toolbar.听

Po aktywowaniu narz臋dzia Frames masz kilka mo偶liwo艣ci stworzenia ramki:

• mo偶esz klikn膮膰 w obszar Canvas, aby utworzy膰 ramk臋 o wymiarach 100×100 px

• mo偶esz klikn膮膰 w obszar Canvas, przytrzyma膰 lewy przycisk myszy i przeci膮gn膮膰, aby utworzy膰 ramk臋 o niestandardowych wymiarach

• mo偶esz te偶 wybra膰 rozmiar ramki spo艣r贸d gotowych ramek, przygotowanych dla popularnych urz膮dze艅, kt贸re wy艣wietl膮 si臋 w Properties panel.

Po dodaniu i zaznaczeniu ramki masz dost臋p do jej w艂a艣ciwo艣ci w Properties panel.

a) Position of the Canvas (X and Y) – w tym miejscu mo偶esz okre艣li膰 po艂o偶enie frame w Canvas na osi poziomej X i pionowej Y

b) Dimensions of the Object (Width and Height) – w tym miejscu mo偶esz zmieni膰 rozmiar frame.听

c) Constrain proportions – pozwala zachowa膰 proporcje frame podczas zmiany rozmiaru. Dzi臋ki temu mo偶esz zmieni膰 wysoko艣膰 lub szeroko艣膰 frame, a drugi parametr dostosuje si臋 automatycznie.听

d) Resize to fit – ta funkcja powoduje dostosowanie rozmiar贸w ramki do jej zawarto艣ci.

奥蝉办补锄贸飞办补: poza opisanymi wy偶ej sposobami zmiany wielko艣ci ramki mo偶esz te偶 zrobi膰 to r臋cznie: z艂ap kraw臋d藕 lub r贸g ramki (kursor zmieni si臋 w czarn膮 podw贸jn膮 strza艂k臋), nast臋pnie przeci膮gnij do uzyskania preferowanego rozmiaru.

e) Portrait and Landscape – tutaj mo偶esz zmieni膰 orientacj臋 swojej ramki na pionow膮 lub poziom膮

f) Rotation 鈥� mo偶esz ustawi膰 pochylenie ramki

g) Corner Radius – dzi臋ki tej funkcji mo偶esz zaokr膮gli膰 rogi ramki,

h) Independent corners– po zaznaczeniu tej opcji mo偶esz ustali膰 indywidualn膮 warto艣膰 zaokr膮glenia dla ka偶dego rogu ramki.

i) Clip Content – zaznaczenie tej opcji spowoduje, 偶e obiekty, kt贸re wychodz膮 poza granice ramki b臋d膮 niewidoczne听

j) Auto Layout– ta funkcja pozwala tworzy膰 responsywne ramki

k) Layout Grids– ta funkcja pomaga w tworzeniu uporz膮dkowanej struktury interfejsu u偶ytkownika.

l) Fill – w tym miejscu mo偶esz ustawi膰 wype艂nienie ramki kolorem, gradientem lub zdj臋ciem

m) Stroke – mo偶esz doda膰 i dostosowa膰 obramowanie ramki. Pod ikon膮 three dots menu znajduje si臋 Advanced stroke settings.

n) Effects – tutaj mo偶esz doda膰 cie艅 lub rozmycie do ramki. Aby dostosowa膰 warto艣ci efekt贸w kliknij Effect settings, kt贸re znajduj膮 si臋 pod przyciskiem z ikon膮 s艂o艅ca.听

o) Export – w tym miejscu mo偶esz wyeksportowa膰 wybran膮 ramk臋, w wybranym formacie: PNG, JPG, SVG i PDF.听

Nad ka偶d膮 ramk膮 w Canvas wy艣wietla si臋 jej nazwa – aby j膮 zmieni膰, mo偶esz klikn膮膰 w nazw臋 ramki dwa razy.听Nazwy ramek mo偶esz zmienia膰 te偶 w Layers panel – tak, jak nazwy innych warstw.听Ramki mo偶esz kopiowa膰 wraz z zawarto艣ci膮 i wkleja膰 w Canvas dowoln膮 liczb臋 razy.

Znasz ju偶 ustawienia projektu w Figmie, wi臋c przechodzimy do zada艅 technicznych. Sprawd藕 jak sobie poradzisz!

Zadanie 3.1 Rozpocznij prac臋 na projektem od wyboru odpowiedniej wielko艣膰 ramki.

W tym tutorialu zaprojektujemy mobiln膮 aplikacj臋 e-commerce, wi臋c wybierzmy jedn膮 z najpopularniejszych rozdzielczo艣ci stosowanych obecnie w smartfonach – 360×640 px.听

Zaprojektujemy razem trzy widoki:

• ekran logowania (Login),听
• stron臋 g艂贸wn膮 (Home)听
• stron臋 produktu (Product).

Po dodaniu ramki od razu powiel j膮 i ka偶dy ekran nazwij odpowiednio, aby zachowa膰 porz膮dek w pliku.听

Layout grid

Grid to system pionowych i poziomych linii (kolumn i wierszy), kt贸re wprowadzaj膮 struktur臋 i pomagaj膮 w uporz膮dkowaniu tre艣ci interfejsu – zar贸wno obraz贸w, jak i tekst贸w.听 Odpowiednio ustawiony grid z pewno艣ci膮 u艂atwi Ci prac臋 i przy艣pieszy ca艂y proces projektowania. Osi膮gniesz wra偶enie 艂adu i sp贸jno艣ci, co wp艂ywa na estetyk臋 i u偶yteczno艣膰 interfejsu.听 S膮 dwa sposoby na ustalenie uk艂adu siatki w projekcie:

1. mo偶esz w艂膮czy膰 widok siatki jeszcze przed rozpocz臋ciem projektowania i skorzysta膰 z gotowych uk艂ad贸w siatek (je艣li znajduj膮 si臋 takie w twojej bibliotece) lub stworzy膰 w艂asn膮;
2. mo偶esz te偶 najpierw zacz膮膰 tworzy膰 projekt, a siatk臋 ustali膰 p贸藕niej na bazie zaprojektowanych element贸w.

奥蝉办补锄贸飞办补: Je艣li jeste艣 pocz膮tkuj膮cym projektantem, polecam rozpoczynanie projektu od ustalenia siatki wg. ustawienia projektu w Figmie, o kt贸rym pisali艣my powy偶ej. Nie ma trudniejszego punktu startu ni偶 zupe艂nie pusty obszar roboczy.听

Layout grid mo偶esz doda膰 do aktywnej ramki w Properties panel. Do wyboru s膮 trzy opcje: grid, columns, row. Mo偶esz doda膰 kilka opcji jednocze艣nie.

W艂a艣ciwo艣ci ka偶dej siatki mo偶esz dostosowa膰 w panelu Layout grid settings.

W ka偶dej chwili mo偶esz w艂膮czy膰 lub wy艂膮czy膰 widoczno艣膰 siatki klikaj膮c ikon臋 Eye.

奥蝉办补锄贸飞办补: Je艣li nie wiesz jaki Layout grid wybra膰 w swoim projekcie, Figma Community zn贸w przychodzi z pomoc膮 – mo偶esz u偶y膰 specjalnej wtyczki 鈥淕rid System鈥�, kt贸ra zrobi to za Ciebie.

Zadanie 3.2. Ustaw layout grid w swoim projekcie. Na potrzeby tego projektu wybrali艣my opcj臋 Columns i ustawili艣my nast臋puj膮ce warto艣ci:

• Count 2 (liczba kolumn)听
• Margin 20 (odleg艂o艣膰 kolumn od kraw臋dzi ekranu)
• Gutter 30 (odst臋p pomi臋dzy kolumnami)

Rulers

Kolejnym przydatnym narz臋dziem, kt贸re pomo偶e Ci wyr贸wna膰 elementy w pliku, a tym samym zachowa膰 porz膮dek i estetyk臋, s膮 Rulers.

Aby w艂膮czy膰 widok linijek, kliknij w Main menu, nast臋pnie View i zaznacz opcj臋 Rulers.

Linijki widoczne s膮 u g贸ry i z lewej strony Canvas. Dzi臋ki tej funkcji mo偶esz tworzy膰 pionowe i poziome linie pomocnicze – kliknij i przytrzymaj wybran膮 linijk臋, a nast臋pnie przesu艅 kursor na obszar Canvas. Pojawi si臋 cienka czerwona linia, kt贸r膮 mo偶esz przesuwa膰.Mo偶esz stworzy膰 dowoln膮 liczb臋 linii pomocniczych.听Niepotrzebne linie mo偶esz 艂atwo usun膮膰 – wystarczy zaznaczy膰 lini臋 (zaznaczona linia zmieni kolor na niebieski), a nast臋pnie nacisn膮膰 przycisk Delete.

Zadanie 3.3. Po膰wicz dodawanie linijek. Przydadz膮 Ci si臋 p贸藕niej do wyr贸wnywania element贸w.听

Uda艂o si臋 zrobi膰 wszystkie zadania z zakresu ustawienia projektu w Figmie? Je艣li tak, sprawd藕 kolejny wpis: Tworzenie kszta艂t贸w i ich modyfikacja

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶:

Intro to Figma – om贸wione zagadnienia:

1. Do czego s艂u偶y Figma?
2. Dla kogo?
3. Jak dzia艂a?
4. Figma a Sketch i AdobeXD
5. Jak zacz膮膰? Browser vs. Desktop App

Do czego s艂u偶y Figma?

Figma jest kompleksowym narz臋dziem s艂u偶膮cym do projektowania interfejs贸w u偶ytkownika,听 kt贸re jest wykorzystywane przez zespo艂y na ka偶dym etapie procesu projektowania. Ju偶 w planie darmowym oferuje swoim u偶ytkownikom wszystkie niezb臋dne funkcje, pozwalaj膮ce na swobodne tworzenie. Mo偶na wi臋c bez wahania stwierdzi膰, 偶e jest doskona艂ym narz臋dziem do nauki dla pocz膮tkuj膮cych projektant贸w.听

Dla kogo?

Skierowana jest do os贸b zajmuj膮cych si臋 szeroko poj臋tym projektowaniem graficznym i produkcj膮 oprogramowania (projektant贸w UX i UI, webdeveloper贸w), ale r贸wnie偶 product owner贸w czy manager贸w.

Jest idealnym rozwi膮zaniem dla zespo艂贸w, poniewa偶 ma wiele funkcji umo偶liwiaj膮cych sprawn膮 wsp贸艂prac臋 podczas tworzenia w czasie rzeczywistym. W skr贸cie: Ty i cz艂onkowie Twojego zespo艂u mo偶ecie jednocze艣nie zalogowa膰 si臋 do projektu i wprowadza膰 w nim zmiany oraz obserwowa膰 ruchy innych u偶ytkownik贸w.

Jak dzia艂a?

Figma jest ca艂kowicie oparta na przegl膮darce. Oznacza to, 偶e mo偶e dzia艂a膰 na komputerach z systemem iOS, Windows, Linux, a nawet na Chromebookach. Mo偶esz zalogowa膰 si臋 z dowolnego urz膮dzenia i zawsze masz dost臋p do swojego projektu, bez konieczno艣ci instalowania oprogramowania i kupowania wielu licencji. Nie musisz te偶 martwi膰 si臋 o utracone post臋py, poniewa偶 wszystko zapisywane jest automatycznie.

Wspania艂e jest r贸wnie偶 to, 偶e do korzystania z Figmy nie potrzebujesz najlepszej karty graficznej i du偶ej pami臋ci RAM. Jest to dobrze zoptymalizowane narz臋dzie, wi臋c nawet na s艂abszym sprz臋cie mo偶liwa jest praca nad obszernymi projektami, bez zawieszania si臋 urz膮dzenia. Na pewno spodoba Ci si臋 szybko艣膰 dzia艂ania programu i przejrzysto艣膰 interfejsu.

Figma a Sketch i AdobeXD

W ostatnich latach zyskuje uznanie coraz wi臋kszej liczby u偶ytkownik贸w i dogania w rywalizacji najpopularniejsze narz臋dzia dost臋pne na rynku: Adobe XD i Sketch. Je艣li zastanawiasz si臋, kt贸re narz臋dzie b臋dzie najlepsze dla Ciebie, zobacz poni偶sz膮 tabel臋 z por贸wnaniem tych opcji. Pod uwag臋 zosta艂y wzi臋te najwa偶niejsze cechy aplikacji, takie jak: platforma na kt贸rej dzia艂a, system operacyjny, mo偶liwo艣膰 wsp贸艂pracy z zespo艂em, wtyczki, ceny oraz oferowane wsparcie w nauce obs艂ugi. Ka偶da z aplikacji posiada plusy i minusy u偶ytkowania, dlatego na p贸藕niejszym etapie pracy warto testowa膰, kt贸ra najbardziej nam opowiada.

Ostateczna ocena rywalizacji mi臋dzy aplikacjami Figma, Adobe XD i Sketch zawsze sprowadza si臋 do osobistych preferencji i potrzeb projektanta. Ka偶da z tych aplikacji ma funkcje umo偶liwiaj膮ce efektywne projektowanie interfejs贸w. Jednak wed艂ug powszechnej opinii jest ona najlepszym wyborem dla pocz膮tkuj膮cych projektant贸w – ze wzgl臋du na darmow膮 wersj臋, dost臋pno艣膰 materia艂贸w do nauki oraz mo偶liwo艣膰 pracy na dowolnym urz膮dzeniu.听

Jak zacz膮膰? Browser vs. Desktop App

Aby rozpocz膮膰 korzystanie z Figmy wystarczy wej艣膰 na stron臋 i zarejestrowa膰 si臋. Po zalogowaniu si臋, od razu mo偶esz zacz膮膰 prac臋 nad swoim projektem.

Poza wersj膮 przegl膮darkow膮, dost臋pna jest r贸wnie偶 aplikacja, kt贸r膮 mo偶esz zainstalowa膰 na dowolnym urz膮dzeniu. Musisz jednak pami臋ta膰, 偶e w obu przypadkach b臋dziesz potrzebowa膰 po艂膮czenia z internetem, aby m贸c pracowa膰. Mi臋dzy wersj膮 przegl膮darkow膮, a aplikacj膮 nie ma 偶adnych funkcjonalnych r贸偶nic. Zdecyduj wed艂ug swoich preferencji, w jaki spos贸b chcesz z niej korzysta膰.听

Aby pobra膰 Figma Desktop App wejd藕 na stron臋 i wybierz system operacyjny Twojego urz膮dzenia.

Zadanie 1. Przygotuj si臋 do pracy nad swoj膮 aplikacj膮. Wejd藕 na stron臋 i zarejestruj si臋. Dzi臋ki temu po przeczytaniu kolejnego artyku艂u b臋dziesz m贸g艂 od razu przej艣膰 do dzia艂ania.听

Sprawd藕 kolejny wpis z tej serii: Figma interface 鈥� podstawowe informacje

Je艣li podobaj膮 Ci si臋 tre艣ci, kt贸re tworzymy, sprawd藕 r贸wnie偶: