figma – tworzenie nowego projektu

Tworzenie nowego projektu

Na początku możesz wybrać czy tworzysz:

• FigJam – idealna do brainstorming, współpracy czy obrazowania koncepcji
• Design – tworzenie projektów web, app
• Slides – tworzenie prezentacji

Stwórz nowy projekt lub otwórz już istniejący.

W nim tworzymy nowy File poprzez przycisk Create new i tu wybieramy Design.

Zmiana nazwy File poprzez podwójne kliknięcie w Untitled i wpisanie własnej nazwy.

Kiedy masz zewnętrzny plik, przekazany przez kogoś, zamieszczasz go poprzez opcje Import – widoczną pod opcjami Create new.

Pages

Dodajemy je i zarządzamy nimi w widoku projektu, w panelu po lewej stronie, korzystając z zakładki layers. Pages to czysta canvas.

Zmiana nazwy Page poprzez podwójne kliknięcie w nazwę i zmienienie jej na własna.

Canvas & frames

Cały obszar widoczny w pliku design nazwany jest canvas, na nim będziesz umieszczać frames – czyli obszary danego widoku, na których zamieszczasz tekst, obrazki i inne elementy projektu.

Tworzenie frame

poprzez:

• ikonę () na górze i wybranie z prawej strony z listy wielkości urządzenia na jakie projektujemy design, lub nakreślenie obszaru bezpośrednio na canvas
• lub używając przycisku F z klawiatury

Nawet dla już stworzonego frame możesz zmienić rozmiar, po zaznaczeniu albo poprzez ręczne wpisanie wartości width (W) i height (H) lub wybranie urządzenia z listy.

Nadanie, zmiana nazwy

Kiedy wybieramy z listy, nazwa frame jest taka jak urządzenia, aby ją zmienić lub nadać nazwę czystemu frame klikamy ją podwójnie i wprowadzamy nową.

Panel po lewej stronie

wyświetla całe drzewo frames, layers i elementów w nich dodanych, pozwala na ich zaznaczanie, zmianę nazwy, przesuwanie, grupowanie czy usuwanie.

Pamiętaj!: zawsze używaj Frames a nie shapes do reprezentacji widoków w Figma.

Panel po prawej stronie

Panel properties – własności. Wyświetla te własności jaki element jest kliknięty, jeśli klikniesz na canva w panelu Properties możesz zmienić np. jej kolor.

Constrains

pozwala „przyczepić” element do danej krawędzi ekranu tak by wiadomo było jak ma się zachować kiedy ekran zmniejsza się lub zwiększa.

Tekst

nagłówki ustawiamy na auto width – the text box is always going to adjust to anything that I add in here in width

content text usatwiamy na auto height – wtedy sekcja tekstu dostosowuje się do tego ile go wprowadzimy
Line-height ustawiony na auto odzwierciedla wartość 1.5

Różnica między frame a group

Frame ma opcję clip content, która pozwala na przycięcie widoczności elementów w Frame do jego obszaru.

Duplikacja & wklejanie

• wklejenie w tą sama pozycję – wybierz element cmd+C następnie wybierz frame i cmd+V, czyli wklei nam element w nowym frame w dokładnie takiej samej pozycji w jakiej był w poprzednim miejscu, od góry frame i lewej strony frame, w ten sposób możemy tez zaznaczyć i skopiować więcej niż jeden element
• wielokrotne wklejenie – identycznie jak poprzednio tylko nie zaznaczamy jednego frame tylko kilka
• wklejenie 'tu’ w konkretne miejsce – kopiujemy identycznie poprzez cmd+C, ale aby wkleić w konkretnym miejscu, klikamy prawym przyciskiem myszy i z menu kontekstowego wybieramy Wklej tutaj – Past here
• wklej by zastąpić – wybieramy z menu kontekstowego, wklej by zastąpić / past to replace shift + cmd + R, tu również możesz zaznaczyć wiele elementów (zaznaczenie z Shift) i je wszystkie zastąpić skopiowanym
• duplikuj – zaznaczasz element (shift) klikasz alt i przeciągasz duplikat w nowe miejsce, aby duplikować element z tą samą odległości użyj skrótu cmd+D