Enrol to start learning
Reading is open to everyone. Enrolling is free, and it is what unlocks the audio lessons, practice tests and progress tracking.
5.1. Importing and Organizing Source Files
Interactive Audio Lesson
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
Today, we're going to discuss how to start bringing our physical sketches into the digital world. What do you think is the first step in this process?
I guess we need to scan them?
Exactly! We should scan or export our sketches at a resolution of 300 dpi. This ensures that our images are high quality when we import them into Figma or Adobe Illustrator.
So, does this high resolution affect how they look in the software?
Absolutely! Higher resolution gives us clearer images to work on, especially when tracing. Can anyone tell me how we can import these images once they are scanned?
In Figma, you go to File and choose Place image, right?
Correct! In Figma, we place an image and we should also set the opacity to around 20% to help us easily trace over it. Let’s remember this with the acronym 'TIP' - 'Trace, Import, and Protect' our sketches.
That will help me remember! So what about Illustrator?
In Illustrator, it's quite similar. You can use File → Place, embed the image, and then reduce its opacity. The goal is to have a clear guide for tracing. Now, can anyone tell me why it's essential to have these guides?
To keep our designs consistent, right?
Exactly! Consistency is key in design. Let's summarize: we scan at a high resolution, use low opacity for guidance, and always structure our layers clearly.
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
Now that we've imported our sketches, let’s talk about layer structuring. Why do you think it's important to organize layers properly?
Maybe to find things easier later on?
Correct! An organized layer structure makes it easier to manage your designs. Can anyone suggest what names we might use for organizing layers?
We could have names like Wireframe, Layout, and Typography.
Exactly! Use clear group names like 00_Wireframe, 01_Layout, 02_Assets, 03_Typography, and 04_Interactions. This not only helps you find elements quickly but also improves collaboration among team members.
How does this help during collaboration?
"Great question! An organized system allows everyone to understand the purpose of each layer and avoids confusion. Let’s commit this to memory with the acronym 'LIFT' - 'Layer It For Teamwork'.
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free accountLet’s discuss how our organizational structure influences our overall workflow. How does starting with a strong organization help us in the long run?
It makes everything smoother and saves time!
Absolutely! Time saved on finding layers means more time for creativity. Can anyone summarize how we structure our layers one more time?
We set layer groups for wireframes, layouts, assets, typography, and interactions.
Perfect! A structured approach leads to clear communication among team members and creates a smoother design process. Can we remember that with the phrase, 'Order Creates Clarity' in our design projects?
This is helpful! I’ll make sure to organize everything when I start designing.
Fantastic! Remember, your project’s success often hinges on planning and structure. Let’s keep practicing these concepts.
Overview
Short Summary
This section covers the techniques for importing and organizing source files for design projects, ensuring the efficient workflow from wireframes to digital prototypes.
Medium Summary
In this section, you will learn how to import wireframe sketches into design software like Figma and Illustrator, set up a structured layer organization, and effectively manage your project files for optimal design efficiency. Key practices include exporting paper sketches, adjusting image opacities, and structuring layer groups.
Detailed Summary
Importing and Organizing Source Files
In this section, we explore essential techniques for importing and organizing source files as part of the design workflow, primarily focusing on Figma and Adobe Illustrator. Proper organization ensures that designers can work efficiently and maintain clarity throughout the prototyping process. Key practices include:
Scanning and Exporting Sources
When transitioning from physical sketches to digital prototypes, the initial step involves scanning or exporting your paper sketches at a high resolution (300 dpi). This ensures quality when placed into design software.
File Placement in Software
- Figma: Import images via
File → Place image…, set opacity to 20%, and lock the layer for subsequent tracing and editing. - Adobe Illustrator: Use
File → Place…, embed the image, adjust the opacity, and use it as a guiding trace for digital design.
Layer Structuring
To keep projects organized, create structured layer groups in your design file. Suggested layer group names include:
00_Wireframe01_Layout02_Assets03_Typography04_Interactions
Such structured naming conventions facilitate better collaboration among team members, ensuring that everyone understands the hierarchy and purpose of each layer. Overall, this section provides the fundamental practices needed to successfully import and organize your design assets, laying a strong foundation for the subsequent design processes.
Audio Book
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account● Scanning/Exporting: Export paper sketches as 300 dpi PNG/PDF.
Detailed Explanation
The first step in the process of importing and organizing source files is to take your physical sketches and convert them into a digital format. This is done by scanning or exporting your images at a resolution of 300 dpi (dots per inch). A higher DPI ensures that your images retain their quality and detail, which is especially important when you want to enlarge or work with them in software like Figma or Illustrator.
Examples & Analogies
Think of this step like taking a high-quality photograph of a painting. If the photograph is too blurry or pixelated, you won't be able to see the fine details when you display the image, just like low DPI sketches would not display well in your design software.
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account● Placement: ○ Figma: File → Place image…; set opacity to 20% and lock layer. ○ Illustrator: File → Place…; embed and reduce opacity to guide traces.
Detailed Explanation
Once you have your sketches in digital format, you need to import them into your design software. In Figma, you can do this by selecting 'File' and then 'Place image...', followed by adjusting the image's opacity to 20%, which helps you trace over it. Locking the layer prevents any accidental changes to the sketch while you work. In Illustrator, the process is similar: after importing the image, reduce its opacity and embed it so that it acts as a guide for your tracing.
Examples & Analogies
Imagine using a lightbox to trace an image onto another sheet of paper. By reducing the opacity of your original sketch, it's like placing the original image underneath to guide your drawing, ensuring you follow the outlines and details accurately.
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account● Layer Structuring: ○ Create layer groups: 00_Wireframe, 01_Layout, 02_Assets, 03_Typography, 04_Interactions.
Detailed Explanation
Organizing your design files using layers is crucial for maintaining clarity and ease of access. You should create categorized groups for each aspect of your design. For instance, labeling layers as '00_Wireframe' for the initial layout sketches, '01_Layout' for the structural elements, '02_Assets' for images and icons, '03_Typography' for text styles, and '04_Interactions' for buttons and interactive elements helps manage complexity in your file. This organization promotes a more efficient workflow and makes it easier to locate elements later.
Examples & Analogies
Consider a kitchen where each ingredient is stored in neatly labeled jars. When you want to cook, you can quickly find the spices or vegetables you need without searching through clutter. Layer structuring works similarly: it keeps your design organized, so finding and editing specific elements is straightforward.
--
Key Concepts
Core takeaways and short definitions to help you quickly recall the key ideas from this section.
Scanning: The process of digitizing sketches for digital use.
Opacity: The transparency level of a layer, aiding in tracing designs.
Layer Groups: Organized sections in design files that enhance workflow.
Version Control: Effective methods for managing design iterations.
Examples
Memory Aids
Interactive tools to help you remember key concepts
Stories
Flash Cards
Glossary
Scanning
The process of digitizing physical sketches by capturing them at a certain resolution, typically 300 dpi for high quality.
Layer Groups
Organized collections of layers in design software to manage and navigate design elements efficiently.
Opacity
The level of transparency of a layer or image, controlling how much of the underlying design is visible.
Version Control
A system that manages changes to design files, enabling multiple iterations and updates while maintaining access to previous versions.