Lesson 2 of 7 · 10 min
Set up your studio
Goal:Get your three tools ready, know which job each one does, and find your way around Figma.
YOUR STUDIO, FROM SCRATCH
uxuiopen.comThree tools, three jobs. An AI chat tool helps you think, Claude Design helps you explore options fast, and Figma is where you craft the final design by hand. Your journal ties them together. Watch the two-minute film, then set yours up.
- 1 · Think
ChatGPT
Plans, research, ideas
- 2 · Explore
Claude Design
Layouts, options, decks
- 3 · Refine
Figma
Craft it by hand
- 4 · Log
Journal
What you asked and decided
Reach for an AI chat tool to…
- plan a project and break it into steps
- research an audience or a topic
- brainstorm names, headlines and ideas
- get feedback on your reasoning
Reach for Figma to…
- lay out screens and posters precisely
- control type, color and spacing by hand
- build components you can reuse
- share designs and prototypes with others
Figma
Your canvas. Where you refine, organize and hand off work.
Steps
- 1Create a free account.
- 2In a cohort? We verify you for the Education plan, so sign up with the email you applied with.
- 3Make a new design file called "Studio".
ChatGPT
Your thinking partner. Research plans, ideas, critique and writing.
Steps
- 1Sign in.
- 2Create a project called "Design studio" so your chats stay together.
Claude and Claude Design
Your explorer. Layouts, mockups and decks fast, and it can follow a design system.
Steps
- 1Sign in to Claude.
- 2Create a project called "Design studio".
- 3Claude Design needs a paid plan and is a research preview. Optional in this unit.
Find your way around Figma
Figma looks busy the first time you open it, but every file has the same five areas. Learn them once and every tutorial makes sense. Click around this simplified Figma window and find all five.
Click each part of the Figma window to find all five.
0 of 5 foundEverything in Figma lives in a simple tree. Files hold pages, pages hold frames, and frames hold layers. Once you see the tree, you'll always know where things are.
- 📁Unit 1 (file)
- 📄Playground (page)
- #Poster (frame)
- ▢Header (group)
- THeadline (text)
- ◯Circle (shape)
- 🖼Photo (image)
- 📄Journal (page)
- File
- One project. You can share it with others by link.
- Page
- A tab inside the file. Use pages to separate work: Playground, Journal, Prompt library.
- Frame
- An artboard with a size: a phone screen, a poster, a slide. Designs live inside frames.
- Layer
- Anything inside a frame: text, shapes, images, groups. The layers panel lists them all.
Reading about a tool teaches you very little. Here is a stripped-down design tool, right on this page. Work through the six tasks and you will have done everything your first ten minutes in Figma asks of you.
Layers
- Frame 1
Position and size
Auto layout
Appearance
Fill
Stroke
An empty file, one frame, and six things to do. Press V to move, F to draw a frame, T for text and R for a rectangle — the same keys Figma uses.
- 1
Name the frame
Select it in the Layers list and type a real name at the top of the Design panel — “Poster”, say. Nobody can work in a file full of Frame 1, Frame 2, Frame 3.
- 2
Make it poster-shaped
- 3
Add a headline
- 4
Make the headline big: 36 or more
- 5
Add a shape
- 6
Start the next frame
Now do it for real. Open Figma in another tab and run the same six moves there — the keys are the same ones you just used.
Your first ten minutes in Figma
Make a file
Create a new design file and name it "Unit 1". Add two more pages: "Journal" and "Prompt library".
Draw a frame
Press F, then drag on the canvas. In the right panel, set the frame to 1080 × 1350, the shape of a social media post.
Add text
Press T, click inside the frame and type a headline. With the text selected, change the font and size in the right panel.
Add a shape
Press R for a rectangle or O for an ellipse, drag it out, then pick a fill color in the right panel.
Move and duplicate
Press V to get back to the move tool. Select something and press Ctrl + D (⌘ + D on a Mac) to duplicate it.
See it all
Press Shift + 1 to zoom so everything fits on screen. Press Shift + 0 to go back to 100%.
Words to know
- Canvas
- The endless workspace in Figma. Scroll to move around; hold Ctrl or ⌘ and scroll to zoom.
- Fill
- The color (or image) inside a shape, frame or text.
- Auto layout
- A Figma setting that spaces things automatically, like a stack. You'll use it a lot from Unit 5.
- Component
- A reusable piece, like a button. Change the main one and every copy updates.
Now check you know which tool to reach for.
Which tool would you reach for first?
Draft ten questions for a user interview.
See three layout directions for a landing page.
Fix the spacing on the version you picked.
Turn your screens into a component set.
Get honest critique on why a layout feels busy.
Set up your studio file
Make the Figma file you'll use for the rest of this course.
- 1Create a file called "UX UI Open – Unit 1" with three pages: Playground, Journal, Prompt library.
- 2On Playground, make three frames: a phone (390 × 844), a poster (1080 × 1350) and a slide (1920 × 1080).
- 3Put a headline in each frame using a different font.
- 4Rename every frame so its name says what it is.
- 5Tell the discussion you're set up, and what confused you most.
Read next