Všichni průvodci › Podle použití

Z Figmy rovnou do reference designu, bez překreslování

Rámce z Figmy naimportujete jako kroky návrhu i s texty, typografií a proměnnými, uděláte z nich referenci designu a každý běh implementace se s nimi porovná.

Návrh je ve Figmě a schválený, implementace běží na stagingu. Někdo musí obojí postavit vedle sebe a říct, kde ujel padding. Kaloko rámce naimportuje, takže porovnání proběhne u každého pull requestu, ne jednou před spuštěním.

Co nás pálí

Figma ukazuje, co se myslelo, prohlížeč, co se postavilo, a nic je nespojuje. Poznámky k předání zastarají a kontrola výsledku proti rámcům je práce pro designéra se dvěma okny vedle sebe.

Co se změní s Kalokem

kaloko design import figma udělá z rámců kroky návrhu ve stejném scénáři, který používá vývoj i QA. Každý krok dostane obrázek rámce a pod ním jeho textové vrstvy jako skutečný text, i s typografií a barvami. Proměnné souboru (nebo jeho styly) se stanou souborem tokens.json. Jakmile tým verzi přijme, stane se referencí designu a běhy implementace s packem design se s ní porovnají.

Jak to funguje

1. Získejte token

   osobní přístupový token Figmy s právem číst obsah souborů, v proměnné FIGMA_TOKEN. Bez tokenu vyexportujte rámce z Figmy jako PNG (1× a 2×) nebo SVG do složky a naimportujte složku.

2. Naimportujte

   kaloko design import figma "https://www.figma.com/design/<key>/Shop" --scenario qa/flows/checkout.yml. Rámce se přiřadí ke krokům podle názvu (Platba / mobile, payment@desktop); zbytek vyřeší --map frames.json a --dry-run nejdřív ukáže, co se kam přiřadí.

3. Publikujte verzi

   projděte a nasdílejte jako obvykle, nebo přidejte --publish. Každá verze dostane poznámky, co se u kterého kroku změnilo (text, viewporty, které vypadají jinak, tokeny); kaloko share --notes-preview je ukáže ještě před publikováním.

4. Udělejte z ní referenci

   když tým verzi přijme, nastaví ji kaloko reference --design --version 2.

5. Zkontrolujte implementaci

   běhy implementace s packs: [design] porovnají s rámci pixely, strukturu i tokeny; kaloko drift u každého prvku vypíše očekávaný token a skutečnou hodnotu.

Skilly a prompty

Naimportuj rámce pokladny z našeho souboru ve Figmě do designového scénáře v Kaloku, ukaž mi, který rámec šel ke kterému kroku, a verzi publikuj až po mém potvrzení.

Očekávaný výsledek: nejdřív zkušební import s přiřazením, pak import a po vašem souhlasu verze s poznámkami.

Implementuj krok platby podle schváleného návrhu a oprav, co nahlásí kaloko drift.

Očekávaný výsledek: agent si přečte kaloko spec payment, staví s tokeny, které specifikace jmenuje, projde krok s packem design a nechá jen rozdíly, o kterých musí rozhodnout člověk.

Co dostanete

• Návrh z Figmy jako kroky stejného flow, na kterém se testuje produkt, se stejnými id kroků.
• Tokeny z proměnných souboru, připravené pro specifikaci kroku a report odchylek.
• Kontrolu každého běhu implementace proti schváleným rámcům.

Otázky

Další průvodci