Design token – co to jest i jak go używać? (2023)

Artykuł oceniający:

Znacznik projektu można zdefiniować jako zestaw atrybutów opisujących dowolny podstawowy (niepodzielny) styl wizualny.

Znaki projektowe to najbardziej podstawowe, powtarzalne elementy, atomy każdego projektu.

jeden przykład? kolor lub czcionka. każda aplikacja,Strona internetowa, interfejs jest zbiorem tych kolorów i czcionek oraz zbiorem problemów z nimi związanych.

Czym są tokeny projektów? jaka jest korzyść?

Kiedy powinniśmy ich używać? Dlaczego są tak gorącym tematem, a coraz więcej firm zaczyna dostrzegać ich świetne zastosowanie?

W dalszej części tego artykułu odpowiemy na te pytania.

Czym są tokeny projektowe?

Każdy tekst musi być napisany określoną czcionką, rozmiarem i stylem. Każdy element interfejsu musi mieć określony rozmiar i pozostawać w stosunku do innych elementówinterfejs.

Oczywiste, oczywiste, powiedzą sceptycy. No tak, ale jednocześnie nie w ten sposób.

Przy pewnym rozmiarze projektu, wielkości organizacji, wchodzą w grę te bardzo podstawowe kwestie, które nie pasują do potrzeb organizacji i intencji twórcy.

Zaczynają żyć życiem, które mogą kontrolowaćczasem jest naprawdę ciężko.

See Also

How to configure persistent OAuth tokens in Salesforce | Salesforce BenNaming tokens in design systemsDesignsysteme: Werkzeuge zur Vereinfachung des Designprozesses – Ester

Warto też pamiętać, że niektóre wartości podlegają subiektywnej interpretacji, zniekształceniom, domysłom i prostym błędom. Tworzą dużo zamieszania, dużo niepotrzebnych sytuacji, sporów, nieporozumień.

To nie wszystko.

Aplikacje internetowe. mobilna aplikacja. korporacyjna strona internetowa. strona produktu.Aplikacje napisane na Androida.

Działa na iOS. Czuły. Dostosuj się do kanałów mobilnych. wstęp. przesyłki pocztowe. itp.codzienne życie każdej dużej organizacji.

Dzięki wielu narzędziom, kanałom,produkt cyfrowy, pilniej potrzebne jest ustanowienie pewnych standardów (wizerunek, marka, design, programowanie).

Istnieje coraz pilniejsza potrzeba ustanowienia jednego źródła prawdy (Jedno źródło faktów - SSOT) Położy to raz na zawsze kres spekulacjom, debatom i kłótniom.

Odpowiedzi na te codzienne pytania projektantów i programistów brzmiątoken projektu / token projektuAle zanim o tym porozmawiamy, przypomnijmy sobie jedną rzecz.

Jeśli pamiętasz koncepcjęprojekt atomowy(Jesteśmy w artykule „Co to jest system projektowy. Dlaczego bez tego czeka nas chaos”), nietrudno ci zrozumieć, czym jest token projektu.

brad mróz, autor koncepcjiprojekt atomowySłusznie zwraca uwagę, że tworzenie modułów, które są integralną częścią produktu cyfrowego, może znacznie przyspieszyć i ułatwić prace projektowe i programistyczne.

Tworząc spójny system coraz bardziej złożonych elementów, mamy potencjał, aby z dużą precyzją zarządzać wyglądem i działaniem przyszłych aplikacji.

W koncepcji Brada Frosta system składa się z pięciu części. Rozwija się stopniowo i ewolucyjnie, naśladując znaną fizyczną strukturę otaczającego nas świata.

Materia składa się z bardzo podstawowych pierwiastków – atomów. To molekularne cegiełki do tworzenia organizmów - szablony i gotowe strony, szablony, aplikacje.

Korzystając z innego języka i dzieląc dowolny produkt cyfrowy na jego pierwszą część, rozróżnimy:

• Funkcjonalność (najwyższy poziom wszechstronności)
• interfejs złożony z funkcji
• Komponenty tworzące interfejs
• Token do tworzenia komponentu.

Innymi słowy, wszystkie te elementy tworzą specyficzną strukturę (system, sieć zależności), która odpowiada za estetykę, pracę, user experience, wizerunek,Promocja marki, Komunikacja produktów cyfrowych.

Odpowiada również za wizerunek marki i całej organizacji, który powinien być spójny, a nie dowolny.

Powinien być spójny, także pod względem koloru, rozmiaru, typografii czy innych elementów, które się na niego składają. Pamiętaj, że to małe rzeczy robią różnicę.

Tokeny projektanta są ogólnie definiowane jako wartości niezbędne do stworzenia i utrzymania spójności systemu projektowania UX.

Może to być kolor, czcionka,kapitałIstnieją inne elementy graficzne (m.in. odległości między elementami i ich skala). Mogą to być elementy statyczne lub elementy animowane.

Tokeny projektu są częścią biblioteki komponentów.

Są bardziej praktyczną, elastyczną i użyteczną alternatywą dla zakodowanych na stałe wartości, takich jak rozmiar, odległość, wytyczne dotyczące marginesów.

Pozwalają zachować spójność i skalowalność w całym interfejsie użytkownika. Są również bardziej przydatne, gdy projekty są aktualizowane i optymalizowane.

Innymi słowy, tokeny projektowe mogą służyć do tworzenia komponentów w stylu aplikacji, które są używane w różnych wariantach aplikacji.

Stworzenie tokena projektu pozwala na ustalenie i zdefiniowanie najbardziej fundamentalnej wartości.

Tokeny pozwalają na zbudowanie wspólnego modelu dla różnych osóbaplikacja(Drzemka.Aplikacja internetowa, Aplikacja mobilna),środowisko(takich jak Android, system iOS),Wymagać(np. platforma),wartości(np.RGB, HEX), format.

Z perspektywy efektywnego zarządzania projektami są narzędziem projektowym i programistycznym, które upraszcza proces tworzenia produktów cyfrowych.

Rodzaje i podstawowe zalety tokenów projektowych

Prawdopodobnie pierwsza marka, która konsekwentnie i publicznie stosuje koncepcję Design TokensWitryna Salesforce'a.

Dziś popularne stały się rozwiązania i narzędzia do tworzenia i zarządzania tokenami projektowymi. Na rynku istnieje co najmniej dziesięć wiodących rozwiązań.

Znaczniki projektowe, zgodnie z definicją i podejściem Salesforce Designer, odnoszą się przede wszystkim do:

• kolor
• skład
• Proporcja, przestrzeń, odległość, rozmiar, porządek
• funkcja dotykowa
• czas
• cień
• Promień, zaokrąglenie, granice.

Zgodnie z dychotomią tokeny projektowe można podzielić na:

• token globalny(są to najbardziej podstawowe wartości, obejmują wszystkie warianty i są dziedziczone przez tokeny niższego rzędu)
• znacznik aliasu(używany do komunikowania celu tokena).

innymi słowy,Token globalny kontroluje wszystkie wystąpienia określonej decyzji projektowej.

ChociażTokeny aliasów kontrolują określone zastosowania tokenówPonadto tworzą hierarchię opcji i decyzji, których celem jest kontrolowanie zakresu zmian.

Patrząc na tokeny projektowe z perspektywy ich użyteczności i wartości, trzeba stwierdzić, że zdecydowanie:

• Sprawiają, że decyzje projektowe, programistyczne, biznesowe i brandingowe są łatwiejsze i szybsze
• zmniejszyć liczbę błędów
• Usprawnij komunikację wewnątrz i między zespołami (zastąp wartości statyczne bardziej zrozumiałymi nazwami)
• Zwiększ spójność ekosystemu produktów cyfrowych
• Popraw tempo i efektywność pracy zespołów projektowych i deweloperskich
• Pozwala na utrzymanie skalowalnego i spójnego systemu wizyjnegoInterfejs użytkownika
• Usprawnij prace konserwacyjne związane ze skalowaniem produktów cyfrowych
• Uniezależniają projektantów i programistów od wymagań danej platformy, jednocześnie pozwalając na korzystanie z nich zgodnie z tymi wymaganiami.

Ostatnią, ale z pewnością nie ostatnią korzyścią, o której warto wspomnieć, jest tooszczędności finansowe.

Zmiany (takie jak kolor) w dużych, złożonych ekosystemach produktów cyfrowych mogą trwać miesiącami, angażować duże zespoły ekspertów i być kosztowne.

Korzystanie z tokenów projektowych pozwala uniknąć sytuacji, w których jakakolwiek zmiana oznacza zakłócenie dotychczasowego rytmu pracy, paraliż podejmowania decyzji i konieczność przesunięcia zadań w całym zespole.

Dlaczego tokeny projektowe odgrywają ważną rolę w procesie projektowania?

Tokeny projektowe dla poszczególnych ekspertów i zespołów są swoistym repozytorium, które pozwala rejestrować i analizować różne warianty stylu systemu.

Ponadto zapewniają, że organizacje działają w oparciu o zestandaryzowane dane, definicje i wartości.

żartźródło prawdy- Jedno źródło prawdy - podejmuj bardziej świadome decyzje na podstawie danych.

Wprowadzają niejednoznaczność potrzebną do efektywnego funkcjonowania procesu projektowania i produkcji.

Wspólny zakres perspektyw i wiedzy zachęca do komunikacji i optymalizacji przepływu pracy.

Token projektu to narzędzie wielokrotnego użytku o jasno określonym przeznaczeniu.Zawierają również szczegółowe wytyczne dotyczące projektowania i programowania.

Pomagają również w podejmowaniu decyzji projektowych na różnych poziomach szczegółowości/ogólności. Jeśli chodzi o poszczególne interfejsy, grupy interfejsów.

Możliwość śledzenia zmian wprowadzanych w systemie pozwala również zobaczyć konsekwencje, przyczynę i skutek decyzji.

Tokeny projektowe mogą być cennym źródłem danych i wiedzy,Może być używany do badań i procesu optymalizacji.

Na przykład, aby zwiększyć i zoptymalizować współczynniki konwersji (CRO - Optymalizacja współczynnika konwersji).

Tokeny projektowe znacznie usprawniają przenoszenie i udostępnianie wytycznych projektowych, które do tej pory zapewniały pojedyncze pliki projektowe przechowywane w bibliotece projektowej.

Użyteczność, użyteczność i korzyści płynące z tokenów projektowych są najbardziej widoczne, gdy organizacja planuje lub jest w trakcie:

• Stwórz nowy produkt cyfrowy
• Adaptacja, optymalizacja i utrzymanie istniejących produktów cyfrowych
• Korzystaj z wielu kanałów, platform, technologii, narzędzi
• Stopień
• podejmować strategiczne decyzje
• Wdrożenie projektu systemu (jeśli nie jest obecnie używane)
• rewizja UX, planować i przeprowadzać testy użyteczności
• transformacja cyfrowa
• Stwórz program do zarządzania projektami.

Tworzenie tokena projektu - Jak stworzyć token projektu?

Większość narzędzi wykorzystywanych dziś w procesie oferuje możliwość tworzenia tokenów projektowychrozwój aplikacji(np. Figma Token, Zeplin Design Token, Adobe XD). Generalnie we wszystkich rozwiązaniachto jest to samo.

Oznacza to, że zamiast używać długich i skomplikowanych kodów szesnastkowych (które definiują kolory), utwórz proste fragmenty CSS, które ułatwią zrozumienie, zapamiętanie i komunikację nazw.

Stworzenie bardzo przydatnych i praktycznych tokenów – choć nie stanowi wielkiego problemu dla kogoś z podstawową znajomością narzędzi do projektowania – wymaga pewnej praktyki.

Po pierwsze, należy zauważyć:

• Opracuj wspólny język komunikacji, który każdy może zrozumieć
• Opracuj konwencje nazewnictwa w oparciu o reguły nazewnictwaCTI (kategoria, typ, pozycja) — kategoria, monit, element
• Zdefiniuj, jaki powinien być token
• Zdefiniuj zakres jego zastosowania – zidentyfikuj kategorie, typy i elementy, które zostaną tokenizowane
• Wymuszaj solidną izolację i identyfikuj wszystkie warianty wartości tokenów
• Jak zbudować zautomatyzowany projekt
• Wybierz najlepsze pojedyncze źródło prawdy - tokeny mogą być przechowywane w osobnych plikach lub na osobnych stronach.

Token projektowy dla projektantów oznacza większą kontrolę nad procesem projektowym oraz szybsze, prostsze wdrażanie spójnych rozwiązań.

Z perspektywy programisty tokeny projektowe oszczędzają czas i eliminują błędy oraz wynikające z nich niezbędne poprawki.

Design Token to narzędzie dla projektantów i programistów, którzy współpracują w celu:

• poprawić
• zmniejszyć ciśnienie
• uczynić go bardziej przejrzystym
• ułatwić zrozumienie
• uczynić go bardziej przewidywalnym.

Projekt tokena. Żetony projektowe. Abstrakcyjny

1. Znaczniki projektowe definiuje się jako zestaw atrybutów opisujących dowolny podstawowy (niepodzielny) styl wizualny.
2. Znaki projektowe to najbardziej podstawowe, powtarzalne elementy, atomy każdego projektu.
3. Tokeny projektowe są niezbędne do tworzenia i utrzymywania spójności systemu projektowego.
4. Im więcej produktów, narzędzi i kanałów, tym pilniejsze staje się ustalenie pewnych standardów wizerunkowych, brandingowych, projektowych i programistycznych.
5. Ustanowienie jednego źródła prawdy (SSOT), które raz na zawsze położy kres spekulacjom, debatom i kontrowersjom, staje się jednym z najważniejszych problemów, które mogą rozwiązać żetony projektantów.
6. Zgodnie z koncepcją projektowania atomowego tworzenie modułów stanowiących integralną część produktu cyfrowego znacznie przyspiesza i ułatwia prace projektowe i programistyczne.
7. Tworząc spójny system coraz bardziej złożonych elementów, mamy potencjał, aby z dużą precyzją zarządzać wyglądem i działaniem przyszłych aplikacji.
8. W produktach cyfrowych rozróżniamy funkcje, interfejsy, z których składają się funkcje, komponenty, które składają się na interfejsy, oraz tokeny, które składają się na komponenty.
9. Wszystkie te elementy tworzą strukturę odpowiedzialną za estetykę, działanie, user experience, wizerunek, branding i komunikację cyfrowego produktu.
10. Tokeny projektu są częścią biblioteki komponentów.
11. Flagi projektowe są bardziej praktyczną, elastyczną i użyteczną alternatywą dla zakodowanych na stałe wartości, takich jak rozmiar, odległość, piksele marginesu.
12. Tokeny projektowe pozwalają zachować spójność i skalowalność w całym interfejsie użytkownika.
13. Tokeny projektowe są też dużo wygodniejsze przy aktualizacji i optymalizacji projektów.
14. Tokeny projektowe mogą być używane do tworzenia komponentów stylu aplikacji używanych w różnych wariantach.
15. Tokeny projektowe pozwalają na ustalenie i zdefiniowanie najbardziej fundamentalnej wartości.
16. Tokeny umożliwiają ustanowienie wspólnych schematów dla różnych zastosowań, środowisk, wymagań, wartości, formatów.
17. Projekt tokena dotyczy głównie koloru, typografii, proporcji, odstępów, odległości, rozmiaru, kolejności, funkcjonalności dotykowej, synchronizacji, cieni, promienia, zaokrąglonych rogów, obramowań.
18. Tokeny projektu dzielą się na tokeny globalne i tokeny aliasowe.
19. Token globalny kontroluje wszystkie wystąpienia określonej decyzji projektowej.
20. Tokeny aliasów kontrolują określone zastosowania tokenów. Ponadto tworzą hierarchię opcji i decyzji, których celem jest kontrola zakresu zmiany.
21. Wykorzystanie tokenów projektowych pozwala uniknąć sytuacji, w której jakakolwiek zmiana oznacza zakłócenie dotychczasowego tempa pracy, paraliż podejmowania decyzji i reorientację zadań całego zespołu.
22. Tokeny projektowe dla poszczególnych ekspertów i zespołów są swoistym repozytorium, które pozwala rejestrować i analizować różne warianty stylu systemu.
23. Projektowanie tokenów gwarantuje, że organizacje działają na zestandaryzowanych danych, definicjach i wartościach.
24. Są narzędziem wielokrotnego użytku o jasno określonym przeznaczeniu. Zawierają również szczegółowe wytyczne dotyczące projektowania i programowania.
25. Tokeny projektowe pomagają również w podejmowaniu decyzji projektowych na różnych poziomach szczegółowości/ogólności.
26. Token projektowy dla projektantów oznacza większą kontrolę nad procesem projektowym oraz szybsze, prostsze wdrażanie spójnych rozwiązań.
27. Z perspektywy programisty tokeny projektowe oszczędzają czas i eliminują błędy oraz wynikające z nich niezbędne poprawki.