4. Preparatory Steps: Setting Up Your Workspace

Create a root folder: ProjectName_Prototypes/ ├── assets/ │ ├── images/ │ ├── icons/ │ └── logos/ ├── source_wireframes/ ├── figma_files/ └── exports/

Organizing your files before starting a project is crucial. By creating a root folder called 'ProjectName_Prototypes,' you ensure that all relevant materials are easily accessible and kept in one place. Inside this folder, you can create subfolders: one for 'assets' such as images, icons, and logos, another for 'source_wireframes' where your initial sketches will go, one for 'figma_files' for your design documents, and a final one for 'exports' where all your final outputs will be saved. This structure not only keeps everything orderly but also streamlines collaboration if you're working with a team.

Think of your project folder like a filing cabinet. If everything is scattered, it becomes frustrating to find what you need. By categorizing your documents into labeled folders (like 'invoices,' 'receipts,' and 'contracts'), you can quickly grab what you need without sifting through piles of papers.

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.

Version control is essential in design projects to track changes and revert to previous versions if necessary. In Figma, you can use the Version History feature to save snapshots of your designs with specific names that indicate what was changed and when. This makes it easier to organize your work and recall important milestones. Similarly, in Illustrator, saving your drawings as incremental files allows you to keep track of progress and backtrack if an error occurs. For example, a file named 'MyDesign_v1.1.ai' indicates updates have been made from the first version.

Imagine you are working on a book and frequently edit its chapters. If you save each version with a new date or chapter number, you can always go back to an earlier draft if you don't like the new changes. This is similar to having backups of your document in case you accidentally overwrite important sections.

Install and configure plugins:

• Color Contrast Checker (Stark)
• Content Reel (dummy text/images)
• Lorem ipsum Generator Set up shared libraries (fonts, colors, icons).

Preparing your tools involves installing necessary plugins that can enhance your design process. For example, the Color Contrast Checker helps you ensure that your design is accessible and easy to read for everyone. The Content Reel plugin allows you to use placeholder text and images, which can speed up your layout process without being distracted by actual content. Additionally, setting up shared libraries means you can easily access and apply consistent fonts, colors, and icons to your designs, helping maintain a cohesive look throughout the project.

Think about setting up your toolbox before starting a DIY project. If you have all the right tools at your disposal — like a hammer, nails, and tape measure — you will be able to work more efficiently on your project without constant searches for materials. Similarly, preparing your design tools ensures that you won’t waste time looking for resources when you're deep into the creative process.

--