# Figma iOS Android pt dp sp Responsive Design Spec Card Convert a Figma px value into iOS pt, Android dp/sp, web rem/vw with a fluid clamp() snippet, a density-bucket render table and a touch-target accessibility audit, as a developer spec card. > Canonical page: https://elysiatools.com/en/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card - **Category:** Design - **Keywords:** figma to code, pt, dp, sp, rem, clamp, touch target, density bucket ## Overview iOS pt = px ÷ scale; Android dp = px ÷ density over mdpi…xxxhdpi buckets; rem = px ÷ root font size; vw = px ÷ viewport × 100; touch minimums 44pt/48dp/44px/24px; Material window classes and Tailwind breakpoints included. ## Inputs - **Figma px value** (number): e.g. 48 - **Design scale factor** (select) - **Element role** (select) - **Root font size (px)** (number) - **Viewport width (px)** (number) ## When to use - Hand off Figma dimensions to iOS, Android, and web developers using platform-specific units. - Check whether a button or control meets iOS, Android, and WCAG touch-target minimums. - Create responsive CSS values from a design measurement using rem, vw, and clamp(). ## How it works - Enter the Figma px value and choose the design scale: 1x, 2x, or 3x. - Select the element role: general dimension, touch target, or text size. - Set the root font size and viewport width when you need web rem or vw calculations. - Review the generated spec card with platform conversions, density renders, responsive notes, and any relevant audit results. ## Use cases - Design-to-development handoff for shared mobile and web components. - Accessibility review of buttons, navigation controls, and other touch targets. - Responsive layout specification using logical units, density values, and CSS sizing tokens. ## Frequently asked questions ### What units does the tool calculate? It calculates iOS pt, Android dp/sp, web rem and vw, along with responsive CSS guidance. ### How does the design scale affect the result? The selected 1x, 2x, or 3x scale is used to convert the Figma px value into logical platform units. ### Can it check touch targets? Yes. Select the Touch target role to compare the value with iOS, Android Material, and WCAG minimums. ### What root font size is used for rem? The default root font size is 16 px, and you can change it from 8 to 32 px. ### What viewport width is used for vw? The default viewport width is 1440 px, and you can set a value from 320 to 3840 px. ## Related tools - [Hash Algorithm Comparator](https://elysiatools.com/en/tools/hash-algorithm-comparator): Hash the same input with MD5, SHA-1, SHA-256, SHA-512, BLAKE2b, and BLAKE3 at the same time and compare them side by side: output length, hex/Base64 digest, security status (broken / modern), and a relative speed benchmark. Great for teaching, choosing a hashing algorithm, or sanity-checking checksums. - [OKR & KPI Tree Decomposer](https://elysiatools.com/en/tools/okr-tree-decomposer): Decompose an Objective into a weighted Department → Team → Personal tree with automatic progress roll-up. HTML tree + Markdown + CSV output. - [Serum Anion Gap (AG) Calculator](https://elysiatools.com/en/tools/anion-gap-calculator): Calculate the serum Anion Gap (AG) to classify metabolic acidosis. Standard formula AG = Na⁺ − Cl⁻ − HCO₃⁻ (mmol/L), or AG = Na⁺ + K⁺ − Cl⁻ − HCO₃⁻ with optional potassium. A high AG (≈ >12, or >20 with K⁺) indicates accumulation of unmeasured anions (lactic acidosis, ketoacidosis, renal failure, and toxins such as methanol/ethylene glycol, salicylates — mnemonic GOLD-MARK). A normal AG (8–12) during metabolic acidosis points to a hyperchloremic (normal-anion-gap) acidosis: diarrhea, renal tubular acidosis, saline resuscitation. A low AG (<3–6) is usually hypoalbuminemia, also hypercalcemia/hypermagnesemia, lithium, cationic IgG paraproteins, or bromide pseudo-hyperchloraemia. Optional albumin correction AG_corrected = AG + 2.5 × (4.0 − albumin g/dL) avoids missing a high-AG acidosis in hypoalbuminemia. Derived from Kraut CJASN 2007, Figge 1998, and MDCalc. Interpret with blood gas and full clinical context. Not medical advice. - [Indented List to ASCII Tree](https://elysiatools.com/en/tools/ascii-tree-from-indented-list): Convert a 2-space / 4-space / Tab indented hierarchical list (Markdown bullets, -, *, 1. prefixes optional) into a copyable ASCII directory tree. Two styles: Unicode box-drawing (├──└──│) for GitHub/Discord and classic ASCII (|--\--|) for plain text. Toggles for full guide lines, trailing spaces, and bracketed leaf nodes like docs/\[api.md\]. - [Data URI Generator](https://elysiatools.com/en/tools/data-uri-generator): Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown - [Encrypted PDF Converter](https://elysiatools.com/en/tools/encrypted-pdf-converter): Open password-protected PDFs with OpenDataLoader and export them as Markdown, JSON, or text once the correct password is provided - [Jupyter Notebook to Reproducible Script Linearizer](https://elysiatools.com/en/tools/jupyter-notebook-to-reproducible-script-linearizer): Turn .ipynb into a # %% Python script and detect out-of-order, hidden, and deleted state - [Markdown to PDF Converter - Markdown转PDF转换器](https://elysiatools.com/en/tools/markdown-to-pdf-converter): Convert Markdown files to PDF documents with proper formatting, syntax highlighting, and styling ## Samples - [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion - [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion - [Android File Operations Java Samples](https://elysiatools.com/en/samples/android-file-operations-java): Android Java file operations examples including text file read/write, file copy/move, directory traversal, and file validation - [Android File Operations Kotlin Samples](https://elysiatools.com/en/samples/android-file-operations-kotlin): Android Kotlin file operations examples including text file read/write, file copy/move, directory traversal, and file validation ## Related content - [Text Case, Encoding, and Normalization Conversion Tools](https://elysiatools.com/en/hubs/text-convert): Compare text case conversion, character-width conversion, encoding conversion, quoted-printable handling, and inline text normalization tools in one hub. - [Markdown Export, OCR, and Document Conversion Tools](https://elysiatools.com/en/hubs/markdown-convert): Compare Markdown-to-PDF, PDF-to-Markdown, OCR, slide deck export, and structured Markdown conversion tools in one hub for documentation publishing workflows. - [Text Tools](https://elysiatools.com/en/hubs/text-utility): Explore 33 text tools for utility workflows and compare closely related utilities quickly. - [Text Analysis, Readability, and Content Inspection Tools](https://elysiatools.com/en/hubs/text-analyze): Compare text statistics, language detection, readability scoring, sentiment analysis, moderation review, and pattern analysis tools in one hub.