Skip to content

Figma

Jump to bottom
Joni Roine edited this page Jan 9, 2025 · 1 revision

Figma: Alt Zone Design Workspace 🎨

Here’s the link to the Figma file:
Alt Zone Figma File

🗂️ Organization in Figma

Our Figma file is divided into distinct pages for:

  • Design System
  • Web Pages
  • Mobile Game

Guidelines for Working in Figma:

  • Stay Organized: Work in your designated area and keep your designs neat. This ensures others can easily pick up your work if needed.
  • Primary Language: Use English for communication. The content language for the website, however, is Finnish.

🛠️ Design System

Our Design System includes the foundational styles to maintain consistency across the website and game. Familiarize yourself with the system, and feel free to update it when necessary. If you’re unsure how to use or update it, ask your teammates for guidance.

Key Elements in the Design System:

  • Typography: Defined font styles and sizes.
  • Colors: Approved palette for the project.
  • Spacing: Consistent margins and padding.
  • Corner Radius: Standardized rounding for elements.
  • Line Styles: Borders and dividers.
  • Shadows: Approved shadow styles for depth and emphasis.

✨ Essential Tools and Features

  1. Assets → Components

    • Use reusable components for efficiency. Modifying the main component automatically updates all instances.

  2. Grid Styles

    • Keep designs aligned using grid styles. Refer to the screen space usage guide in the design system for clarity.

  3. Autolayout

    • Utilize autolayout to ensure dynamic adaptation and consistent spacing, reducing manual adjustments.

💬 Need Help?

If you’re unsure about anything, feel free to ask questions or request guidance from your UX/UI teammates. You can also leave comments or feedback in the Discord ui-ux-höpinää channel (in Finnish or English).

Let’s build something amazing together! 🚀

Clone this wiki locally