Anastasiia SukhanekАнастасия Суханек

Anastasiia Sukhanek / design systemsАнастасия Суханек / дизайн-системы

Design systems in Figma and in codeДизайн-системы в Figma и в коде

Two-layer tokens, components whose Figma properties match the code and checks that catch what Figma doesn’t show

Двухслойные токены, компоненты со свойствами как в коде и проверки, которые ловят то, чего не видно в Figma

Button / Primary
r 16 24 ContinueПродолжить 56
  • button/primary/bgaccent-600
  • button/primary/bg-pressedaccent-700
  • button/primary/textneutral-0
  • focus/ringaccent-600
8 years in designлет в дизайне Profee · Beeline · SberБилайн · Сбер Prague · remoteПрага · удалённо

Also asДругие ракурсы Product designer →Продуктовый дизайнер → Design engineer →Дизайн-инженер → Showreel →Шоурил →

01 — WorkРаботы

Systems I work onСистемы, над которыми работаю

Profee · 2025 – nowсейчасiOS · Android · Web

A new design system for a money transfer appНовая дизайн-система приложения для денежных переводов

I’ve been building it since summer 2025: components and tokens in Figma Variables, together with front-end developers, with the head of design reviewing and steering. The copy in components used to be done with UX writers, now it’s done with our AI agents. The verification entry point I designed is one of its components, shared by app and web

Строю с лета 2025: вместе с фронтенд-разработчиками завожу компоненты и токены в Figma Variables, хед дизайна ревьюит и направляет. Тексты в компонентах раньше писали с UX-редакторами, теперь — с нашими AI-агентами. Точка входа в верификацию, которую я придумала, — один из её компонентов, общий для приложения и веба

10verification scenarios, one componentсценариев верификации, один компонент

One component instead of ten screensОдин компонент вместо десяти экранов

KYC had ten scenarios, each asking for something different. I designed one entry point in three forms – a card, a bottom sheet and a status banner – and built it into the system with the head of design. Each scenario switches on its own illustration, text and buttons. Verification questions to support halved: −54%

В KYC было десять сценариев, и в каждом от человека нужно что-то своё. Я придумала одну точку входа в трёх формах — карточка, шторка и баннер статуса — и вместе с хедом дизайна завела её в систему. Каждый сценарий включает свою иллюстрацию, текст и кнопки. Вопросов про верификацию в поддержку стало вдвое меньше: −54%

Read the KYC case →Кейс про KYC →
Bottom sheet component in Figma with its properties: type, illustration, subtitle, buttons
The bottom sheet in Figma: one component, properties switch the parts on
Шторка в Figma: один компонент, части включаются свойствами
21/21stories pass automated accessibility checksпримеров компонентов проходят проверку доступности

The same components, checked in codeТе же компоненты с проверкой в коде

An anonymised sample of the system rebuilt in React and Storybook. Tokens live in one JSON, props mirror the Figma properties one to one. The tests caught secondary button text at 3.98:1 – it looked fine in Figma. A darker token fixed it: 5.3:1

Обезличенная часть системы, пересобранная на React и Storybook. Токены лежат в одном JSON, пропсы один в один повторяют свойства в Figma. Тесты поймали текст вторичной кнопки с контрастом 3,98:1 — в Figma он выглядел нормально. Исправила более тёмным токеном: 5,3:1

Storybook ↗Figma ↗GitHub ↗
×4faster to localise a featureбыстрее переводим фичу на 13 языков

Copy as part of the systemТексты как часть системы

With the head of design we built Claude agents that write to our editorial rules and translate every string into 13 languages. Localising a feature went from a day to about two hours, and strings go straight into the iOS and Android code

С хедом дизайна собрали агентов на Claude, которые пишут по нашей редполитике и переводят каждую строку на 13 языков. Локализация фичи сократилась с дня до примерно двух часов, а строки уходят сразу в код iOS и Android

Read in the Cards case →Подробнее в кейсе про карты →
02 — PrinciplesПринципы

How we build a systemКак мы строим систему

  • primitives → semantic

    Only semantic tokensТолько семантические токены

    A partner brand or dark mode is a new mode, not a redraw

    Бренд партнёра или тёмная тема — новый режим, а не перерисовка

  • property = prop

    Figma properties match the propsСвойства в Figma совпадают с пропсами

    A toggle in Figma is a prop in React with the same name, so handoff has nothing to translate

    Переключатель в Figma — это проп в React с тем же именем, поэтому при передаче нечего переводить

  • 1 × n

    One component, many scenariosОдин компонент на много сценариев

    Ten verification scenarios run on one bottom sheet. New scenario, no new component

    Десять сценариев верификации работают на одной шторке. Новый сценарий — без нового компонента

  • axe

    Accessibility is checked in codeДоступность проверяется в коде

    Contrast and accessible names are checked on every story, not in a review once a quarter

    Контраст и доступные имена проверяются на каждой story, а не на ревью раз в квартал

  • 4 px

    A 4 px gridСетка 4 px

    Spacing, type and component sizes are multiples of 4. This site follows it too

    Отступы, шрифты и размеры компонентов кратны 4. Этот сайт тоже

  • 13 langs

    Copy is part of the componentТекст — часть компонента

    Length, tone and states of the copy are designed with the component, and the longest language decides the layout

    Длину, тон и состояния текста продумываем вместе с компонентом, а вёрстку задаёт самый длинный язык

03 — ToolkitИнструменты

This site’s own type scaleШрифтовая шкала этого сайта

64 / 64Aa Display
32 / 36Aa Heading
20 / 28Aa Title
16 / 24Aa Body
12 / 16Aa Caption
Figma VariablesModesРежимыComponent propertiesСвойства компонентовAuto layoutTokens JSON → CSSReactStorybookaxeFigma MCPClaude Code

Get in touchНапишите мне

Looking for a Senior Product Designer role with design system ownership, or a design systems role

Ищу роль Senior продуктового дизайнера который отвечает за дизайн-систему, или место в команде дизайн-системы