Responsive Design in FIGMA

Written by: Dulal Deb

What is Figma?

FIGMA is an industry-standard design tool that can be used for free and is available for all platforms (Windows/MAC/Linux). It has two variants i.e available as a web-based and also a downloadable application. Not only this, we can also create logos in FIGMA, as it is a vector-based design tool.

Download FIGMA for free

Click the download button to get the offline version of FIGMA

Benefits of FIGMA

  • Great tool for collaborations with teams and stakeholders
  • Easy to learn and use
  • Prototyping is made easy with simple actions
  • Can design responsive mockups for developers using features like auto-layout and constraints
  • Developer handoff made easy with integrated inspect tab

Autolayout

Auto layout is a property that can be used on any grouped content in FIGMA’s artboard or frames. When it comes to automatic resizing or refilling of our content, the auto layout property is a game changer. With features like direction control, auto spacing, alignment, and many more, it provides a lot of useful tools that make the designer’s work easier.

Benefits of auto layout

  • You can create components or structures in a way that automatically grows or shrinks depending on content size.
  • You can easily change of content direction when the auto layout is applied.
  • Designers can design with better developer specifications, with integrated padding and flex properties that come with auto layout.

Learn more about FIGMA’s auto layout feature by clicking here.

Constraints

Constraints in FIGMA allow us to fix the positions of an element in any four directions (top, right, bottom, left) or set it to scale. It also allows fixing an element to the center. With constraints, it gives the designer flexibility to design screens with elements made sticky or fixed on scroll.

Learn more about FIGMA’s constraints by clicking here

Bonus tips: To remove constraints from any element in FIGMA, in windows press Shift and click on the respective constraint. In mac press CMD and click on the respective constraint.

Download the exercise file for free

Please enter your details to get access to the free FIGMA file

Related Articles

Join the community

Find me on

Shares
Share This