Answer the question
In order to leave comments, you need to log in
How to achieve pixel perfect when laying out an Android application?
Good afternoon.
I pass the layouts in Figma to the developer. There is an inspector mode in which all distances and styles are visible.
But the result is not encouraging. Indents jump, styles too, I think that part of the responsibility for this lies with the developer, because. he is in a hurry and does not attach importance to design. But he says that it is impossible to achieve pixel perfect due to the large abundance of screens of different pixel densities.
The question is, is there any kind of flow or tool to make the layout of the application match the layouts?
Answer the question
In order to leave comments, you need to log in
Achieving pixel perfect on Android is possible, but wildly wildly difficult. Once I heard about this, the designers gave layouts for 100500 different screen sizes and the developers filed their own ui framework for this. There are also graphics engines for games that can be pixel perfect, but it's more about avoiding blurring at the edges of images.
You can set the size of the padding along the edges and between some elements, but you always need to leave places that will stretch. Accordingly, we are no longer talking about any pixel perfect. Dimensions should always be given in dpi, but remember that they should at least be even. There are devices on which sizes in integer dpi give a non-integer number of pixels. Everything is rounded on the go and it happens that it turns out so-so.
You can demand that the colors are correct, the font sizes (but here you have to remember that users love to play with them and everything can go). Styles can be made the same throughout the application.
it looks like nonsense
dp (density-independent pixels) - density-independent pixels.
Typesetting the layout for 360dp
In the developer settings on the device, specify the screen width of 360dp
The developer cuts the screen according to the layout and checks against it:
Copy the project in the figma to a new page
Made a screen Paste the
screen into the figma Specify the
width of the screen in the figma 360dp
Overlay using transparency
...
PROFIT !!!
The layout can also be made for a different resolution, for example, for ios 375dp or 395dp (if you have a multi-platform design). The main thing is to use a device with the right resolution or specify the desired resolution in the developer settings before checking with the layout.
Failure to comply with dimensional grids - HARAM !!!
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question