Composer
Layout i design, strony, klatki, komponenty i prawdziwa typografia, z widokiem prototypu i widokiem kodu.
W jednym zdaniu#
Nieskończone płótno do układania rzeczy: dokumenty wielostronicowe, projekty ekranów i layouty, z kontrolkami typografii, które wykraczają poza "wybierz czcionkę i rozmiar".
Układ#
| Menu bar | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Toolbar | cofnij/ponów, select, frame, shapes, line, arrow, pen, type, hand: potem Margins, Guides, Baseline i licznik plansz |
| Left | Pages, potem Layers · Assets · Components · Frames, potem lista kategorii warstw |
| Centre | płótno, z zoomem i wskaźnikiem strony |
| Right | Design · Prototype · Code |
| Status bar | plansze, obiekty, zaznaczenie, aktywne narzędzie, zoom |
Co tu robisz#
Strony i klatki#
Dokument ma pages (strony); strona przechowuje frames (klatki, czyli plansze). To różnica względem Vectra, która rysuje na jednej planszy naraz: Composer jest do zestawu ekranów albo zestawu rozkładówek.
Warstwy, zasoby i komponenty#
Cztery zakładki nad tym samym dokumentem. Components to elementy wielokrotnego użytku: zdefiniuj raz, umieść wiele razy, edytuj definicję, a każda instancja podąży za nią. Assets to to, co dokument ściąga z zewnątrz. Lista warstw jest pogrupowana według rodzaju (Text, Images, Graphics), co przegląda się szybciej niż płaska lista na zapełnionej stronie.
Precyzyjny layout#
X, Y, W, H i promień narożnika, plus align and distribute. Margins, Guides i siatka Baseline to przełączniki na pasku narzędzi: to siatka baseline sprawia, że tekst wielokolumnowy wyrównuje się na całej rozkładówce.
Typografia#
Ta część zapewnia Composer jego miejsce:
| Font, size, leading, tracking | jako liczby, nie jako suwak |
| Alignment | pozioma, oraz pionowa wewnątrz ramki: góra, środek, dół |
| Weight i case | łącznie z "as typed" |
| Paragraph spacing, listy | punktowane albo numerowane |
| Resize mode | Fixed size, Auto width, Auto height: czy ramka podąża za tekstem, czy tekst zawija się do ramki |
| Text threading | połącz jedną ramkę tekstową z następną, żeby nadmiar tekstu płynął dalej |
| Text styles | nazwane, wielokrotnego użytku |
Prototype i code#
Zakładka Prototype łączy ekrany w klikalny przepływ. Zakładka Code pokazuje projekt jako kod.
Zmienne i style#
Dwa panele, które zamieniają dokument w system, a nie zbiór stron:
- Variables: nazwane wartości (kolor, liczba, ciąg znaków) używane w całym dokumencie, z variable picker wszędzie tam, gdzie ustawia się wartość. Zmień zmienną, a każde jej użycie podąży za nią.
- Styles: nazwane style tekstu i obiektów.
- Fills: edytor wypełnień, łącznie z gradientami i obrazami.
Razem z Components to one sprawiają, że projekt jest sterowany tokenami: przestrzeń robocza DA w Vectra potrafi eksportować tokeny projektowe, a Composer to miejsce, gdzie są używane.
Prototypowanie#
Prototyp to tutaj graf nad klatkami, które już narysowałeś. Każda interakcja to cztery rzeczy: trigger (kliknięcie albo hover), klatka target, transition i duration. Przeciągnij od uchwytu połączenia klatki do klatki, do której ma prowadzić.
Prototype Mode zamienia płótno w widok przepływu; Preview Player odtwarza go tak, jak zobaczyłby to czytelnik, z możliwością restartu. Nie ma osobnego dokumentu do prototypowania, klatki są ekranami.
Dev Mode: oddanie projektu kodowi#
Zakładka Inspect to druga połowa narzędzia projektowego: odczytuje zaznaczenie i generuje dla niego kod, na trzech zakładkach platform.
| Zakładka | Wynik |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Obok wygenerowanego kodu zgłasza realne liczby, o które pyta deweloper: rozmiar, promień, rotację, przezroczystość, wypełnienie, obrys, efekty, czcionkę i jej rozmiar oraz odstępy mierzone do rodzica i do rodzeństwa: dwa dystanse, które decydują o layoucie. Kod kopiuje się do schowka albo pobiera.
Eksportowanie#
Export w Composer to lista ustawień, nie pojedynczy wybór: dodaj kilka, wybierz, które uruchomić, a każde wybrane ustawienie wyprodukuje własny plik w jednym przebiegu. Każde ustawienie niesie:
| Format i quality | osobno dla każdego ustawienia, więc PNG i JPG mogą wyjść razem |
| Scale i DPI | @2x i rozdzielczość drukarska |
| CMYK (print) | dla wersji przeznaczonej do druku |
| Naming | prefiks i sufiks, project- i @2x |
| Background | łącznie z transparent, tam gdzie format na to pozwala |
Dwa szczegóły, które panel mówi wprost, zamiast zostawiać ci ich odkrycie:
- Tylko PNG i SVG niosą przezroczystość. Wybranie przezroczystego tła w JPG to ustawienie bez żadnego efektu, i panel mówi to wprost.
- Źródłem eksportu jest albo node, albo slice: Create Slice robi z bieżącego zaznaczenia region eksportu, dzięki czemu eksportujesz część klatki, nie tnąc jej na kawałki.
Presets zapisują cały zestaw ustawień, więc konfigurację eksportu dla projektu pisze się raz.
Pliki, które czyta i zapisuje#
| Native format | .comp |
| Exports | .png · .jpg · .svg, w dowolnej skali lub DPI, w RGB lub CMYK |
| Generates | CSS · SwiftUI · Jetpack Compose |
Przekazywanie pracy do innych studiów#
Produces kompozycję oraz aktywną planszę wyrenderowaną jako obraz. Accepts pixel art, grafikę wektorową i obrazy.
Praca z kimś innym#
Composer synchronizuje się jako document: cały stan, z debounce, plus wysyłane akcje. Gdy dwie osoby edytują tę samą stronę w tym samym momencie, wygrywa jedna z nich; pracujcie na różnych stronach.
Ograniczenia i częste problemy#
- Auto width i auto height kłócą się ze stałymi layoutami. Ramka ustawiona na auto width nie będzie się zawijać; jeśli tekst wychodzi poza klatkę, to zwykle właśnie dlatego.
- Text threading nie jest automatyczne. Ramka pokazuje Not linked, dopóki jej nie połączysz.
- Components propagują się z definicji, nie z instancji. Edycja instancji nie aktualizuje pozostałych.