In this article we’ll discuss basic project settings in Figma, that is all you need to know before you start designing. We’ll explain what Frames, Layout grid and Rulers are. Read on to find out more.

Basic project settings in Figma – table of contents:

  1. Frames
  2. Layout grid
  3. Rulers
  4. Basic project settings in Figma

    First, you need to choose an area of the Canvas to create your designs in. That’s what the Frame tool is for. You will find it in the Toolbar. After activating the Frame tool, you have a few options of creating a frame.

    • click on the Canvas in order to create a default frame with 100×100 dimensions
    project settings
    • click and drag in the Canvas to create a frame with custom dimensions
    project settings
    • use the dropdown in the right sidebar to select a frame preset
    project settings

    After adding and selecting a frame, you have access to it in the Properties panel.

    project settings

    a) Position of the Canvas (X and Y) – here you can specify the position of the frame in the Canvas on the horizontal (X) and vertical (Y) axis.

    b) Dimensions of the Object (Width and Height) – here you can change the size of the frame

    c) Constrain proportions – It allows you to keep the proportions of the frame when resizing. This way you can change the height or width of the frame, and the second parameter will adjust automatically.

    d) Resize to fit – this function lets you resize the frame to fit its contents.

    Useful tip: You can also change the size of the frame manually: grab the edge or corner of the frame (the cursor will turn into a black double arrow), then drag to get the preferred size.

    e) Portrait and Landscape – here you can change the orientation of your frame to vertical or horizontal

    f) Rotation – it lets you adjust the angle of a frame

    g) Corner Radius – thanks to this function you can round the corner of a frame to create softer edges

    h) Independent corners – the independent corner setting lets you adjust the corner radius for each corner.

    i) Clip Content – it will allow you to hide any objects that extend beyond the frame’s boundaries

    j) Auto Layout – it lets you create responsive frames

    k) Layout Grids – this feature helps create a structured user interface

    l) Fill – using this option will let you fill your frame with color, gradient or photo

    m) Stroke – it helps add strokes to a frame. You can also use Advanced stroke settings that can be found under the ellipsis icon.

    project settings

    n) Effects – here you can add a shadow or blurs to a Frame. Click the Effect settings icon to adjust the shadow’’s settings.

    project settings

    o) Export – here you can export your frame to the following formats: PNG, JPG, SVG and PDF. 

    project settings

    Above each frame in the Canvas, its name is displayed. In order to change it, click on it twice. You can copy frames along with its contents and paste them to the Canvas as many times as you want.

    Task.3.1 Start working on the project from choosing the right size of a frame.

    Useful tip: If you don’t know what size should your frame be, a good choice would be to use one of the most popular screen sizes. Go to for more information.

    In this tutorial we’ll design an e-commerce mobile app, so let’s select one of the most frequently used resolutions for smartphones – 360×640 px.

    We’ll prepare 3 projects together

    • login screen (Login)
    • homepage (Home) 
    • product landing page (Product)

    After adding a frame, duplicate it right away, and name each screen properly, so as to keep the file organized.

    project settings

    Layout grid

    Layout grid is a system of horizontal and vertical lines (columns or rows) that help you keep elements precisely aligned in your frames. A properly set grid will certainly make your work easier and speed up the entire design process. There are two ways to set the layout grid in your design:

    1. you can enable the grid view even before you start designing and use ready-made grid layouts (if there are any in your library) or create your own,
    2. you can also start creating the design first, and set the grid later based on the designed elements.

    Useful tip: If you’re a novice designer, we recommend applying a layout grid to any project. There is nothing worse than a completely empty workspace.

    You can add a Layout grid to an active frame in the Properties panel. You have 3 options: grid, columns, row. You may choose a few options at the same time.

    project settings project settings project settings

    You can adjust the settings of every grid in the Layout grid settings panel. You can turn the grid’s visibility on or off at any time by clicking the Eye icon.

    project settings

    Useful tip: If you don’t know which layout grid to choose in your project, you can use the Grid System plugin, which will do it for you.

    Task 3.2. Set the layout grid in your project. For the purposes of this project, we selected Columns and set the following values:

    • Count 2 (number of columns) 
    • Margin 20 (distance of columns from the edge of the screen) 
    • Gutter 30 (distance between columns)
    project settings Basic project settings | Figma for beginners #3 40project settings


    Rulers are another useful feature that will help you align the elements in the file and keep it in order. To switch on the Rulers view, click on the Main menu, then View and Rulers. project settings

    Rulers can be seen at the top and left of the Canvas. With this feature, you can create vertical and horizontal lines (guides) – click and hold the chosen ruler, then move the cursor to the Canvas area. A thin, red line will appear, which you can move. You may create as many guides as you want.  You can easily delete unnecessary lines – just select the line (the chosen line will turn blue), and then click Delete.

    project settings

    Task 3.3. Experiment with adding rulers. They will be helpful when aligning the elements.

    You’ve just learned about basic project settings in Figma. Read also: AI-assisted chat bots.

    project settings

    If you like our content, join our busy bees community on Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.

    Basic project settings | Figma for beginners #3 klaudia brozyna avatar 1background

    Author: Klaudia Kowalczyk

    A graphic & UX Designer which conveys into design what cannot be conveyed in words. For him, every used color, line or font has a meaning. Passionate in graphic and web design.

    Figma for beginners:

    1. Intro to Figma
    2. Figma interface – basic information
    3. Basic project settings in Figma
    4. How to create shapes in Figma?
    5. Typography in Figma
    6. Libraries in Figma
    7. Prototyping in Figma
    8. Collaboration tools in Figma
    9. Best Figma plugins
    10. How to use Figma? 3 unusual ways