Creating a new Figma file is the first practical step in starting a UI/UX design project. A Figma Design file provides a collaborative workspace where designers can create wireframes, user interfaces, components, prototypes, design systems, and complete product designs. Figma allows users to create files in Drafts and, when they have the required edit access, inside team folders.
For structured learning and professional Figma training, visit JustAcademy Figma Training or Register for Figma Course Demo.
A Figma file is a cloud-based design workspace used to create and organize digital design work. A Figma Design file can contain multiple pages, frames, layers, components, styles, variables, prototypes, and other design assets.
Unlike a traditional design file stored only on a local computer, Figma files are designed for cloud-based collaboration. Multiple team members can work on the same file according to their permissions.
A new file provides a clean workspace where you can start a design project from scratch or build upon reusable resources.
Before creating a new Figma Design file, you should have a Figma account and access to Figma's file browser. A Figma account can create files in Drafts. Creating files in a team requires the appropriate edit access.
Drafts are a personal workspace where you can create and experiment with files. They are useful when beginning a project because you can create a design without first placing it into a team folder.
Drafts can be treated like a personal sketchbook for exploring design ideas, layouts, components, and prototypes.
Figma Account
↓
File Browser
↓
Drafts
↓
Create New Design File
↓
Figma Design Editor
↓
Design / Prototype / Collaborate
The most common method is to create a new design file from the Drafts area of the Figma file browser.
Figma provides a shortcut for quickly creating a new Figma Design file. You can type figma.new into the browser address bar.
Browser Address Bar
↓
figma.new
↓
Figma Design File
↓
Design Editor
Professional projects are often organized inside team folders. If you have the required edit access, you can create a new design file directly inside a team folder.
Creating the file in the correct folder from the beginning can make project management easier for the entire team.
| Feature | Draft File | Team File |
|---|---|---|
| Purpose | Personal exploration and development | Team or project collaboration |
| Location | Drafts | Team folder |
| Collaboration | Can be shared with invited people | Designed for team access |
| Permissions | Controlled through sharing | Controlled through file/folder/team permissions |
| Best Use | Learning, experiments, early ideas | Production projects |
After creating a new design file, Figma opens the design editor. The editor provides the main workspace for creating and editing UI designs.
+------------------------------------------------------+
| Top Navigation |
+------------------------------------------------------+
| Toolbar |
+----------+----------------------------+---------------+
| Left | | Right |
| Sidebar | Canvas | Properties |
| | | Panel |
+----------+----------------------------+---------------+
The toolbar contains frequently used design tools.
The exact toolbar layout may change as Figma updates its interface, but its primary purpose is to provide quick access to design and editing tools.
The left sidebar helps organize the structure of your file.
The Layers panel is especially important because it shows the hierarchy of objects inside the current page.
The canvas is the main design area where you create frames, shapes, text, images, components, and other design elements.
You can zoom, pan, select objects, move objects, resize objects, and create complete interface layouts on the canvas.
The right sidebar displays properties and settings related to the selected object or the current design context.
New Figma files are initially given a default name such as Untitled. Renaming the file immediately is a good professional practice because descriptive names make projects easier to identify and search.
Project Name + Platform + Purpose + Version
Example:
Food Delivery App - Mobile UI - V1
Admin Dashboard - Web UI - V2
Portfolio Website - Responsive UI - Final
Good file naming helps designers, developers, project managers, and clients identify the correct design quickly.
A Figma Design file can contain multiple pages. Pages allow you to separate different parts of a project within the same file.
Food Delivery App
│
├── Cover
├── Research
├── Wireframes
├── UI Design
├── Components
├── Prototype
└── Handoff
Pages keep large design files organized. Instead of placing every screen and component on one large canvas, related work can be separated into logical areas.
A frame is one of the most important objects in Figma. Frames can represent screens, containers, sections, cards, layouts, or reusable interface areas.
New File
↓
Create Page
↓
Create Frame
↓
Add UI Elements
↓
Apply Layout
↓
Create Components
↓
Prototype
The frame size should match the target platform or design requirement.
| Project | Typical Starting Frame |
|---|---|
| Mobile App | Mobile device frame |
| Desktop Website | Desktop or web frame |
| Tablet App | Tablet frame |
| Dashboard | Desktop/web frame |
| Landing Page | Desktop web frame |
| Responsive Design | Multiple platform frames |
The exact dimensions should be selected according to the target device, design specification, or project requirements rather than relying on one universal size.
The Text tool allows you to add headings, labels, paragraphs, buttons, navigation items, and other textual content.
Page
└── Login Screen
├── Logo
├── Heading
├── Email Label
├── Email Input
├── Password Input
└── Login Button
Shapes are commonly used to create cards, buttons, backgrounds, containers, icons, and other UI elements.
After creating a file, you can build a simple interface by combining frames, text, shapes, images, and components.
Login Screen
│
├── Logo
├── Welcome Heading
├── Email Input
├── Password Input
├── Forgot Password
├── Login Button
└── Create Account Link
When creating a website project, organize the file around the website structure.
Website Project
│
├── Cover
├── Sitemap
├── Wireframes
├── Desktop UI
├── Tablet UI
├── Mobile UI
├── Components
└── Prototype
For a mobile application, create frames for the target device and organize screens according to the application flow.
Mobile App
│
├── Splash Screen
├── Onboarding
├── Login
├── Home
├── Search
├── Details
├── Cart
├── Checkout
└── Profile
Dashboards typically contain navigation, statistics, charts, tables, filters, and user controls.
Dashboard
│
├── Sidebar
├── Header
├── Statistics Cards
├── Chart Section
├── Data Table
├── Filters
└── User Profile
A new Figma file can also be used to establish a design system containing reusable components and design assets.
Design System
│
├── Foundations
│ ├── Colors
│ ├── Typography
│ ├── Spacing
│ └── Effects
├── Components
│ ├── Buttons
│ ├── Inputs
│ ├── Cards
│ ├── Navigation
│ └── Modals
└── Patterns
Auto Layout helps create flexible layouts where spacing, sizing, and positioning can respond to changes in content.
Button
│
├── Icon
└── Text
↓
Auto Layout
↓
Consistent Padding
↓
Flexible Button Size
Auto Layout is particularly useful for buttons, cards, navigation bars, lists, forms, and responsive interface structures.
Components allow designers to create reusable UI elements. Instead of rebuilding the same button or input field repeatedly, a component can be reused throughout the file.
Once screens have been designed, prototype connections can be created to simulate user interactions.
Login Screen
↓ Click Login
Home Screen
↓ Click Product
Product Details
↓ Click Add to Cart
Cart
↓ Click Checkout
Checkout Screen
Prototype connections help demonstrate how the final product may behave without writing application code.
One of Figma's major advantages is collaborative design. A file can be shared with other people according to the permissions available to them.
The Share functionality allows you to invite people or share access to a resource. Permissions determine what collaborators can do.
| Permission | Purpose |
|---|---|
| Can View | View and inspect available information according to access |
| Can Comment | Provide feedback through comments |
| Can Edit | Modify the file according to granted access |
Always verify permissions before sharing confidential or production design work.
Figma provides version history features that help teams review changes made to a file. Versioning is useful when working on large projects because design changes can be tracked and important versions can be identified.
Good organization becomes increasingly important as a file grows.
Project File
│
├── Cover
├── Documentation
├── Research
├── Wireframes
├── UI Design
├── Components
├── Prototype
└── Handoff
Figma uses folders to organize files. Folders can help separate projects, clients, products, departments, or design stages.
Design Team
│
├── Website Projects
│ ├── Client A
│ └── Client B
├── Mobile Projects
│ ├── Food App
│ └── Banking App
└── Design System
Not every project should be contained in a single file. Large projects can be divided into multiple files when this makes collaboration and maintenance easier.
| File | Purpose |
|---|---|
| Research | User research and findings |
| Wireframes | Early layouts |
| UI Design | High-fidelity screens |
| Design System | Reusable assets |
| Prototype | Interactive flows |
| Handoff | Developer-ready specifications |
As the number of files grows, Figma's file browser search can help locate files, folders, people, and other accessible resources. Descriptive file names make this process easier.
A file initially created in Drafts can later be moved to an appropriate folder when the project becomes more structured.
Drafts
↓
Project Review
↓
Approved Project Folder
↓
Team Collaboration
Before moving a file, verify that you have the required permissions in the destination and understand how folder access may affect the people who can access the file.
A new project may not always begin from an empty canvas. Depending on the supported file type and workflow, existing resources can be imported or reused to accelerate design work.
| Approach | Best Use |
|---|---|
| Start from Scratch | New concepts and custom designs |
| Use Components | Consistent UI development |
| Use Libraries | Shared design systems |
| Use Templates | Fast project initialization |
| Import Existing Assets | Continuing an existing project |
Create a new Figma Design file and rename it Login Screen UI.
Create a page named Login.
Create a mobile or desktop frame according to the project requirement.
Login Screen
│
├── Logo
├── Welcome Text
├── Email Input
├── Password Input
├── Forgot Password
├── Login Button
└── Sign Up Link
Use Auto Layout for the form elements to maintain consistent spacing.
Connect the Login button to the Home screen.
Food Delivery App
│
├── Cover
├── Wireframes
├── Onboarding
├── Authentication
├── Home
├── Restaurant Details
├── Cart
├── Checkout
├── Order Tracking
├── Components
└── Prototype
Create a new Figma file called Personal Portfolio Website.
Portfolio
│
├── Home
├── About
├── Skills
├── Projects
├── Experience
├── Testimonials
└── Contact
Create desktop and mobile frames to explore responsive layouts.
A dashboard project is an excellent exercise for learning layout, components, grids, cards, tables, and responsive behavior.
Admin Dashboard
│
├── Sidebar
├── Header
├── Statistics
├── Revenue Chart
├── Orders Table
├── User Table
└── Settings
A professional designer should not immediately start placing random elements on the canvas. A structured workflow improves consistency and reduces rework.
Understand Requirement
↓
Create Figma File
↓
Rename File
↓
Create Pages
↓
Create Frames
↓
Create Wireframes
↓
Define Design System
↓
Create Components
↓
Build UI
↓
Create Prototype
↓
Review
↓
Share
↓
Developer Handoff
| Mistake | Problem | Better Approach |
|---|---|---|
| Leaving file as Untitled | Hard to identify later | Rename immediately |
| Everything on one page | File becomes difficult to navigate | Use logical pages |
| Random layer names | Developer handoff becomes difficult | Use meaningful names |
| No components | Repeated UI work | Create reusable components |
| No Auto Layout | Layouts become harder to maintain | Use Auto Layout where suitable |
| Incorrect sharing | Unwanted access or editing | Check permissions |
| Too many duplicate files | Team confusion | Maintain organized folders and naming |
A Figma file is a cloud-based workspace used to create, organize, collaborate on, and prototype digital designs.
You can create one from Drafts using the create option or use the figma.new shortcut.
Drafts are a personal workspace where users can create and experiment with files before organizing them into shared project locations.
Yes. Users with the required edit access can create files in appropriate team folders.
Descriptive names make files easier to identify, search, organize, and collaborate on.
A frame is a container used to organize design elements and can represent screens, sections, or other layout structures.
Pages help separate different areas of a project such as research, wireframes, UI designs, components, and prototypes.
Auto Layout helps create flexible layouts that respond to changes in content, spacing, and sizing.
Components provide reusable UI elements that help maintain consistency and reduce repetitive design work.
Permissions determine what collaborators can do with a file, such as viewing, commenting, or editing.
| Topic | Key Point |
|---|---|
| Figma File | Cloud-based design workspace |
| Drafts | Personal workspace for creating files |
| figma.new | Quick method for creating a new Figma Design file |
| Team Folder | Organized location for collaborative projects |
| Pages | Organize project sections |
| Frames | Containers for layouts and screens |
| Components | Reusable UI elements |
| Auto Layout | Flexible and responsive layout structure |
| Prototype | Interactive representation of user flows |
| Sharing | Controls collaboration and access |
Creating New File
↓
Figma Interface
↓
Frames
↓
Layers
↓
Shapes & Text
↓
Typography
↓
Colors
↓
Auto Layout
↓
Components
↓
Variants
↓
Variables
↓
Design Systems
↓
Prototyping
↓
Responsive Design
↓
Developer Handoff
↓
Real-World Projects
To learn Figma from fundamentals through practical UI/UX workflows, explore JustAcademy Figma Training.
If you want to understand the course structure and discuss your learning requirements, you can Register for Figma Course Demo.
Creating a new Figma file is the foundation of a Figma design workflow. A professional designer should not only know how to open a new file but should also know how to organize pages, create frames, name layers, build reusable components, apply Auto Layout, create prototypes, manage folders, and share files with appropriate permissions.
A well-organized Figma file makes design work easier to maintain, review, collaborate on, prototype, and hand off to developers. After mastering new file creation, the next important skills are frames, layers, Auto Layout, components, variants, variables, prototyping, responsive design, design systems, and developer handoff.
