Projektowanie i kod

Do czego służy. Do budowania aplikacji zgodnej z projektem, który powstał w Figma. Setherion renderuje ramkę, odczytuje jej układ, kolory, typografię i odstępy i buduje na tej podstawie.

Połącz. Naciśnij Connect Figma na stronie Connectors, zaloguj się w Figma i wróć. Nie ma kluczy do kopiowania. Dostęp jest tylko do odczytu: Setherion nigdy nie może zmienić twoich plików. Jest używany podczas budowania i nigdy nie jest częścią aplikacji, którą publikujesz. Figma nie pokazuje żadnych opłat za użycie ze strony Setherion.

Użyj. W edytorze naciśnij +, potem Design, potem Import from Figma. W panelu jest pod +, w Import a design, gdzie oferowana jest też Canva. W Figma kliknij prawym przyciskiem ramkę, którą chcesz, wybierz Copy link to selection, wklej link i naciśnij Import frame. Ramka jest dołączana do twojej wiadomości razem z jej opisem i dokładnymi kolorami, czcionkami i odstępami, a aplikacja jest przebudowywana tak, by do niej pasowała.

Poproś. „Przebuduj stronę główną tak, żeby pasowała do tej ramki.” „Użyj kolorów i czcionek z mojego projektu w Figma.”

Warto wiedzieć. Link musi wskazywać projekt, na przykład figma.com/design/KEY?node-id=1-234. Pasek adresu twojej listy plików nim nie jest, a importer o tym mówi. Jeśli link zostanie odrzucony, połączone konto Figma musi mieć możliwość otwarcia tego pliku. Jeśli Figma przestaje przyjmować połączenie, import każe ci połączyć się ponownie.

Do czego służy. Do wprowadzenia projektu z Canva (menu, ulotki, banera) do aplikacji jako obrazów do umieszczenia. To grafika do położenia na stronie, a nie układ do przebudowania.

Połącz. Naciśnij Connect Canva, zaloguj się w Canva i wróć. Nie ma kluczy do kopiowania. Setherion odczytuje twoje projekty i eksportuje je tylko wtedy, gdy któryś importujesz, i nic w Canva nie jest zmieniane.

Import z Canva. W edytorze naciśnij +, potem Design, potem Import from Canva. W panelu jest pod +, potem Import a design. Otwórz projekt w Canva, skopiuj adres z przeglądarki (zawiera /design/, a krótki adres canva.link nie wystarczy), wklej go i naciśnij Import design. Projekt musi być jednym z twoich albo udostępniony tobie.

Poproś. „Umieść właśnie zaimportowane menu na stronie Menu.” „Użyj banera jako głównej grafiki strony głównej.”

Ograniczenia.

• Pierwsze trzy strony projektu trafiają do rozmowy jako obrazy.
• Są eksportowane raz, podczas budowania, a potem hostowane razem z innymi obrazami aplikacji. Linki eksportu z Canva przestają działać po dobie, dlatego aplikacja nigdy nie pyta Canva, gdy działa.
• Canva Free nie potrafi mocno powiększyć projektu ponad jego własny rozmiar. Gdy Canva odrzuca duży eksport, Setherion prosi ponownie o rozmiar samego projektu.
• Canva ogranicza, ile eksportów jedna osoba może wykonać w kilka minut. Jeśli tak napisze, poczekaj i spróbuj ponownie.

Do czego służy. Do zabrania kodu ze sobą i wprowadzenia kodu do środka. Eksport umieszcza aplikację w twoim repozytorium jako zwykły projekt Vite i React. Import przebudowuje aplikację, którą już masz w repozytorium.

Połącz. Naciśnij Connect GitHub, zaloguj się i zatwierdź albo użyj Connect GitHub w oknie eksportu. Dostęp jest używany, gdy prosisz o wysłanie kodu, i nigdy nie jest częścią aplikacji, którą publikujesz. Obejmuje także repozytoria prywatne.

Eksport. Otwórz menu Publish w edytorze i wybierz Export to GitHub. Nazwij repozytorium, wybierz, czy ma być Private repository (domyślnie), i naciśnij przycisk. Jeśli repozytorium nie istnieje, zostanie utworzone. Eksportuj ponownie w dowolnej chwili, żeby zaktualizować je najnowszymi zmianami.

Import. W panelu naciśnij +, potem Import an app, potem GitHub. Połącz tam GitHub, żeby zobaczyć własne repozytoria, także prywatne, albo wklej adres publicznego. Działa każda aplikacja webowa: React, Next.js, Vue albo zwykły HTML. Przy odczycie liczy się to, co aplikacja robi, a nie to, jak została zbudowana. Pliki z sekretami i klucze są pomijane. Zobacz Import aplikacji.

Ograniczenia. Eksport jest częścią płatnych planów: w planie Free przycisk prosi o przejście na wyższy. Import kosztuje nową aplikację plus odczyt kodu, a twój pierwszy import jest darmowy: zobacz Plany i kredyty. Rekordy z bazy danych nie przechodzą przy imporcie, tylko jej struktura.

Warto wiedzieć. Eksport to przycisk w Publish, a nie prośba wpisywana w rozmowie.

Do czego służy. To samo co eksport do GitHub, tylko dla GitLab: twój kod w twoim repozytorium.

Połącz. Naciśnij Connect GitLab, zaloguj się i zatwierdź albo użyj Connect GitLab w oknie eksportu. Jest używany, gdy wysyłasz kod, i nigdy nie staje się częścią aplikacji, którą publikujesz.

Eksport. Otwórz menu Publish w edytorze i wybierz Export to GitLab. Nazwij repozytorium, wybierz Private repository (domyślnie) albo nie i naciśnij Export to GitLab. Eksportuj ponownie, żeby zaktualizować. To działający projekt Vite i React.

Ograniczenia. Eksport jest częścią płatnych planów, tak jak w przypadku GitHub. GitLab nie ma importu: żeby wprowadzić aplikację z projektu GitLab, pobierz ją jako ZIP i użyj importu ZIP opisanego w Import aplikacji.