Skip to main content

Day 5 SVG Editing and Design

Intro to Figma

Before we worked with Figjam as a planning tool, now we will be using Figma as a design tool.

What to expect from Figma

  • Figma is a UX focused design tool that specializes in vector Editing
  • It has less features than Inkscape or Adobe Illustrator because it’s meant for basic shape manipulations
    • Use Inkscape or Illustrator for advanced svg and vector editing work
    • Use Gimp or Adobe Photoshop for raster image editing work (rasters are images like pictures)
  • Figma is similar to Penpot or Adobe XD. They all have less path manipulation tools but feature prototyping and UI design focused tools

1. Figma Review

Materials

Basic Shapes and Tool walk through

  • Main tools are on the top left

Layout

  • Pages: Separate pages for content
  • Assets: Content shared between pages
  • Layers: Groups of content on pages

Shapes

  • ellipses
  • squares
  • lines
  • text

Details

  • Right side of the UI has all the details and specifics of each tool
    • color, alignment, object layers, fonts…
  • Also access your defaults here when you make them
  • Export can be found at the bottom of the right panel

2. Demo: Tracing with the Pen Tool

Materials

Activity: The Bezier Game!

  • Link to Game
    • In groups of 4 Try creating as many images as you can with the bezier tool
    • All vector design programs have a version of the pen tool that follows the same basic principles
  • 15 minutes
    • Take turns screen sharing and learn from one another
  • Debrief: each group show 1 aha moment that you had while working on this

3. Demo: Boolean operations

  • Boolean operations are used to manipulate objects.

    • Union: Union combines the selected shapes into a boolean group. If the objects overlap, the new shape’s outer path consists of the composite of its sublayers’ paths minus any segments that overlap. The stroke would then be applied to that outer path ignoring any path segments which overlap each other.
    • Subtract: Subtract is the opposite of Union. Subtract removes the area of a shape or set of shapes from a base shape. Only the bottom shape layer is solid, the rest are subtracted from it.
    • Intersect: Intersect creates a boolean group whose shape consists only of the overlapping parts of its sublayers.
    • Exclude: Exclude is the opposite of Intersect. Exclude shows only the areas of its sublayers that do not overlap.

  • Definitions from: Boolean Operations in Figma

Activity: Try Each Boolean

  • Search up simple logos and icons and try one of each
  • It can be helpful to divy up the roles among your team so each of you has experience with one and can guide the others a bit
  • Debrief: show an example of each boolean

Vector Design

  • Used for logo design (this is what we will be doing on Monday)
  • As well as UI design
  • This is a core skill in graphic design and one that developers should cultivate some working knowledge of
  • SVG is a vector file format that we can use directly in our code. We will start Monday morning with a look at the code side of vectors, so it’s good to get some eperience working with them over the weekend

Design Pictionary

  • 30 Minutes
  • Submit an svg or png and the link to your design space from the game by 3pm today (if you used multiple files, than you only need to submit your favourite). 80% class submission will mean late start on Monday

Homework

  • Find a logo design tutorial on youtube and do the design in it
    • We will be reviewing these on monday
    • Logos by Nick has a lot of great beginner tutorials. He is using inkscape, but many of the tutorials can also be done with Figma. try translating based on your knowedge of what Figma can do
    • Submissions made before Sunday at 11:59 will get a bonus point added to their next assignment
      • Submission Includes:
        • Viewable link to your design file in Figma
        • Link to the tutorial that you worked off of
        • does not need to be perfect or entirely finished