Figma Process

Everything you need to know to successfully design for SPOTIO in Figma

Figma File Structure 

Guideline for how to create and structure a Figma design file.

  1. Naming the file
    • The title of the Figma File should include the name of the task the same as in the backlog list and the task number from Jira (example: SP-13213 Enhanced Leaderboards)
  1. Location of files in folders
    • In Progress – What we are currently working on
    • Done – All finished projects
    • Design System – All the DS files
  2. File Thumbnail
    • Link – link to the base file thumnail component in Figma
  3. asda
  4. sadas

    Figma Pages and Layers

    Guideline for how to structure your pages and layers inside a Figma design file.

    1. We should start working on the project by creating Pages: Design, Research, Local Comments, Old. These pages should appear in this order.
    3.  
    1. The Design page should have layers divided into “Web” and “Mobile”. When the project is finished, the layer status changes to “Ready for dev”.

    2. Research – on this website we place all materials that are helpful to us before and during work on the project. Research, screenshots from the application, inspirations, notes, maybe some links.
    3. Local Components – on this page we place the components that we need in a given project or, for example, to create a clickable prototype.
    4. Old – Here you find mockups, elements that we used for the final version of the project. Earlier versions of the project may also be found here.

    Figma layers

    Guideline for how to structure your layers inside a Figma design file.

    Figma project naming convention

    Guideline for how to name your projects in Figma. We don’t have to adhere to the stricter structures since these names are not going to be connected with the export assets’ names. 

    1. File name to include:
      1. JIRA ticket number: “SP-XXXXX”
      2. A name for the project/task that describes it
        1. This should match JIRA’s ticket title
      3. Examples:
        1. SP-11586 – Event and Task Configuration
        2. SP-11498 – Account Manager: Visit Plan & Visibility
    2. Layers naming
      1. For base components always use underscore symbol as prefix

    Figma export assets naming convention

    Guideline for how to export assets from Figma for the Dev team.

    1. We use the Camel Case with dashes and underlines
    2. File name to include:
      1. Object name e.g. Icon, Header

    Syntax

    1. Interactive States:
      1. Enabled
      2. Hover
      3. Pressed 
      4. Focused
      5. Selected (Active)
      6. Disabled
    2. Component States
      1. Collapsed
      2. Expanded

    Components

    1. Base Component
      1. Its name to include an underscore prefix
    2. Use “Variant” instead of default “Property 1”
    3. States
      1. Input Drop-Down Menus
        1. Collapsed
        2. Expanded
      2. Buttons
        1. Default
        2. Hover (Web only)
        3. Pressed
        4. Active/Focused
        5. Disabled