Какие единицы рассчитывает инструмент?

Он рассчитывает iOS pt, Android dp, значения для текста с учетом масштаба шрифта, а также web rem и vw.

Как масштаб Figma влияет на результат?

Значение px делится на выбранный масштаб: 1 для 1x, 2 для 2x и 3 для 3x.

Какие значения используются для rem и vw?

rem рассчитывается через корневой размер шрифта, по умолчанию 16px, а vw — через ширину вьюпорта, по умолчанию 1440px.

Что проверяет режим «Сенсорная цель»?

Он сравнивает размер с минимумами 44pt для iOS, 48dp для Material и 44px и 24px по WCAG.

Какие параметры адаптивности указываются в карточке?

Карточка отмечает классы окон Material compact, medium и expanded, а также брейкпоинты Tailwind.

Elysia Tools

Навигация

Design

Карточка спеков Figma iOS Android pt dp sp (адаптивный дизайн)

Переводит px из Figma в правильные платформенные единицы и генерирует спеку для разработчиков: iOS pt (@1x/@2x/@3x с рендером px на каждый масштаб), Android dp/sp (таблица рендера mdpi…xxxhdpi и масштаб шрифта), web rem/vw со сниппетом clamp(); аудит минимальных сенсорных целей (44pt iOS / 48dp Android / 44px и 24px WCAG) с пометкой классов окон Material и брейкпоинтов Tailwind.

Детали

С чем помогает этот инструмент

Проверенные константы: iOS pt = px ÷ масштаб (@1x=1/@2x=2/@3x=3, историческая база 163ppi); Android dp = px ÷ плотность (mdpi 160=1x, hdpi 240=1.5x, xhdpi 320=2x, xxhdpi 480=3x, xxxhdpi 640=4x), sp добавляет пользовательский масштаб шрифта (шаги 0.85/1.0/1.15/1.3, Android 14+ нелинейно до 200%); web rem = px ÷ корневой размер (по умолчанию 16px), vw = px ÷ вьюпорт × 100, clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX)). Сенсорные цели: Apple HIG 44×44pt, Material 48×48dp, WCAG 2.5.5 (AAA) 44×44 CSS px, WCAG 2.5.8 (AA) 24×24 CSS px. Адаптив: классы окон Material compact <600dp / medium 600–839dp / expanded ≥840dp; брейкпоинты Tailwind 640/768/1024/1280/1536px.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Передача кнопки 48px @1x как сенсорной цели

Кнопка 48px с 1x-макета передаётся как 48pt / 48dp / 3rem с полной таблицей рендера по плотностям и проходит все нормы сенсорных целей (44pt iOS, 48dp Material, 44px и 24px WCAG).

<section>48 px @1x → 48pt · 48dp · 3rem · all touch-target checks pass (48 ≥ 44pt/48dp/44px/24px)</section>

Перевод ширины 750px из @2x-макета в логические единицы

Значение 750px из Retina @2x-дизайна превращается в 375pt / 375dp, показывает рендер 750px на @2x и xhdpi, rem при корне 16px и долю vw во вьюпорте 1440px с clamp()-токеном.

Ввод

Заполните нужные поля и запустите инструмент.

5 параметров

НастройкиНастройте форматы, диапазоны, числа и режимы.5

Значение px из FigmanumberОбязательноМасштаб макетаselectНеобязательноРоль элементаselectНеобязательноКорневой шрифт (px)numberНеобязательноШирина вьюпорта (px)numberНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Карточка спеков Figma iOS Android pt dp sp (адаптивный дизайн)

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Проверка кнопки 48px как сенсорной цели

2. Перевод ширины из Retina-макета

FAQ

Примеры Обработки Изображений Android Java

Примеры Обработки Изображений Android Kotlin

Примеры Файловых Операций Android Java

Примеры Файловых Операций Android Kotlin

Сравнение хеш-алгоритмов

Декомпозиция дерева OKR и KPI

Калькулятор анионной разницы сыворотки (AG)

Список с отступами в ASCII-дерево

Инструменты конвертации регистра, кодировки и нормализации текста

Инструменты экспорта, OCR и конвертации Markdown

Инструменты Text

Инструменты анализа текста, читаемости и проверки содержания