{"repo":"popovanton0/Blueprint","free":true,"listed":false,"github":"https://github.com/popovanton0/Blueprint","clone":"git clone https://github.com/popovanton0/Blueprint.git","description":"📐 Visualize the dimensions of your composables on a blueprint!","language":"Kotlin","stars":163,"topics":["android","compose-ui","debugging-tools","design-system","jetpack-compose","ui"],"license":"Apache-2.0","category":"ui-components","readme_excerpt":"📐 Blueprint Visualize the dimensions of your composables on a blueprint Introductory Medium Article The Problem Have you ever desired to see, what exactly is that padding's value while looking at the composable preview window? Especially when you are developing a button with 5 color styles, 3 sizes, and 2 optional icons; and each combination of these parameters has different paddings? Combinatorial explosion of UI components in design systems requires having a lot of context about paddings, dp's, sizes, corner radiuses, and other dimensional information in your head at the same time. In addition, code to produce those combinations can get tricky to analyze. So, verification also becomes hard: you make screenshots, move them to Figma, overlay them on top, and try to see the difference. Tedious 😩! The Solution The Blueprint library provides a way to visualize dimensional information in your UI using a simple DSL-based definition: 1. Just wrap your target UI in a Blueprint composable 2. Mark children with Modifier.blueprintId(id: String) modifier 3. Write the blueprint definition Preview And another example: Correct arrow padding rendering animation https://github.com/popovanton0/Blueprint/assets/15000556/7a90b534-3c7e-437a-8e08-1fdd4329c752 Debug https://github.com/popovanton0/Blueprint/assets/15000556/535a016f-0ca9-41d2-8e52-2ed7b36fbdc0 More examples These are snapshots from snapshot testing: ----------------------------------------------------------------------------------","default_branch":null,"files":null,"tree":[],"storefront":"/r/popovanton0","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/popovanton0/Blueprint/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}