Czy warto robić DESIGN SYSTEM?

[@projektowe]

Chcesz dołączyć do rozwijającej się społeczności designowych wariatów?
Kółko Projekowe na Discordzie to nowość, której nie chcesz ominąć!
Klikaj i chodź: discord.gg/NnZAswTGFB

[@CamVanZek]

Propsy ziomek Nie przestawaj mówić. Dziękuję.

[@LosArusos90]

Czegoś takiego nie ma i ciągle tego brakuje ;)
Jestem samoukiem od roku na swoim i każda taka wskazówka jest na wagę złota!
Także "każdy wie co i kogo" (YT cenzuruje gwiazdki XD) i pozdro!

[@projektowe]

Zawsze i wszędzie. :D Pozdro i trzym się!

[@planetthunter]

A się zaśmiałam kilka razy!

[@projektowe]

Co tak mało?

[@planetthunter]

@@projektowe ale za to głośno i rubasznie! ;0

[@ut2Derek]

Wyrównaj kanape do pixel grida

O rany.... zapytałem Ciebie pod poprzednim filmem o to ...a tutaj cały materiał o Atomic Design. Super! No to chyba mamy do pogadania :)
Określanie kolorów czy typo jako atomów jest błędne w moim mniemaniu. W momencie projektowania atomu, czyli najmniejszego możliwego komponentu powstaje pytanie: czy reużywalna zmienna/zestaw zmiennych , z których korzystamy w wielu komponentach, ale nie mają swojej warstwy prezentacji (w rozumieniu developera: zmienna bez html/css pokazującego jej zastosowanie) powinna być faktycznie atomem? A może czymś przed. Niezależnie od tego czy zastosujemy jakiś preprocesor css czy weźmiemy np takiego Tailwinda (czy nawet w Twitterowym bootstrapie) jest plik konfiguracyjny definiujący zmienne. Powstaje więc kolejny problem - nie chcemy tam trzymać wszystkich możliwych zmiennych dla wszystkich możliwych komponentów (widać to pięknie właśnie w przypadku bootstrapa gdzie jest potężny plik ze zmiennymi).... i tak dochodzimy do tego że przed atomami są jeszcze ...kwarki! Kwarki zawierają jedynie definicję i wartość zmiennej. Dobrze zrobić sobie kwarki typu colors, sizes, paddings, etc. Wiesz gdzie później tego szukać. A przenosząc system przecież nie musisz skorzystać ze wszystkiego.
W zeszłym roku zbudowałem rozwiązanie dla preprocesora css - sass, które to wykorzystuje podejście Atomic Design, rozwiązuje powyższe zagwózdki i nawet liczy ile razy dany element/zmienna została wykorzystana w systemie (jak coś ma 0 użycie to jest do usunięcia). Można powiedzieć że poprawiłem to co zaprojektował od strony technicznej IBM dla swojego Carbona. Mam też zbudowany już pokaźny zbiór komponentów w tym podejściu we Vue/Tailwind. I.... nie wyobrażam sobie teraz pracy inaczej. Nawet więcej... niebezpieczne to jest, bo ciężko się robi "starymi" technikami.
Bardzo fajnie że zrobiłeś o tym odcinek. Dzięki!

[@projektowe]

Radku (jeśli mogę się tak zwracać), dziękuję ci pięknie za ten komentarz. Bardzo trafna uwaga nt. warstwy prezentacji. Zwróć jednak uwagę, że zaznaczyłem, że mało istotne jest to, którym terminem co określimy, a chodzi bardziej o załapanie modelu hierarchii i struktury. Umówmy się - ty już to kumasz, pewnie nawet lepiej ode mnie, biorąc pod uwagę doświadczenie z kodowaniem. :) Chciałbym jednak żeby ten film służył za wprowadzenie, w przeciwnym wypadku musiałbym gadać pewnie z 40 minut.
Swoją drogą sięgasz jeszcze po narzędzia do projektowania, czy od razu siadasz do kodu? Pozdro.

@@projektowe jasne że możesz po imieniu ;) Jest dokładnie tak jak napisałeś i też powiedziałeś w firmie - bardzo fajnie jest gdy ludzie zaczynają łapać jak pewne rzeczy robić, bo to zmienia ich sposób myślenia, a ja tu tylko dorzuciłem dwoje 5 groszy o dodatkowej technice (bo przecież nie ma tego w podstawie) - może to oszczędzi komuś trochę czasu.
Ja zaczynałem kilkanaście lat temu robiąc rastry, wektory, od składania książki po oklejanie autobusu. Później poszedłem już tylko w programowanie (nie da i nie powinno się wszystkiego robić) więc dziś raczej jestem odbiorcą różnych contentu powstającego Figmach, czy innych Zeppelinach ;) (o ile w ogóle można tak powiedzieć o kimś kto specjalizuje się na froncie właśnie w design systemach, UX'ie, etc). Mam swoją firmę w której realizuje swój własny autorski projekt generatora komponentów i design systemu. Dlatego ten temat mnie tak kręci i mordka mi się uśmiecha jak ktoś robi takie fajne materiały jak Twój.

[@projektowe]

Bomba, złapmy się gdzieś na LI, chętnie spojrzę na twój produkt.

Super, wychodzimy dopiero w listopadzie z wersją do pokazania (2 iteracja) więc na pewno się podzielę i będę wdzięczny za feedback. A póki co dołączyłem na Discordzie :)

[@katarzynam.5282]

buziaki subskrypcja już jest buziaki komentarz już też buziaki lajk buziaki pa

[@projektowe]

Tak trzeba żyć, buziaqui.

[@katarzynam.5282]

@@projektowe w ogóle spoko podejście szerzysz, takie bardziej życiowo-biznesowe, mniej idealistyczne. Nie rozpływasz się, że design systemy są zawsze oh i ah i dobra praktyka, tylko zaznaczasz że trzeba czasem procesy optymalizować i zejść na ziemię, bo nie żyjemy w designerskiej bańce. Duża okejka.

[@lordkratos4747]

zobaczylem ten fragment jak łatwo zmieniałes symbole przy buttonie w figmie i zachęciło mnie to do ogarnięcia komponentów, do tej pory robilem wszystko ręcznie ale może polecasz jakiś material do opanowania komponentów w figmie?

[@projektowe]

Jak już zrobię swój kurs to polecę swój kurs, a teraz polecam oficjalny kanał Figmy na YT.

[@avarogue]

Hmm a inne podejście niż atomic design?

[@ten-jeden]

Cześć, powiesz coś więcej o zmiennych w typografii? Chociaż linka, żeby więcej o tym poczytać.

[@projektowe]

Zacznij tutaj: foxland.fi/naming-typography-css-variables/
i potem szukaj dalej.

[@pawel_kn]

A Ty masz już listę to-do wyczyszczoną, że sobie tu takie śmieszne filmiki na YT publikujesz ?
😁❤👍

[@projektowe]

Lista puchnie z każdym dniem. ;)

[@Futarish]

Jak nauczyć się myśleć zmiennymi???

[@projektowe]

Praktyka.

[@akanilorak]

Kiedy kolejny odcinek?

[@projektowe]

O systemach nie wiem, a nowy film dziś wstawiłem!

[@akanilorak]

@@projektowe Nowy odcinek obejrzany, czekam na kolejne piguły Design Systemowe. ✌🏻😎💊

[@projektowe]

@@akanilorak mam nadzieję że do tego czasu zrobię coś innego i ciekawego!