Pol's Coding Notes

# Figma

# Shapes

  • Shift while dragging retains proportions.
  • Shift + Option retains proportions from the center. Ideal when we want to put a shape inside of another.

# Images

  • They behave like a background to a shape, with properties like cover, fit, fill...
  • We can add effects/filters/blending modes.
  • If we "Place Image" on a shape, it will fit the image inside that shape.
  • When creating a new shape, it automatically fills it with the grey color. We should delete it.

# Frames

  • Ctrl + D => Duplicate frame

# Layer Effects

  • Up and Down keys => +- 1
    • Shift => +- 10
  • Instead of an effect, we can add a fill and blend it.
  • Background blur effect.

# Boolean Groups

  • 2+ objects => combining two different shapes to make one.
  • Flatten => convert into one shape.

# Alignment and distribution

  • Alignment != Distribution.
  • Select element and press Shift + 1 or 2 => zooming modes.
  • Grouping many items to align them in regards to the canvas.

# Components

  • Reusable pieces. Don't have to be equal every time. There is a Master Component and then Instances. Master Components are indicated by a split hexagon.

# Nested components

  • Master components can be placed anywhere outside our frame; to build a library we can then place on our designs.

# Constraints

  • To pin it relative to the parent frame. We freeze the values, and can control the behavior when we resize elements.

# Presentation view

  • You can get a shareable link and sent it to other people. They can click around and move around the presentation. If they click on the presenter's avatar, they will follow what you do.
  • Prototyping mode allows you to simulate how your app would work. Your buttons can link to frames, deciding the workflow. If you link a Master component to a Frame, all Instances will retain what the Master links to. This is useful, for example, if we want a "Home" button which always links to Frame 1 (Home screen).

← Git →