1Figma Design is the workspace for this course

Figma Design lets you arrange images, shapes, and text into visual pieces.

Tainá, a 32-year-old photographer, helps Álvaro, a 61-year-old guide.

They are preparing Luz de Rua, a fictional photo walk.

The project will be a cover and three guide pages.

Use a computer with a browser.

Sign in to your Figma account and choose to create a Design file.

Do not confuse it with FigJam, Slides, Sites, or Make.

Rename the file Luz de Rua.

Bookmark the address in your browser.

Tainá chooses Design because she will build pieces with layers.

Open the source image and plan for the four pieces.

2Confirm access before you start

Return to the file list and reopen Luz de Rua.

You need permission to edit.

The Starter plan supports basic work, with limits on organization and collaboration.

The course uses one file, one page, and several frames. It does not depend on paid features.

Figma saves changes to your account.

Wait for the saved indicator before leaving.

Later, you will also save a local copy.

Screens and names may change. Find the described function and check the result instead of memorizing button locations.

Álvaro bookmarks the address so he does not have to search for the file again.

3Check the decision against its use

Create a Design file, name it, and confirm you can reopen it.

Álvaro checks the worksheet: reopen with editing permission.

1Clarity can be observed

Use five criteria: one main message, a few type styles, regular spacing, repeated choices, and enough contrast.

They form a checklist for review.

They are not a formula for luxury.

A simple piece can work well when its purpose is clear.

On the Luz de Rua cover, the message is to learn to observe the city.

Schedule, price, and several promises do not need to compete for the first read.

Because the walk is fictional, the exercise does not invent a real address or registration.

We are designing the visual invitation and three guide pages.

Tainá reduces the calls to action before testing a new effect.

Open the source image and plan for the four pieces.

2Make one correction at a time

Look at the before-and-after example in this lesson.

The revised version organizes the call to action, explanation, and photo.

Write down the problem that most affects readability.

Choose one related change: remove clutter, add space, align, or increase contrast.

Save your assessment with a screenshot of the piece or a note.

If no problem stands out, record which criteria passed.

The exercise ends with a diagnosis and a decision; no unnecessary redesign is required.

Álvaro can explain which information should be read first.

Original compositions · not Figma screenshots

Version to review

LUZ DE RUA
PHOTOGRAPHY!
LOOK! LEARN!
A NEW EXPERIENCE!

Too many calls to action have the same emphasis.

Organized version · educational example

Luz de Rua

Learn to observe the city.

One message, a few styles, space, repetition, and contrast.

3Check the decision against its use

Choose one message and fix the problem that most gets in the way of reading it.

Álvaro checks the worksheet: decision—make one justified change or keep it.

1Four pieces, one sequence

The cover introduces Luz de Rua.

Page 1 guides people to observe the light.

Page 2 asks viewers to choose a detail.

Page 3 invites them to build a series.

Give each page one main idea and one supporting line.

Avoid repeating the same promise across all four.

Write the plan in a note first.

Cover example: Luz de Rua; a walk to practice looking closely.

Page 1: Look at the light; notice where the shadow changes.

The other pages can use Choose a detail and Build your series.

Tainá writes the plan before choosing the framing.

Open the source image and plan for the four pieces.

2Choose the elements that will repeat

Choose a background color, a text color, and an accent color.

Leave space for the name and page number.

For this exercise, use cream, deep teal, and ochre.

These choices help the pieces look related without making the images identical.

If you use Canva, think of a page as one design.

In Figma, each piece will sit in a frame.

One file page can contain many frames.

This keeps you from creating separate files for one carousel.

Álvaro can tell the file page apart from the four frames it contains.

3Check the decision against its use

Give each frame a purpose and call to action while keeping the visual family consistent.

Álvaro checks the worksheet: keep consistent—colors, type, and signature.

1The frame holds the dimensions and content

In the Luz de Rua file, choose Frame from the toolbar or press F when you are not editing text.

Draw an empty frame.

With it selected, find W and H for width and height.

Set them to 1080 and 1350.

If needed, turn off the linked proportions.

Rename the frame 00-Capa in the layer list.

The 4:5 format is this exercise’s target, not a permanent platform rule.

For delivery, check the actual destination.

A horizontal thumbnail can use a different 1280 by 720 frame.

Tainá sets the size before placing the photo.

2Screen zoom does not change the file

Zooming out helps you see the whole frame.

It does not change the dimensions.

Changing W and H changes the frame.

This distinction keeps you from resizing the piece when you only wanted a better view.

Select 00-Capa in the list to check the frame outline.

Leave room in the workspace to duplicate it later.

You do not need to create another file page.

Keep all the pieces together so you can compare them.

Álvaro zooms out without changing the W and H values.

3Check the decision against its use

Set the frame width and height; use zoom only to change the view.

Álvaro checks the worksheet: zoom changes the view, not the size.

1Each object sits on a layer

Select 00-Capa.

Use Rectangle or R to draw two overlapping rectangles inside it.

Apply different colors in Fill.

Look at the two items in the layer list.

The item higher in the list usually appears in front.

Rename the rectangles Background and Card.

In the list, drag Card above Background.

Check the change on the screen.

Both should be inside 00-Capa.

Indentation in the list shows this relationship; drag them into the frame if they are outside it.

Tainá names the shape before locking it.

2Hiding is a reversible test

Use a layer’s visibility control to hide it and show it again.

If the object reappears, you found the right layer.

Locking prevents accidental changes.

Unlock it when you need to adjust the item.

A frame’s Clip content setting crops content that extends beyond its edges.

It does not remove the original file.

Try moving a shape partly outside and watch how it is cropped.

Then move it back and keep only what you want to use.

Álvaro uses visibility to find an object without deleting it.

3Check the decision against its use

Check order, visibility, and frame membership before making changes.

Álvaro checks the worksheet: test—hide, show, and check the crop.

1An image can fill a shape

Save the kit’s source image to your computer.

In Figma, use Place image from the file menu or drag the file onto the workspace.

Place the image inside 00-Capa.

Check its position in the layer list.

Select the image layer.

Turn off the linked proportions and set W to 952 and H to 800.

Position it with space for the title.

The shape and photo now have different proportions, so you can compare Fit and Fill.

With the image selected, open its Fill settings.

Fit shows the whole image and may leave empty space.

Fill covers the shape and may crop the edges.

Crop lets you reposition the crop.

For this cover, choose the mode that keeps the window arch visible.

Tainá keeps the arch because it guides how viewers read the facade.

Open the source image and plan for the four pieces.

2The crop should support the message

Compare one version that crops out the arch with another that keeps it.

The photo invites viewers to notice the architecture.

Losing the arch can weaken that intention.

If you use another photo, decide first which detail must remain.

The kit image was generated with Codex and depicts a fictional street.

It does not prove that a tour or location exists.

You may use a photo you own and are authorized to use.

Keep the source file separate so you can reframe it for another format.

Álvaro keeps the source image to try another format later.

3Check the decision against its use

Choose a crop that preserves the detail supporting the message.

Álvaro checks the worksheet: keep the window arch visible.

1Text is an editable layer

Choose Text or press T, then click inside 00-Capa.

Write Luz de Rua.

In Typography, choose Inter, Bold, size 64.

Create another layer with “Learn to observe the city” at size 32.

Add the signature “Educational example” at size 28.

These values are starting points for a 1080 by 1350 frame.

Adjust them for line length and readability.

Use a simple background area.

The smaller line should not be squeezed against the edge.

If the text runs outside the frame, make the text box narrower so it wraps onto new lines.

Tainá keeps one font family and changes size and weight.

Open the source image and plan for the four pieces.

2Line height organizes the text block

To check the space between lines, make a copy of the title.

Narrow the text box until the title wraps onto two lines.

In Line height, try 72 pixels with 64-size text.

Compare it with a smaller value and see whether the lines feel cramped.

Then restore the one-line cover title and remove the test copy.

Read a sentence with accents, such as Observação da cidade.

Check that the chosen font displays every character.

Then zoom out to about the size people will use it.

If you have to zoom in to read it, adjust the design before adding decoration.

Álvaro checks the accents before duplicating the design.

3Check the decision against its use

Use three text roles and check size, wrapping, and line spacing.

Álvaro uses the sheet to check: review: accents, wrapping, and line spacing.

1The selection determines the alignment

Select three objects in the same frame, holding Shift as you click.

Use Align left to line them up at the left edge.

Check which objects are selected.

When only one object is selected, alignment may use the parent frame as its reference.

For practice, use three test rectangles outside the cover.

Place them in a column, select all three, and use Tidy up or distribute vertically.

Look at the spacing between them.

If available, set the spacing field to 24.

Tainá selects only the objects that need to share the spacing.

2Margins are part of the composition

On the cover, start with a 64-unit margin for the text area.

This is a choice for this exercise, not a universal standard.

Check that the headline, supporting text, and signature start at the same point.

Use visual guides and position fields to adjust them.

Do not apply automatic layout to the whole design without checking it.

The program does not know how important each element is.

Tidy up may move more than you want.

Try it on a copy or undo if the composition stops making sense.

Álvaro checks the cover margin after the separate test.

3Check the decision against its use

Select the right objects, align them, and check their spacing.

Álvaro uses the sheet to check: starting text margin: 64 units.

1Fill covers an area; stroke defines its edge

Create three test squares.

In the first, choose a solid Fill in deep teal #173B46.

In the second, remove the fill and add a Stroke, the outline.

Adjust its thickness and check the edge.

In the third, try a Linear fill, the gradient.

In a gradient, each stop controls a color and its opacity.

Use deep teal at one end and lower the opacity at the other.

The control line changes the direction of the transition.

This can help soften an area behind text.

Tainá uses the outline to separate a card without covering the image.

2The palette needs clear roles

Use cream #F7F1E6 for the background, blue #173B46 for text, and ochre #C58B35 for accents.

Copy each code into the color field.

It identifies a color; it is not a command.

Do not automatically use ochre for small text; check the contrast of the combination.

Remove effects from the squares to see only the property being studied.

Then apply one choice to the cover and check readability.

A gradient that looks beautiful may compete with the photo.

Keep it only if it helps separate the information.

Álvaro identifies text color by its code and does not rely on the color name alone.

3Check the decision against its use

Give each property a specific job and check the result.

Álvaro uses the sheet to check: linear: a transition between points.

1An overlay needs a clear layer order

Select 00-Capa in the list and choose Duplicate from the context menu.

The shortcut is Ctrl+D on Windows or Cmd+D on Mac.

Work on the copy to preserve the current version.

On top of the photo, create a blue rectangle #173B46.

Keep the rectangle below the text and above the photo.

Lower the fill opacity so the image shows through.

Adjust the area and intensity while looking at the whole sentence.

There is no percentage that works for every photo.

If the text is still hard to read, put a solid-color card behind it.

The image can stay visible in the rest of the area.

Tainá uses a solid card when the photo makes the text hard to read.

Check contrast: Foreground Color is the text color; Background Color is the background.

2The test is readability, not the effect

Cream #F7F1E6 on blue #173B46 is the example’s text pair.

Check the ratio with the recommended checker.

For regular text, use 4.5 to 1 as a minimum reference.

Over a photo, the ratio changes from place to place; a solid background makes it easier to measure.

Compare the earlier and new versions at the size they will be used.

The headline should be clear and the window should remain recognizable.

If the overlay hides the subject, make it smaller or move the text.

Keep the main information visible.

Álvaro checks that the window is still recognizable after adding the overlay.

3Check the decision against its use

Create a stable reading area and check the contrast and subject.

Álvaro uses the sheet to check: test: readable sentence and recognizable subject.

1Blur can affect different layers

On a copy of the cover, duplicate the photo.

Move the duplicate below the original in the layer list and enlarge it to fill the frame.

Make the original above it smaller to reveal the background edges.

Select only the duplicate.

In Effects, add an effect and choose Layer blur.

Increase the value a little at a time; the background should lose sharpness while the main photo stays sharp.

Background blur works differently: it blurs what is behind the selected shape.

For this to show, the shape’s fill needs to be transparent.

Use it only when there is content behind the shape, and check the effect in the full design.

Tainá keeps the main window sharp to preserve the message.

2Glass and atmosphere are optional

A translucent card with blur can look like glass.

It helps only if the text stays readable.

A solid card also works.

Compare the two options without changing the headline, so you can tell what improved.

Do not copy a high value, such as 180, without considering the design size.

Start low and observe.

Several effects can slow the editor down.

If editing becomes slow, hide the test effects and keep the simple alternative.

Álvaro prefers the solid card when the effect does not improve readability.

3Check the decision against its use

Blur only the supporting area and keep the main information sharp.

Álvaro uses the sheet to check: decision: does the effect help, or does the simple version work better?

1The shape defines the visible window

Test it outside the cover using a copy of the photo.

Choose Ellipse or press O.

Draw the ellipse while holding Shift to make a circle, then place it over the detail.

In the layer list, place the ellipse below the photo.

Select both and choose Use as mask from the context menu.

The mask limits which part of the photo appears.

Check the group created in the list.

If everything disappears, check the order, position, and selection.

The mask shape does not automatically detect an object’s outline; it reveals the area you drew.

Tainá tests the crop on a copy to preserve the cover.

2Moving the photo and moving the mask are different

Inside the group, select the photo to adjust the visible detail.

Select the mask to change the window shape.

Look at which layer is highlighted before dragging.

To undo the test, choose Undo or remove the mask function.

A circular mask can highlight texture or a doorknob but hide the arch shape.

Decide whether the crop supports the message.

Do not confuse a mask with AI background removal.

This exercise uses a geometric window and does not require an extra service.

Álvaro selects the photo inside the group before adjusting the detail.

3Check the decision against its use

Use a reversible mask and check which layer is being moved.

Álvaro uses the sheet to check: review: detail visible without losing its purpose.

1A text style saves how the letters look

Select the title and check Inter, Bold, size 64, and line height 72.

In Typography, open the style selector and create Title/Light.

Apply that style to a test text layer.

Text styles save font, weight, size, and spacing.

Color and alignment stay separate from the text style.

Check Fill for the color and the alignment control for position.

A title can use the same type style with a different color, as long as it remains readable.

Tainá names the style by its purpose so she can find it again.

2Edit the style to check the link

Open the style you created and temporarily change the size to 68.

Check the linked title and test text.

Then restore 64.

If one does not change, check whether it has the style or only similar values.

Save a screenshot of this check.

This course uses local styles in the same file.

You do not need to publish a team library.

Publishing and sharing libraries depends on the plan.

You can also create color styles from the Fill selector, but that is a separate step.

Álvaro checks the color separately without undoing the style.

3Check the decision against its use

Apply a local style and test whether changing it updates linked text layers.

Álvaro uses the sheet to check: separate: color and alignment.

1The main component works as a source

Outside the cover, draw a 32 by 32 ellipse and choose ochre in Fill.

Select only that ellipse and choose Create component.

Name it Marca/Ponto.

This is the main component.

Duplicate it twice to create instances, the linked copies.

An instance appears as a component in the list.

You can also insert it from the Assets panel, under local components.

Do not use the main component as a stray decoration on the cover.

Keep it in a reference area in the same file.

Tainá keeps the main component outside the export area.

2Test before spreading it across the series

Change the main component color to deep teal.

Check whether both instances update.

Then restore ochre.

For this test, do not change the instances’ colors individually.

Local changes can override an inherited property and change the expected result.

Use an instance as a small marker on each piece if it helps readability.

You do not need to turn the entire cover into a component.

First, understand one simple object.

If a copy does not update, check the link and any local changes before rebuilding everything.

Álvaro tests two instances before repeating the mark across the pages.

3Check the decision against its use

Create the main component, add instances, and test a property with no local changes.

Álvaro uses the sheet to check: test: color changes on the main component and both copies.

1The pen connects editable points

In a test area, choose Pen or press P.

Click three positions to draw a line with two segments.

Finish with Esc.

Select the line, remove Fill if present, and set Stroke to deep teal with thickness 4.

Use only a few points.

The line should guide the eye between three details without looking like a real map.

To curve a section, try dragging as you create a point on a copy.

The required practice uses straight segments.

You do not need advanced drawing tools.

Tainá starts with a few points to control the drawing.

2Add-ons add features made by third parties

Before using an add-on, write down the problem it would solve.

In the tools area, look for Plugins and read the description, owner, and terms.

A community item may require payment or access to data.

The presence of a button does not make the feature necessary.

For this series, the shapes, text, and images in the file are enough.

If that is the case, record that no add-on is needed.

Additional drawing or video features may depend on your plan.

None is needed to export the course’s static pieces.

Álvaro records that he does not need an add-on for the current task.

3Check the decision against its use

Draw the line with the pen and consider an add-on only when you have a clear need.

Álvaro uses the sheet to check: add-on: documented need or none.

1Ask for a read before explaining

Show the cover and ask: what is the main message?

Then ask what was hard to read.

Record the person’s words separately from your interpretation.

In Figma, Share contains the access options.

For a review, choose view access when available, without granting unnecessary editing.

Permissions depend on the account, file location, and plan.

Starter drafts have collaboration limits.

Alternatively, show the design on your own screen or send an exported image in the next lesson.

Do not move the file to a team space without checking the terms.

Tainá writes down the comment she received before suggesting a solution.

2An observation becomes a decision when it has a criterion

Fictional example: the person read “photography” but missed the direction to notice the city.

Hypothesis: the subtitle is too subtle.

Test: make it stand out more while keeping the main title.

Then compare.

Do not invent a real testimonial to justify this change.

The short practice prepares two questions and records your own review using the five criteria from lesson 2.

You can talk with another person later.

If that has not happened yet, write “outside review pending.”

Keep the comment received, your interpretation, and your decision in separate fields.

Álvaro can show the design on screen without giving editing access to the file.

3Check the decision against its use

Ask about the message and readability, record the comment, and test a change tied to the problem.

Álvaro uses the sheet to check: status: self-review done; outside conversation done or pending.

1Export the full frame

Select the 00-Capa frame in the layer list.

In Export, add a setting with the plus sign.

Choose PNG and 1x scale.

Check the preview and export.

Save the file in a Luz-de-Rua/entrega folder.

Your browser may use the default downloads folder.

Open the PNG outside Figma.

Check the dimensions, 1080 by 1350, the full title, photo, background, and that no test objects are present.

If only one object appears, go back and select the frame.

If the background is missing, check Fill and whether it is included in the export.

Tainá checks the preview before saving the frame.

2Choose a format for the deliverable

PNG preserves text and shapes well in static designs.

JPG can work for photos with a smaller file, but it does not preserve transparency.

PDF works for document review; SVG preserves vector shapes with some limitations.

None of these replaces the editable Figma working file.

As an extra test, export the same frame as a PDF and open it.

Check the text and effects: they may behave differently in each format.

For the final project, we will deliver four PNGs at 1x.

The editable copy will be saved separately in the next lesson.

Álvaro opens the saved file to check that the full cover is there.

3Check the decision against its use

Select the full frame, export at 1x, and open the PNG to review it.

Álvaro uses the sheet to check: check: file opened outside the editor.

1Apply the choices to all four pieces

Duplicate 00-Capa three times.

Name the frames 01-Luz, 02-Detalhe, and 03-Serie.

Use the titles Look at the light, Choose a detail, and Build your series.

Replace the subtitles with the kit instructions.

Adjust the crop of the same image without inventing new locations.

Keep the margin, type style, and colors consistent.

Use marker instances only if they help.

Check each page against the five criteria.

Export all four frames individually as PNGs at 1x.

Use the frame names to keep the delivery folder in order.

Tainá reviews each crop before exporting the set.

Open the source image and plan for the four pieces.

2The finished image and editable file serve different purposes

In the main menu, find File and Save a local copy.

Save a .fig copy of your own file.

This copy lets you continue editing later.

PNGs are for viewing and sharing the pieces.

Also save the source image and a note with the date and address of the online file.

The ten-minute practice is the final check, after the pages have been made.

Set aside eight to twelve hours for the full course and assembly work.

If a piece is missing, leave the delivery marked as pending.

Do not confuse the reference kit with a set you created in Figma.

Álvaro keeps the editable copy with the note so he can continue later.

3Check the decision against its use

Check the four PNGs, .fig copy, source image, and project note.

Álvaro checks the worksheet: file—a .fig copy, source image, and note with date and address.