4.1. File Organization

Create a root folder:

ProjectName_Prototypes/ ├── assets/ │ ├── images/ │ ├── icons/ │ └── logos/ ├── source_wireframes/ ├── figma_files/ └── exports/

To begin organizing your project effectively, you create a root folder named after your project, such as 'ProjectName_Prototypes.' Within this folder, you need to set up a clear hierarchy of subfolders. These subfolders include:

• assets/: This is where you'll store all graphic resources like images, icons, and logos. It helps maintain a neat collection of all visual assets you will use in your prototype.
• source_wireframes/: Here, you will keep your raw wireframes, which are foundational blueprints of your design.
• figma_files/: This folder is dedicated to your Figma files, where the actual design work will take place.
• exports/: Finally, the exports folder will be used to store any assets you've exported from your design tools, like images in PNG or JPG format.

Think of the root folder as the main office of a company. Just like a company needs a well-organized office to find documents and communicate effectively, your project needs a clear folder structure. Each subfolder acts like different departments in an office: 'assets' is where creative teams (like designers) keep their materials, 'source_wireframes' is like the planning department with initial drafts, 'figma_files' is the workspace where the actual design happens, and 'exports' is where finalized products are stored.

○ In Figma: Use Versions (File → Show Version History) and name snapshots (e.g., “Initial Import – 2025-06-09”). ○ In Illustrator: Save incremental files: MyDesign_v1.ai, MyDesign_v1.1.ai, etc.

Maintaining version control is essential to keep track of changes and allow for easy rollbacks to previous versions if needed. In Figma, you can use the 'Versions' feature under 'File' to view the history of your document. You should also name important snapshots, for example, 'Initial Import – 2025-06-09,' to signify what this version represents. In Illustrator, the practice involves saving your design incrementally, such as ‘MyDesign_v1.ai’ for the first version and ‘MyDesign_v1.1.ai’ after making updates. This helps you keep a clear log of your progress and revert back to earlier versions if necessary.

Imagine you’re writing a book. You would want to save different drafts to track changes and revert to previous versions if required. Every time you make significant updates, you could save it with a new version number. This way, if you realize a change wasn’t beneficial, you can go back to an older draft. It’s similar to how version control works in design files.

○ Install and configure plugins: ■ Color Contrast Checker (Stark) ■ Content Reel (dummy text/images) ■ Lorem ipsum Generator ○ Set up shared libraries (fonts, colors, icons).

Before diving into design, it’s crucial to ensure your tools are properly set up to enhance your workflow. This includes installing useful plugins that can aid your design process. For instance, 'Stark' is a Color Contrast Checker that helps ensure your text is legible against its background, promoting accessibility. 'Content Reel' allows you to easily drag and drop dummy text and images into your designs, speeding up the prototyping process. A 'Lorem Ipsum Generator' is also helpful for filling text spaces without worrying about the actual content. Additionally, creating shared libraries for your project’s fonts, colors, and icons ensures consistency across the design team, making collaboration smoother and faster.

Think of this preparation phase as a chef getting their kitchen ready before cooking. Just like a chef gathers all necessary ingredients and tools before starting to cook a meal, you, as a designer, need to ensure that you have all plugins installed and your design tools set up properly. This way, when you start working, everything is at your fingertips, and you can focus on creating instead of scrambling to find what you need.

--