GETTING STARTED WITH FIGMA | How to Create UI Style Guide
44
Published 2024-06-07
Today we're learning how to create a design/ product stylesheet or UI style guides using Figma. I give an overview of Figma's interface and basic features. *Step-by-step guide to creating a simple stylesheet design.
TIMESTAMPS:
00:22 What is Figma?
00:39 Create new file in Figma
00:45 Figma workspace
01:06 Adjust workspace page color
01:15 Picking prototype device
01:53 Zooming in & out
02:00 Labeling frames / webpages
02:10 Duplicate frames
02:30 what is a stylesheet / style guides
03:10 additional tools
04:00 Create shapes
04:26 label layers
04:44 how to group items
05:01 text and fonts
08:20 Icons & bootstrap icons
09:13 what are icons?
__
Figma: Figma.com
Pexels Library: www.pexels.com/collections/project1-cafe-jeapf0w/
Color pallet: color.adobe.com/search?q=COFFEE
__
SETUP:
Filmed on Samsung Galaxy S22 Ultra
Music: Swallow
Musician: EnjoyMusic
URL: https: //enjoymusic.ai