Skip to content
Szukaj

MINI-BLOG

Auto-layout 4 PRO tips

  • 1 września, 2022

Join Our

Newsletter

Subscribe to receive quick tips in your inbox!

Here is the post, which I hope will help you get better in auto-layout:)

marina_uxui

Absolute position

It’s really a SAVER!! Place element inside auto-layouted frame as you want, without losing auto-layout itself.

Where to use:

Anywhere, where you need flexible components with elements on top of them, going beyound the frame or even covering them completely with scrims.

So, quickly again:

To apply absolute position put it into auto-layouted frame, and on the top right find this sign

Set constraints, so the element stays in the right place

Align to baseline

Here is the issue: icon is not aligned properly to the text. I’ll show 2 solutions.

Solution 1
In advanced auto layout setting […], set text baseline alignment

In some cases this may not help. So that’s where another solution can be used.

Solution 2
Click on the icon, and press Shift+A (So the icon will be in auto-layouted frame). And add space on top, In my (…>case: 2 px.

Set minimal width/height of the frame

Let’s say I want to have an adaptive button, but its minimum width must be 200px.

Solution
Create a line. Height: 0.001, Width: 104. (200-48*2) Put inside auto-layouted frame. That’s it.

Keep an item centered

This trick is needed if there is an adaptive auto-layout container, and we need an item to stay in the center

Add empty frame to the bottom of auto-layouted frame, and set spacing mode to space between

Wyświetl ten post na Instagramie

Post udostępniony przez Marina Budarina • UIUX design (@marina_uiux)

PrevPrevious
NextNastępny
Share the Post:

Related Posts

CREATE UNIQUE Animated gradients

The tutorial on creating and animating gradients is here 👻 I also have a Figma file for you with these

Essential elements of Design System Part2

A design system is a set of guidelines, rules, and components that we use to design and develop a digital

Join Our

Newsletter

Subscribe to receive quick tips in your inbox!

Facebook-f Linkedin

© All Rights Reserved.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT