Lay of the land

Summary

This video tutorial from Bricks Maven introduces viewers to the layout and components of a Figma file. It covers the customizable cover page, quick navigation for free users, and the foundations section detailing typography, buttons, colors, and spacing. The video also explores basic building blocks, UI elements, and the alpha blocks with desktop and mobile versions. It concludes with an overview of local variables, styles, and the future addition of woomer block categories, offering a comprehensive guide to utilizing the Figma UI kit effectively.

Takeaways

• 📄 The video introduces the structure and contents of a Figma file, specifically the 'alpha figma UI kit'.
• 🏡 The cover page is the first page you see when you import the file, and it can be customized with background colors, images, and logos.
• 🗂️ There's a 'Quick Navigation' page designed to help free users navigate the file, as they are limited to three pages.
• 🎨 The 'Foundations' section serves as a visual style guide, including typography, buttons, colors, radius, and spacing.
• 🔢 'Basic building blocks' are pre-designed frames for canvas and sections to help users start building their layouts quickly.
• 📚 The 'UI elements' section contains basic UI components like intro sections, list components, and button combos.
• 🧩 'Alpha blocks' include a wide range of general block categories, all with both desktop and mobile versions.
• 📈 The 'Woomer block categories' are currently empty but will be updated with new blocks in the future.
• 🔑 'Local variables' can be found on the right panel under 'Design' and include template variables and general client setup.
• 🛠️ 'Extra Styles' include effect styles, grid style, and text styles for both desktop and mobile, with the mobile style soon to be replaced by Figma modes.

Q & A

What is the purpose of the cover page in the Figma file?

The cover page serves as an easily identifiable starting point for the file, allowing users to see the project or client's name and branding at a glance.

How can users customize the cover page in the Figma file?

Users can customize the cover page by adding a background color, images, their own logo, and changing the name and footer text through Figma tokens.

What is the function of the Quick Navigation page in the Figma file?

The Quick Navigation page assists free users in navigating through the file by providing direct access to the first three pages and other main components of the UI kit.

Why are the foundations separated into different pages in the Figma file?

The foundations, including typography, buttons, colors, radius, and spacing, are separated for a quick overview, making it easier for users to access and apply the visual style guide elements.

What is the significance of the basic building blocks in the Figma file?

Basic building blocks provide pre-tagged frames and sections that allow users to start building their designs with the correct variables without starting from scratch.

What UI elements are currently available in the Figma file?

The Figma file currently includes basic intro sections, list components, and button combos with various styles such as primary, outline, light, and link versions.

How can users find the general block categories in the Figma file?

Users can find the general block categories under the 'alpha blocks' section, where all familiar blocks are organized with both desktop and mobile versions.

What does the 'woomer block categories' section contain in the Figma file?

The 'woomer block categories' section is currently empty, with pages created and blocks to be added in a future update.

Where can users find and manage the local variables in the Figma file?

Users can find and manage local variables on the right panel under 'Design' mode, where they can adjust text variables, client setup, and other project-specific variables.

How are the automatic CSS tokens or core tokens organized in the Figma file?

The automatic CSS tokens or core tokens are placed under the 'local variables' section in the 'Design' mode, providing a centralized location for managing project tokens.

What additional styles are available for users in the Figma file?

Additional styles include effect styles like shadows, a grid style for a 12-column grid, and text styles for desktop with regular, medium, semi-bold, and bold variations.

Outlines

00:00

📄 Introduction to File Structure and Cover Page

The video script begins with an introduction to the structure of a file, specifically focusing on the cover page. Upon importing the file, users are greeted with a cover page thumbnail. The video explains how the cover page can be customized with a background color, images, and a logo. It also mentions the ability to change the footer text through Figma tokens. The purpose of the cover page is to serve as an identifier for the file. The script also introduces a 'Quick Navigation' page designed to assist free users in navigating the file due to their limitation to three pages. This navigation page allows users to access different sections of the file. The video encourages free users to obtain a Figma license to fully utilize the features of the Alpha Figma UI kit. The segment concludes with an overview of the 'Foundations' section, which acts as a visual style guide including typography, buttons, colors, radius, and spacing.

05:02

🛠️ Exploring Basic Building Blocks and UI Elements

The second paragraph delves into the basic building blocks and UI elements available within the file. It describes the creation of canvas and section frames to facilitate the construction of wireframes or designs with pre-tagged variables. The video script mentions the presence of UI elements such as intro sections and button combos, including primary, outline, light, and link versions. It also introduces 'alpha blocks,' which encompass a variety of general block categories with both desktop and mobile versions for easy switching during wireframing. The script notes that some blocks are either graded out or hidden, indicating they are under construction or not yet built. Lastly, it touches on the 'local variables,' which can be found in the right panel under 'Design' and includes variables for template setup, client information, and call to action sections. The video promises a deeper dive into variables and styles in future videos.

Keywords

💡Cover Page

A 'Cover Page' is the introductory page of a document or file, typically serving as the first thing a user sees. In the context of the video, it's emphasized that the cover page can be customized with a background color, images, and a logo. It's crucial for identifying the file and can be the client's cover or a project cover. The video mentions that any page placed on top will become the cover page, indicating its flexibility.

💡Figma Tokens

Figma Tokens are variables used in design tools like Figma to maintain consistency across a design system. They can represent colors, typography, and other design elements. The video script discusses changing footer text, such as 'made by' and 'project,' through Figma tokens, which allows for easy updates across the entire design without manually editing each instance.

💡Quick Navigation

Quick Navigation refers to a feature designed to help users efficiently move through a file, especially when access is limited. In the video, it's mentioned that free users of Figma are restricted to three pages, so the Quick Navigation page aids them in accessing different parts of the file without having full access to all pages.

💡Foundations

In design, 'Foundations' usually refer to the basic elements that form the building blocks of a design system. The video describes foundations as a visual style guide, including typography, buttons, colors, radius, and spacing. These elements are separated for a quick overview and to facilitate easy access, which is essential for maintaining a cohesive design language.

💡Basic Building Blocks

Basic Building Blocks are pre-designed frames or components that designers can use as a starting point for their projects. The video mentions canvas and section frames as examples. These blocks are tagged with the correct variables, allowing designers to begin building their layouts without starting from scratch, which speeds up the design process and ensures consistency.

💡UI Elements

UI Elements are the individual components that make up a user interface, such as buttons, input fields, and navigation menus. The video script talks about having basic intro sections, list components, and button combos as examples of UI elements. These elements are expected to increase in the future, providing more options for designers.

💡Alpha Blocks

Alpha Blocks, as mentioned in the video, are general block categories that contain familiar design elements. They are organized in a way that designers can easily find desktop and mobile versions of each block, which is crucial for responsive design. The video also mentions upcoming blocks that will be added to these categories in future updates.

💡Local Variables

Local Variables in Figma refer to the customizable aspects of a design that can be changed locally without affecting other parts of the design. The video script points out that local variables can be found on the right panel under 'Design' and include alpha template variables and general client setup. These variables can be adjusted to reflect client information or call to action sections, streamlining the design process.

💡CSS Tokens

CSS Tokens are a feature in design tools that allow for the creation of design tokens that can be exported to CSS, helping maintain consistency between design and development. The video script indicates that automatic CSS tokens or core tokens are placed in the local variables section, which will be explored in more depth in a future video.

💡Extra Styles

Extra Styles refer to additional design elements or settings that can be applied to various components within a design system. The video mentions effect styles like shadows, grid styles, and textiles for desktop with different weight styles. These styles provide designers with more options to customize their designs and ensure a cohesive look across different elements.

💡Figma Modes

Figma Modes likely refer to the different viewing or editing modes within the Figma platform, such as 'Design' mode versus 'Prototyping' mode. The video script briefly mentions that mobile styles will be deprecated in favor of using Figma Modes, suggesting an evolution in how responsive design is approached within the tool.

Highlights

Introduction to navigating the Figma file structure.

Explanation of the cover page and its customization options.

How to delete and replace the default cover page with a custom one.

Adding background color, images, and logos to the cover page.

Changing footer credits and project details through Figma tokens.

Purpose of the cover page for project identification.

Quick Navigation feature for free users to access limited pages.

How to use Quick Navigation to move through the file.

Recommendation for free users to upgrade for full access.

Introduction to the Foundations section as a visual style guide.

Details on typography, buttons, colors, radius, and spacing in Foundations.

Separation of elements for easy access and overview.

Basic building blocks for starting layouts and wireframes.

UI elements available and future additions planned.

Button combos and their variations in the UI elements section.

Alpha blocks categorization and their desktop/mobile versions.

Upcoming blocks and their current status indicated by grading or hiding.

Introduction to Woomer block categories for future updates.

Location and usage of local variables within the Figma file.

Explanation of alpha template variables and general client setup.

How to change text variables for client information and call to action sections.

Extra Styles available including shadow styles and grid style.

Deprecation of mobile styles in favor of Figma modes.

Summary of file contents, locations, and purposes.

Invitation for questions and contact information for further inquiries.

Transcripts

hello this is ad from bricks Maven in

this video we'll be looking at the lay

of the land we'll be looking at how the

file is set up where you can find the

contents and what their purposes let's

start with the cover page once you first

import your file you will see this

you'll see the cover page as a thumbnail

as we saw in the beginning here right

here if you go back to home you see this

you see the cover page if any page that

is placed on top will become the cover

page as you can see I placed a you can

delete you can delete this text here so

you can remove it if you want your own

cover page which I've created a second

page called your client's cover or your

own projects cover you can add a

background color you can add images to

your background you can add your own

logo to the pro to the to the cover page

you can change the

name and um also here this says the

footer is made by and project here uh

these um can be

changed uh through the figma tokens

we'll explore that later I just want to

show you guys where you can find stuff

and what the purpose is the purpose of

this page as you already is is actually

straightforward it's just having your

own project project uh or your client's

cover page so that you can identify the

file that's why we have this page here

and the cover of the alpha figma UI kit

you can delete this or you can keep it

choice is yours Quick Navigation we

created this page to help the free users

navigate through the file because free

users are limited to three pages so they

basically they can see all the pages but

you cannot access them so they can only

access the first three pages so

um this quick navigation page will help

them move through the file so for an

example let's say you wanted to access

the the content category right you would

select this uh frame right Mouse click

and you say go to main component and to

carry you over to the main component you

can then zoom out and then you actually

have access to this page you can grab

whatever you want and then uh go back by

obviously pressing the return to

instance button then you're back on the

page but this just a quick nap for free

users I really recommend uh free users

to grab a figma license because then you

can really um benefit from the features

that we have in the alpha figma UI kit

okay let's carry on moving on to the

foundations Foundation is just basically

the visual style guide so we have our

typography free we have our buttons

colors radius and spacing reason why we

reason why I I um separated them is just

for quick overview right obviously we

could have them on one page but then

You' be scrolling and moving around

whereas if they're on separate pages you

can have just you can easily access them

so this is where you can see the current

uh typography font family font size you

can see the you can see your buttons the

the colors Etc which you can

change and here the colors themselves of

your project here you can uh visually

see them you can see what the primary

colors are secondary

teary uh Etc your radius

um uh tokens you can see the kind of

style this is just a visual

representation of how they look and we

have our spacing and you can see the

different kind of spacing for both

desktop and mobile okay so now that we

have gone through the foundations moving

on to the basic building

blocks um basic building blocks are just

basically basic frames that we created

uh uh we created a canvas uh frame and

also

a uh section frame we did this so that

you can easily start building your own

blocks start building your own laying

out your own wireframes or

design with blocks that are already

tagged with the correct variables so you

don't need to do this from

scratch I will go into this in a

separate video where where I show I I'll

just go into the file uh sorry the frame

and show you how we tag the blocks and

give you a better understanding of how

this was set up but this is where you

can find the basic building blocks we

also have the UI elements you can expect

more UI elements in the future for now

we just have basic intro sections and we

have a

list uh list uh component and also we

have

button uh

combos as you can see we have a a

primary with an outline we also have the

light version stacked version also light

version uh primary with the link and

then we have also have the stack version

set and light the the light

versions you can all find them

here and then we have the alpha blocks

which you can find all the general block

categories here are all let me just

expand this you can find all the blocks

that you are familiar with they're all

here they all have a desktop and a

mobile

version so it makes it easier to switch

between the two once you're wireframing

so you can now find as you can see these

are the recent coming soon blocks that

we added they're all

here

content and you might see in the file

that some blocks are grade out that just

means that this it does not be built yet

some are even

hidden so this is just giving you an

idea of all the blocks I'm going to go

through them all but you can see these

are all the blocks here and last but not

least we have the woomer block

categories which is totally empty it is

just uh the pages have just been created

and the blocks will be added in uh in a

future update we'll start adding blocks

to these categories so the last thing

that we need to uh I need to show you

guys is the local variables so if you're

wondering where can I find the variables

you can find

them on the right panel here on the

design so not prototype design if you go

to local variables there you see all the

variables I'll go into depth into the

variables in a in a different

video here's where you can find the

alpha uh template variables and also the

we also have General client setup these

are text variables that hold the client

name phone number email Etc which you

can change here and it to be changed

throughout the the project and the

blocks especially the footer and the

contact blocks will be affected by these

so you don't need to change that

yourself we also have a call to action

uh section which have also tag withit

text variables so you can change them

from here and it to be changed in the

call to action uh section just making

life a little bit easier so this is

where you can find the tokens the

especially the the automatic CSS tokens

or the core tokens they've all been

placed here I'll go into in depth in a

in a different video in a dedicated

video but this is where you can find

them

and we also have some extra Styles so we

have effect Styles here you can we have

two Shadow

Styles we have a grid style you can also

create your own grid Cy but just a 12

column grid we have um

the textiles for the desktop which are

all here every textile contains a

regular medium semi bold and bold uh

style so you can switch between those we

also have a mobile style this will be

deprecated as we are now using the figma

modes which I'll also go in in in Dept

in a different

video um so I hope this gave you an idea

of what the file contains where you can

find the context of the file sorry

contents of the file and what their

purpose

is thank you for watching if you have

any questions you can shoot me an

email um and I would gladly answer your

questions for now have a nice day and

we'll speak soon bye