Tips & Tutorials

Auto Layout Tips & Basics for Ant Design System

Official Figma tutorial on Auto Layout

Adding items to grouped components

  • Grab the Group instance from assets panel.
  • Detach the instance (Ctrl + Alt + B).
  • Paste it while the middle button is selected.
  • The same method applies to other ‘GROUP’ and components.
View video

Resizing the button with Auto Layout

  • Resize the button
  • Select the master component living inside
  • Set it to ‘Stretch Left & Right’ in the alignment panel
View video

Resizing Textarea vertically

  • Detach the instance (Ctrl + Alt + B).
  • Detach the master instance inside
  • Resize the input
View video

Resizing Tooltips/Popovers

  • Detach the instance (Ctrl + Alt + B).
  • Resize the master instance inside
  • Resize the text label
View video

Working with dropdown menus

  • Detach the instance
  • Changing the text inside menu item will resize the menu
  • Copy and paste menu item to add items to the menu
  • Submenu item needs to be resized manually
View video

Get Ant Design System

Individual
$79
One time payment - lifetime license
A single license for solo players and freelancers.
  • 2100+ high-quality components
  • 724 icons
  • 165 customizable styles
  • 45 screens with documentation
  • 4 screens with real-life UI examples
  • 4 layout templates
  • Light and dark theme
  • Auto layout supported components
  • Free updates
Business
from $158
One time payment - lifetime license
Perfect for multiple designers and developers working on the project.
  • 2100+ high-quality components
  • 724 icons
  • 165 customizable styles
  • 45 screens with documentation
  • 4 screens with real-life UI examples
  • 4 layout templates
  • Light and dark theme
  • Auto layout supported components
  • Free updates
  • Team license
+
Full Package
from $169
One time payment - lifetime license
Figma + Adobe XD versions
in one full package