How to Use Calculator in Responsive Manager?
Use the Calculator in UiChemy's Responsive Manager to quickly work out responsive percentage and pixel values.
When you export your design using Smart Auto Responsive, it's about 90% responsive on most devices by default. You can customize the responsive values further using the Manual Responsive Setup option of Responsive Manager.
While exporting as a regular responsive layout, you have to enter responsive values for different devices individually as a percentage of the desktop value. To simplify this, use the Calculator feature of the Responsive Manager.
Calculate the Percentage
Once Responsive Manager is open, select Manual Responsive Setup, you'll find the Calculator at the bottom of the popup for Font Size, Line Height, Padding, and Flex Gap. There are three fields: Desktop, Responsive, and Percentage.
Enter the desktop value in the Desktop field, and the value you want on the responsive screen in the Responsive field. The Percentage field auto-calculates the percentage you need to enter in the respective device field.
For example, if you've set a 100px font size for desktop and want 45px on tablet, enter 100 in Desktop and 45 in Responsive, the Percentage field shows the result. Copy it and paste it into the Tablet field.
Calculate the Pixel Value
You can also work the calculation in reverse, find the responsive pixel value by entering the Desktop value and a Percentage, and the Responsive field shows the resulting pixel value.
For example, if you've set 80px font size on desktop and want 35% for mobile, enter 80 in Desktop and 35 in Percentage, the Responsive field shows the resulting pixel value.
Using the Calculator feature, you can set more accurate values across responsive devices.
Frequently Asked Questions
What should I do if the Calculator isn't giving the correct percentage?
Double-check the values entered in the Desktop and Responsive fields, the percentage is calculated based on the Desktop value. If discrepancies persist, try restarting the UiChemy Figma plugin to reset any glitches.
Can I use the Calculator for all responsive values in UiChemy?
Yes, it works for Font Size, Line Height, Padding, and Flex Gap, giving you precise adjustments across devices.
What's the best practice for using the Calculator?
Always start with a clear desktop value, since it's the baseline for every calculation, this keeps your responsive values consistent across devices.