Design+Code logo

Quick links

Suggested search

illustration

Fill, Stroke, & Advanced Stroke

icon

Add to favorites

Get to know more about the Fill and various Stroke options in Figma

icon

Figma Handbook

1

The Figma Design Tool

0:54

2

The Editor in Figma

1:17

3

Basic Tools

2:14

4

Position, Size, Rotation, & Corner Radius properties

1:27

5

Color Styles

1:13

6

Masks

1:47

7

Dark Mode with Selection Colors

1:17

8

Gradients

1:36

9

Creating Backgrounds

2:37

10

Blending Modes

2:02

11

Alignment, Distribution, & Tidy up Properties

1:24

12

Union and Corner Radius

2:53

13

Shadow and Blur Effects

1:48

14

Using Images

2:00

15

Fill, Stroke, & Advanced Stroke

3:21

16

Text Properties and Styles

1:37

17

Google Fonts and Custom Fonts

1:13

18

Accessibility

19

Responsive Design

3:07

20

Constraints

1:11

21

Layout Grid

2:00

22

Auto Layout in Figma

8:17

23

Vector Mode

0:55

24

Vector Network

1:19

25

Perspective Mockups

2:00

26

3D Mockups

1:20

27

Using Illustrations in Design

2:03

28

Booleans

2:24

29

Icon Design

1:48

30

Components

1:50

31

Team Library

2:14

32

Creating Confetti

1:59

33

Looper Shape Duplication

1:41

34

Apple Watch Ring

2:23

35

Exporting Assets in Figma

1:39

36

Exporting CSS Code

1:04

37

Designing with Data

1:57

38

Prototyping

2:25

39

Version History

1:25

40

Multiplayer, Commenting, & Previews

1:36

41

Variants

5:39

42

Interactive Components

5:40

43

UIKits

4:47

44

Plugins

5:47

45

Blob Background

4:45

46

Wave Background

6:46

47

3D Shapes

12:27

48

Parallax Prototyping in Figma

7:52

49

3D UI Perspective Design

7:16

50

Glass Icon

9:16

51

Crystal Ball with Water Effect Animation

12:54

52

Design and code a line animation with letters

29:38

53

Futuristic line animation

19:30

54

Import from Adobe Illustrator to Figma

3:16

55

Create an Illustration in Figma

4:07

56

Remove BG plugin

2:27

57

Circular Lines Advanced Stroke

3:27

58

Publish Design to Community

4:49

59

Turn Image into Vector

3:11

60

Prototype with Scrolling Content

3:42

61

Hug Content and Resizing

2:04

62

Advanced Auto Layout

4:13

63

Circular Text on Path

5:57

64

Mirror Prototype

2:39

65

Sticky Nav and Tab Bar Prototyping

4:37

66

Video in Figma Prototype

5:04

67

Mesh Gradients

3:03

68

Figma Sections

3:53

69

Unsplash Stock Photos

2:07

70

Angular Gradient

4:17

71

Radial Gradient

5:11

72

After Delay Animation Prototyping

3:14

73

UI Wireframe

2:53

74

Lottie Animations

3:55

75

Design Sign Up Screen

6:42

76

Content Generator

2:53

77

Design Lint Missing Style

2:36

78

Slice Tool

2:04

79

Adaptive Layout with Breakpoints

6:25

80

Chart Designs

4:51

81

Design Modals

4:08

82

Batch Rename

2:35

83

Design Onboarding Screen

2:28

84

Animated Button Prototype

3:06

85

Smart Selection

2:15

86

Component Properties

4:37

87

RedLines

2:54

88

Interactive Calendar

7:46

89

Measure Distance

3:33

90

Variable Fonts

2:51

91

AI Plugins

6:16

92

Text Animation

3:11

93

Resize Layers

2:36

94

View Layer Outlines

2:23

95

Prototype Connections

2:38

96

Export SVG Files and Code

2:47

97

3D Illustrations

4:14

98

UI Placeholder

2:38

99

Dark Mode Switch

4:23

100

Dev Mode

6:26

101

Dark Mode Variables

10:04

102

Figma to HTML

10:51

The Fill option determines the color or pattern that is applied to the inside of an object. The Stroke option determines the color, thickness, and style of the line that is drawn around the object. The Advanced Stroke option allows for further customization of the stroke, such as setting the corner radius and end caps.

These options can be accessed through the Properties panel on the right-hand side of the Figma interface. By using the Fill, Stroke, and Advanced Stroke options, you can create a wide range of visual effects and styles for your designs.

Fill

In the Figma editor, the color panel is named as 'Fill', and it's located on the Properties Panel on the right side of the editor.

Let's create a Rectangle shape by selecting the Rectangle tool (R). Then you'll see the Color panel is activated and the shape is filled with gray color.

1

There are 4 main sections to notice on the Color panel.

  1. Color Value: You can input any #hex color values into the input field. Or you can click on the color icon to open the color palette to select colors manually.
  2. Transparency: You can increase/decrease the transparency of your shape by increasing/decreasing the percentage. 100% transparency means the shape is fully visible, and 0% means it is fully invisible.
  3. Activate/deactivate Fill: You can activate/deactivate your fill color by clicking the Eye icon next to the transparency value. Clicking on the Minus (-) icon will remove the fill, and clicking on the Plus (+) icon will add another fill on top of the current fill color.
  4. Color Style: You can save any color as a Style by clicking the four dots ': :' icon, and reuse it for your next design. We talk more about Color Styles in our Color Styles in Figma chapter.

2

Paints in Figma

In Figma, paints can be colors, gradients, or images. The Color picker can be used to apply paints to fills and strokes.

Paint Types

There are 3 types of paints you can apply to your Figma:

  1. Solid: This is the most basic type of paint, and it will cover the entire surface.
  2. Gradients: choose from four different gradients:

    • Linear (gradient): a progressive transition between two colors on a straight line. You can choose the angle of the line and the length
    • Radial (gradient): a circle gradient where the color starts off in the center and fades out along the edge. This could be another color, or a fade to transparent.
    • Diamond (gradient): is a shape with four points and a gradient between the points. The gradient can be adjusted on both the x and y axis, allowing you to create smooth transitions between colors
    • Angular (gradient): a gradient clockwise. If you use the starting color and end color of the gradient, you can adjust the location of both colors in the gradient. You can also create a softer or harsher angle
  3. Image or GIF: a static image or animated GIF is a type of file that you can use to add images to your work.

Fill-20Gradients

Fill Gradients

Figma's gradient fill is a shape fill that gradually changes from one color to another across the surface of the shape. It can be a variation of one color as shown above, or a blending of two or more different colors to create stunning effects like the examples below.

Fill-20Gradients-202

Add Fill

The Fill Tool allows you to easily add fills to your text layers, frames and any vector objects. You can even add more than one fill to a single layer. This allows you to layer gradients over images, or apply blend modes to create unique effects.

  • To add a fill to a layer, you first select the layer(s) that you want to add the fill to
  • Next, in the Fill section of the right sidebar, click on the + icon to add a fill to the layer

Fill-20--20Add-20fill-201

  • Figma will add a default Solid fill with a hex value of C4C4C4. Click on the fill swatch to open the color picker
  • From the color picker, you can select a paint type (Solid, Image or Gradient), choose a color, and apply blend modes

Fill-20--20Add-20fill-202

  • Add another fill, this time linear
  • You can add 3 colors to your design. The first color is black with an opacity of 0%, the second is black with an opacity of 70%, and the third is black with an opacity of 80%.

Fill-20--20Add-20fill-203

  • To move the second color onto the first color, simply click and drag with your mouse.
  • Add text to the image.

Fill-20--20Add-20fill-204

Fill Image

You can quickly apply an image to an existing shape by tapping the color picker. You will need to have the image downloaded to your computer and uploaded

Note: Only JPEG, PNG, TIFF or HEIC images are accepted.

Upload an image

  • Choose the shape you want to use from our collection of shapes, or create a new one by drawing it on the canvas.
  • Click the Fill swatch in the right sidebar to open the color picker.
  • To fill an image, select the Fill mode and then click on Image from the options.
  • A placeholder image of black and white checks will be applied to the shape. Click the Choose image  button in the preview:

Fill-20Image

Replace Image Fills

Replacing an image fill is easy!

If you have an image applied to a shape as a fill, you can replace it with a new image. This will keep any fill mode settings you've applied, including any cropping or positioning. There are a few ways to do this:

  • Drag the image file you want to fill over the image preview in the Fill panel.

Fill-20Image-202

  • Drag the image file over the Fill in the right sidebar:

Fill-20Image-203

**Add Video to Prototypes Using Fill**

If you're building a prototype, then you probably want to include video. Adding video to your prototypes can help you replicate the experience your users would have in a site or app with video playback or previews.

Types of Video in Prototype:

  • Should be in mp4 format
  • Cannot exceed 30MB in size
  • Are shape fills and behave as such
  • Are not currently supported in the Figma mobile app

Add Video to Any Shape

Similar to images, video can be added to any shape as a fill as long as the video matches the size of that shape.

Fish-20for-20notion(25)

How to Insert Video

First thing, you need to upload a mp4 video format. After this, you can add them to any vector or shape.

Here's a list of ways to add a video prototype to design files:

  • Drag and drop video file from your computer into the canvas
  • Create a shape and applies the video as a fill (as in the example below)
  • Copy a video from another layer in the current file, or from another file
  • Paste any video from your clipboard into the canvas

2-3

The gray rectangle layer is the placeholder for the video.

Stroke

By default, the Stroke panel is also deactivated, and it's located next to the Fill panel. Click on the Plus (+) icon to add a stroke to your shape.

3

You can see a new color panel for stroke has appeared. You can set the color of the stroke by following same process we did for adding fill to the shape. Also, there are some other options in the next row.

  1. Stroke Size: You can set the stroke size by inputting any number. 1 means the stroke size is 1px all around the shape. Let's input 2, to set the stroke width to 2px.
  2. Align Stroke: By default, the Align Stroke is set as Inside. Click on the drop-down icon to change the alignment to Center or Outside of the shape. Inside means that the 2px stroke is set inside all areas. Outside means the stroke will be set outside of the 100px*100px shape. Center means the stroke will be added to the borderline - 1px all over the inside areas, and 1px all over the outside areas.
  3. Advanced Stroke: Click on the 3 dots (...) icon to open the Advanced Stroke panel.

4

Advanced Stroke

There are 4 different sections in the Advanced Stroke panel. Cap, Dashes, Join and Miter Angle.

Cap

Let's create a Line by Pressing 'L' on your keyboard. Press and hold Shift when dragging to make the line straight. Set the stroke width to 10px to see the differences better.

Now, open the Advanced Stroke panel by clicking the 3 dots (...) icon again and click on the drop-down menu to open different stroke Caps.

  1. None: By default, the Cap is set to None. When None is selected no additional style is added to the end of the line.
  2. Round: It creates a rounded cap on both the sides
  3. Square: It creates a squared cap to both sides of the end point. It looks the same as None
  4. Line Arrow: It makes arrows appear on both ends
  5. Triangle Arrow: It creates triangular arrows on both sides

You can set different types of caps by entering the Vector Mode. We describe more about Vector Mode in the Vector Mode in Figma chapter.

Select the line, and press 'Enter' on your keyboard. Now you can select a single point at a time, and set different types of Caps to different points.

5

Dashes

You can create dashed lines by inputting the dash-length and the distance between dashes. Let's enter 20, 10 into the input field, it will create dashed lines with 20px dashes, and 10px gaps.

6

Join

Different types of Joins define how two lines of a vector shape will join with each other. Let's create a Square with 100px width and height, input 10px stroke width, and set the Align Stroke to the Center or Outside. Changing the joins doesn't make any difference when Inside is selected.

There are 3 types of Joins.

  1. Miter: By default the join is set to Miter, and it makes the corners look sharp.
  2. Bevel: By selecting bevel the corners look flat and cut off.
  3. Round: By selecting Round the corners look rounded.

You can set different types of Joins by entering the Vector mode. We describe more about Vector Mode in the Vector Mode in Figma chapter.

Select the shape, and press 'Enter' on your keyboard. Now you can select a single point at a time, and set different types of Joins to different points.

7

Miter Angle

Miter Angle activates when you select the Miter Join, and it changes when you set the angle to 90° or more than 90°. By doing so, the joins will look like Bevel.

8

Use Stroke with Fill

Using the Stroke with Fill feature in Figma is a great way to add texture and definition to your designs. This feature allows you to add a stroke to a shape or text, while keeping the same color as the fill of the shape or text. This feature is great for adding a unique touch to logos, icons, and other graphics. You can also use it to create interesting effects on shapes, such as outlining or shading. The Stroke with Fill feature makes it easy to quickly add texture and detail to your designs.

  • Select the object you wish to add a stroke to. This could be a shape, text, or a combination of both.
  • In the right-hand panel, choose the Stroke option and select the Stroke with Fill option.
  • Adjust the stroke size and color to your preference. You can also choose to add a rounded or dashed stroke line.
  • If you want to add more definition to the shape, you can add a drop shadow or blur effect.

Fill-20-StrokeGradient-201

And you’re done! You’ve successfully added a stroke with fill to your design. With the Stroke with Fill feature in Figma, you can easily add texture

Fill-20-StrokeGradient-202

Copy & Paste Property

You can copy and paste properties between layers to reuse them. You can copy fill, stroke, and text properties.

To do this, first select the layer whose properties you want to copy. Then:

  • Click the Edit dropdown in the main menu bar and choose Copy Properties or right-click.

Paste-20property-201

  • Select the layer whose properties you want to paste into your selection, then click Edit > Paste Properties or right-click.

Paste-20property-202

Conclusion

Color plays the most prominent role in every design. By using different types of strokes as patterns, you can take your design to another level. In Figma it's super easy to add, customize and control the colors and strokes in your design project

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Using Images

READ NEXT

Text Properties and Styles

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Videos

Assets

ePub

Subtitles

1

The Figma Design Tool

Getting started with Figma as your design tool

0:54

2

The Editor in Figma

Getting familiar with the Figma interface

1:17

3

Basic Tools

Getting to know the tool panel in Figma

2:14

4

Position, Size, Rotation, & Corner Radius properties

Working with Position, Size, Rotation, & Corner Radius properties

1:27

5

Color Styles

Working with color styles on Figma

1:13

6

Masks

Using masks to clip content and compose your design in Figma

1:47

7

Dark Mode with Selection Colors

Learn to design and adapt for designs for Dark Mode with Selection Colors

1:17

8

Gradients

We'll walk through all the different ways to use gradients in your work, as well as techniques when creating them

1:36

9

Creating Backgrounds

Design backgrounds in Figma

2:37

10

Blending Modes

Learn to interesting techniques with Blending Modes

2:02

11

Alignment, Distribution, & Tidy up Properties

Exploring Alignment and Tidy up in Figma

1:24

12

Union and Corner Radius

Working on union and corner radius

2:53

13

Shadow and Blur Effects

Exploring ways to incorporate shadows and blur to your design

1:48

14

Using Images

Steps on how to use images in Figma

2:00

15

Fill, Stroke, & Advanced Stroke

Get to know more about the Fill and various Stroke options in Figma

3:21

16

Text Properties and Styles

Explore and learn about Figma's type properties

1:37

17

Google Fonts and Custom Fonts

Explore the differences between Google Fonts and custom fonts for your website

1:13

18

Accessibility

Exploring a11y in design

19

Responsive Design

Designing responsive layouts in Figma using Constraints and Auto Layout

3:07

20

Constraints

Working with Constraints in Figma

1:11

21

Layout Grid

Learn to design using grids, columns, rows and margins.

2:00

22

Auto Layout in Figma

Working with Auto Layout for responsive design

8:17

23

Vector Mode

Exploring vector mode to edit and customize vector shapes

0:55

24

Vector Network

Learn to use vector networks and design icons

1:19

25

Perspective Mockups

Use realistic mockups to present your designs

2:00

26

3D Mockups

Adding 3D mockups to design

1:20

27

Using Illustrations in Design

Incorporate illustrations into your design

2:03

28

Booleans

Using booleans to design icons

2:24

29

Icon Design

Learn how to design icons using the tools provided by Figma

1:48

30

Components

Make your design more reusable by using components.

1:50

31

Team Library

Publishing your design styles and components

2:14

32

Creating Confetti

Working with Confetti plugin

1:59

33

Looper Shape Duplication

Working with Looper Figma plugin

1:41

34

Apple Watch Ring

Creating apple watch ring in Figma

2:23

35

Exporting Assets in Figma

Learn about exporting assets in Figma for implementation

1:39

36

Exporting CSS Code

Working with CSS code on Figma

1:04

37

Designing with Data

Plugins to help you design with real content

1:57

38

Prototyping

Quickly create an entire flow for your app design in Figma

2:25

39

Version History

Working with version history on Figma

1:25

40

Multiplayer, Commenting, & Previews

Learn about collaboration & sharing with Figma

1:36

41

Variants

Combining similar components into variants

5:39

42

Interactive Components

Creating reusable interactions using interactive components

5:40

43

UIKits

Designing using UIKits in Figma

4:47

44

Plugins

Exploring and Designing using Plugins in Figma

5:47

45

Blob Background

Create a simple blob background in Figma

4:45

46

Wave Background

Create a wave design in Figma using the Bend tool and the Wave plugin

6:46

47

3D Shapes

Create 3D-looking shapes using vector tools in Figma

12:27

48

Parallax Prototyping in Figma

Learn how to create a parallax scrolling animation technique where the background and the foreground layers move at different speed

7:52

49

3D UI Perspective Design

Transforming your user interface with the power of three-dimensional perspective

7:16

50

Glass Icon

Learn how to design a creative icon using background blur

9:16

51

Crystal Ball with Water Effect Animation

Animate waves in a crystal ball using the prototyping tool

12:54

52

Design and code a line animation with letters

Learn how to animate lines using CSS in CodeSandbox

29:38

53

Futuristic line animation

Learn how to create a futuristic background with lines using the pen tool in Figma

19:30

54

Import from Adobe Illustrator to Figma

Best practices for importing an Illustrator file to Figma

3:16

55

Create an Illustration in Figma

Use the vector tool in Figma to create an illustration from scratch

4:07

56

Remove BG plugin

Remove an image background with the RemoveBG plugin in Figma

2:27

57

Circular Lines Advanced Stroke

Design a camera controller with clock lines in Figma

3:27

58

Publish Design to Community

Publishing design files in the Figma Community

4:49

59

Turn Image into Vector

Convert an image into vector in Figma

3:11

60

Prototype with Scrolling Content

Add vertical and horizontal scrolling on your Figma Prototype

3:42

61

Hug Content and Resizing

Learn how to choose the right resizing options including hug content, fixed width or height, fill container and text truncation

2:04

62

Advanced Auto Layout

Learn how to use spacing mode, canvas stacking, text baseline alignment, stroke values in advanced layout

4:13

63

Circular Text on Path

Make a circular text on path using ARC plugin in Figma

5:57

64

Mirror Prototype

View your prototypes on your mobile device using the Figma mobile app

2:39

65

Sticky Nav and Tab Bar Prototyping

How to fix the position with sticky Nav Bar and Tab Bar

4:37

66

Video in Figma Prototype

Apply a video as a fill using any vector network on your prototype

5:04

67

Mesh Gradients

Create beautiful and wave shaped gradients using shapes or the mesh gradient plugin in Figma

3:03

68

Figma Sections

Use sections in Figma to organize designs better and make it easier for collaboration

3:53

69

Unsplash Stock Photos

Insert beautiful images from Unsplash straight into your designs

2:07

70

Angular Gradient

Step-by-step guide to creating and customizing an angular gradient in Figma

4:17

71

Radial Gradient

Creating vibrant radial gradients in Figma for a professional design look

5:11

72

After Delay Animation Prototyping

The easiest way to animate anything on the web using simple after delay interaction in Figma

3:14

73

UI Wireframe

Use various tools and plugins to create a wireframe that helps you easily plan and design your user interface

2:53

74

Lottie Animations

Step-by-step guide to using Lottie animations in Figma to improve collaboration and enhance your designs

3:55

75

Design Sign Up Screen

Easily design a sign up screen in Figma for your app or website

6:42

76

Content Generator

Useful plugins that can help designers design with real content and save time

2:53

77

Design Lint Missing Style

Save time finding and fixing errors in your Figma designs with Design Lint

2:36

78

Slice Tool

Export your designs using the slice tool in Figma

2:04

79

Adaptive Layout with Breakpoints

Creating flexible and responsive web designs with adaptive layout and breakpoints

6:25

80

Chart Designs

Exploring the endless possibilities of chart designs for data visualization

4:51

81

Design Modals

How to design modals that enhance user interfaces

4:08

82

Batch Rename

Quickly and easily rename multiple files in Figma using the Batch Rename plugin

2:35

83

Design Onboarding Screen

Creating an engaging experience to drive user retention with onboarding design

2:28

84

Animated Button Prototype

How to create a dynamic interactive button

3:06

85

Smart Selection

Arrange layers more efficiently with smart selection

2:15

86

Component Properties

Reduce the number of variants in your design system by using component properties and editing them directly in the properties panel

4:37

87

RedLines

Measure distances and annotate your Figma designs before handoff with Redlines Figma plugin

2:54

88

Interactive Calendar

Learn how to use interactive components in Figma to create an interactive calendar with hover and clicked-on states

7:46

89

Measure Distance

Place your design elements in the right place with measure distance in Figma

3:33

90

Variable Fonts

Learn how to replace static fonts with the variable font version

2:51

91

AI Plugins

Enhancing design efficiency by exploring advanced AI tools in Figma to optimize your workflow

6:16

92

Text Animation

Create an impressive motion text animation using interactive component and after delay

3:11

93

Resize Layers

Resize layers using the scale tool

2:36

94

View Layer Outlines

Understanding and organizing your design with view layer outlines

2:23

95

Prototype Connections

Configure your prototypes so that anyone with view access can see the interactions

2:38

96

Export SVG Files and Code

Exporting your artwork as an SVG file allows you to easily embed it in your HTML and CSS code

2:47

97

3D Illustrations

Enhancing Project Design with 3D Illustrations

4:14

98

UI Placeholder

Insert a temporary element to visualize the design

2:38

99

Dark Mode Switch

Transform your design into dark mode in just one click

4:23

100

Dev Mode

Explore Figma's Dev Mode, your essential tool for simplifying design-to-code workflows

6:26

101

Dark Mode Variables

Learn how Figma's dark mode variable feature enhances design by allowing seamless transitions between themes

10:04

102

Figma to HTML

From Figma to Web: Simplifying HTML Export with Anima

10:51

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.