- Accessories
- Accommodation
- Accounting
- Airline
- Amusement Park
- Analytics
- Appliances
- Art
- Auction site
- Automotive
- Bank
- Beauty
- Bike Rental
- Biotechnology
- Books
- CRM
- Call center software
- Cameras
- Cards
- Chrome plugin
- Cleaning Products
- Clothing
- Coffee
- Collaboration
- Community
- Contact lenses
- Coolers / Tumblers
- Crowd funding
- Cryptocurrency
- Customer support
- Dating
- Department store
- Design tools
- Developer tools
- Digital printing
- Dining / Restaurant
- Direct to consumer
- Domain names
- Drinkware
- E-commerce
- E-commerce store builder
- Education
- Electronic signatures
- Electronics
- Email Service Provider
- Email marketing
- Entertainment
- Event management
- Eyewear
- Fashion
- Finance
- Fitness
- Flight comparisons
- Food & Beverage
- Food delivery
- Form builder
- Fragrance
- Freelancer tools
- Furniture
- Game
- Gaming
- Gifts
- Glasses
- Greetings cards
- Groceries
- Hair
- Health
- Hiring
- Home & Garden
- Hotel comparison
- Hotels
- Insurance
- Investing
- Jewelry
- Kitchen
- Landing page builder
- Language learning
- Linens
- Lingerie
- Live chat
- Luggage / Cases
- Makeup
- Marijuana delivery
- Marketing
- Marketplace
- Mattress company
- Meal delivery kits
- Media
- Messaging
- Museum
- Music
- Musical Instruments
- NFT
- News
- No-code
- Nonprofit
- Nutrition
- Online courses
- Online-course-platform
- Outdoor
- Password manager
- Payments
- Performing Arts
- Personal Finance
- Pets
- Pharmacy
- Photography
- Podcast Hosting
- Podcasts
- Productivity
- Project management
- Property
- Proposal software
- Publisher
- Real estate
- Reviews
- Ride sharing
- Running
- SEO
- SaaS
- Sales tools
- Scooters
- Shoes
- Skincare
- Social network
- Software
- Sportsware
- Subscription boxes
- Sustainable Living
- Swimwear
- T-shirt Printing
- Talent
- Telco
- Toys
- Trains
- Transport
- Travel
- Underwear
- VPN
- Video Maker
- Video hosting
- Video streaming
- Voucher/Coupon Sites
- Watches
- Web hosting
- Website builder
- Workforce management
- Writing
- & Other Stories
- &Open
- 1 Hotels
- 1&1
- 1Password
- 3dcart
- 6pm
- A.C. Moore
- ANNA by RadLabs
- ASOS
- AT&T
- AVI-8
- AYR
- Abercrombie
- Accessorize
- Ace Hardware
- ActiveCampaign
- Acura
- Acuvue
- Adapt
- Adidas
- Agolde
- Airbnb
- Aircall
- Airtable
- Alaska Air
- Aldi
- All Saints
- Allbirds
- Almabase
- Along
- Aman Resorts
- Amazon
- Ambronite
- American Airlines
- American Apparel
- American Civil Liberties Union
- American Girl
- American Red Cross
- Anchor
- Animoto
- Ann Taylor
- Anthropologie
- Antidote Street
- Apollo Theater
- Apple
- Architectural Digest
- AriZona
- Aritzia
- Armani
- Armani Exchange
- Armogan
- Asana
- Asphalt Green
- Astley Clarke
- Athletic Brewing
- Auberge Resorts
- Audemars Piguet
- Audi
- Auverture
- Away
- BBC iPlayer
- BECCA Cosmetics
- BMW
- Baby Brezza
- Baremetrics
- Barnes and Noble
- Barton Perreira
- Basecamp
- Bath & Body Works
- Beans
- Bearbottom Clothing
- Beaver Brooks
- Beis
- Ben Sherman
- Bend
- Bentley Motors
- Bergdorf Goodman
- Bespoke Post
- Best Buy
- Better Homes and Gardens
- Big Blanket Co.
- Big Brothers Big Sisters of America
- Big Cartel
- BigCommerce
- Binance
- Bing
- Birch Lane
- Birchbox
- Birkenstock
- Birthdate Co
- BitClout
- Bite
- Black Opal Beauty
- Blinkist
- Blue Apron
- Bluehost
- Blueland
- Bluemercury
- Blundstone
- Bobbi Brown
- Bodily
- Boisson
- Bombas
- Bon Appétit
- Bonlook
- Bonobos
- Boohoo
- Booking.com
- Boots
- Box
- Bravissimo
- Breaker
- Breitling
- Brez
- Briggs & Riley
- Brightedge
- British Airways
- Broadway Direct
- Broadway NYC
- Broadway in Hollywood
- Brooklinen
- Brooks
- BrowserStack
- BruMate
- Bubble
- Buffalo Wild Wings
- Buffer
- Burberry
- Busch Gardens
- Busuu
- Bynder
- CVS
- Cadillac
- CafePress
- Calendly
- Callaway Golf
- Calm
- Calpak
- Candy Club
- Candy Kittens
- Canny
- Canon
- Canva
- Carbonmade
- Care
- Careem
- Carnegie Hall
- Carnival Cruise Line
- Carrd
- Cars.com
- Cartier
- Cash App
- Casper
- Caviar
- Cedar Point
- Chalkbeat
- Charity Water
- ChartMogul
- Chevrolet
- Chewy
- Chicago Children’s Museum
- Chick-fil-A
- Chico’s
- Chilewich
- Chococurb
- Chubbies
- Chuck and Don’s
- Circle
- Claire's
- Clarks
- ClassPass
- ClickFunnels
- ClickUp
- Clinique
- Clockify
- Cloudflare
- Clubhouse
- Clue
- Coach
- Coastal
- Coda
- Codecademy
- Coinbase
- Common Sense
- Conductor
- Converse
- ConvertKit
- CopyAI
- Costa del Mar
- Costco
- Coursera
- Cover FX
- Craft
- Craigslist
- Crate & Barrel
- Crocs
- Crypto.com
- Cult Furniture
- Curious Elixirs
- Customer.io
- DFS
- Daisy Jewellery
- Daniel Wellington
- Datadog
- De Soi
- Debenhams
- Deliveroo
- Delivery.com
- Delivra - The Inbox
- Delsey Paris
- Delta
- Depop
- Deputy
- Descript
- DesignByHümans
- Designer Shoe Warehouse
- Diadora
- Dillards
- Dior
- Discord
- Disney Cruise Line
- Disney+
- Djusie
- Doctors Without Borders
- DocuSign
- Dolce & Gabbana
- Dollar Shave Club
- Dollywood
- Domino's
- DonorsChoose
- DoorDash
- Dorelan
- Dorothy Perkins
- Dr. Squatch
- Drip
- Dropbox
- Dropbox Paper
- Drops
- Drury Hotels
- Duda
- Duolingo
- Dwell
- EasyJet
- Eaze
- Echo Water
- Elevate
- Elle
- Ellucian
- Entrepreneur
- Envato
- Environmental Defense Fund
- Envoyage
- Etsy
- Eurostar
- Eventbrite
- Everlane
- Evernote
- Expedia
- Expensify
- Express
- Express Glasses
- Eye Buy Direct
- FabFitFun
- Fabletics
- Facet
- Factor
- Faherty Brand
- Faire
- Fairmont Hotels & Resorts
- Fancy
- Farm Rio
- Fashion Fair
- Fashion Nova
- Feedly
- Feelunique
- Fenwick
- Ferrari
- Figma
- Finimize
- Firebox
- Fitbit
- Fiverr
- Flakes
- Fleur & Bee
- Flipd
- Flodesk
- Fluent
- Flybe
- Foodvisor
- Ford
- Forest
- Forest Nation
- Forever 21
- Fort Myers
- Fortnum & Mason
- Fossil
- Four Seasons
- Four Sigmatic
- Framebridge
- Framer
- Free People
- FreeCodeCamp
- Freedom Japanese Market
- Freetrade
- Fresh Clean Threads
- Front
- Ftsny
- Fullstory
- Furniture Village
- Fyrn
- GMC
- GQ
- GameStop
- Gap
- GatherContent
- Genesis
- Ghia
- Ghost
- Ghost Bed
- GitHub
- GitLab
- Glamour
- Glassdoor
- Glasses USA
- Glo
- Glossier
- Glossybox
- Go-Jek
- GoDaddy
- Goat
- Gobble
- Goggles4u
- Goldsmiths
- Good Idea
- Gorillas
- Gousto
- Gozney
- Grab
- Graham and Green
- Grammarly
- Graze
- Greats
- Green Chef
- GreenRush
- Groupon
- Grubhub
- Guess
- Gumroad
- Gymshark
- Gyroscope
- H&M
- H.Samuel
- HVMN
- Habitat
- Happy Viking
- Harper’s Bazaar
- Harrods
- Harry's
- Harvey Nichols
- HashiCorp
- Hastens
- HauteLook
- Havn
- Headspace
- Height
- Helix
- HelloFresh
- Help Scout
- Help for Heroes
- Hershey Park
- Hettas
- Hey
- High Museum of Art
- Hipmunk
- Hobby Lobby
- Hoka
- Holiday World
- Home Depot
- HomeGoods
- Honda
- Honest
- Honey
- HostGator
- HotelTonight
- Hotjar
- House Curious
- House of Fraser
- Houzz
- HubSpot
- HubSpot CRM
- Huel
- Hulu
- Hungry House
- Hutch
- Hyatt Hotels and Resorts
- IHG Hotels & Resorts
- Ikea
- Imperfect Foods
- Impossibrew
- InMotion Hosting
- InVision
- Infoempleo
- Infojobs
- Instacart
- Intelligentsia
- Interact
- Intercom
- Ipsy
- J.Crew
- JCPenney
- Jaguar
- Jessops
- Jet2
- JetBlue
- Jira
- Job Today
- July
- Jump Bikes
- Juni
- Just Eat
- KEH Camera
- KETL Mountain Apparel
- Kate Spade
- Kay
- Kennywood
- Kensington Tours
- Kentucky Fried Chicken
- Khan Academy
- Kin Euphorics
- Kings Island
- Klarna
- Knoebels
- Kohls
- Kroger
- Kuii
- Kupferberg Center
- LMNT
- LTHR Supply
- La Croix
- Lamborgini
- Lancôme
- Land Rover
- Landbot
- Landish
- Lane Bryant
- Launchaco
- Leadpages
- Leesa
- Lego
- Lehman Center for the Performing Arts
- Lemonade
- Lexus
- Liberty London
- Lifesum
- Lime
- Lincoln
- Lincoln Center Theater
- Lincoln Center for the Performing Arts
- Linear
- Linjer
- Linktree
- Liquid I.V.
- Litmus
- Loaf
- London Virgin Hair
- Loog Guitars
- Lookfantastic
- Loom
- Loot Crate
- Louis Vuitton
- Lowes
- Lucidchart
- Lululemon
- Luma
- Lume Cube
- Lyft
- MAC Cosmetics
- MATE the Label
- MDMflow
- MGM Resorts
- MUD/WTR
- MVMT
- Mack Weldon
- Macy's
- Made
- Magento
- Maggiano’s Little Italy
- Mailchimp
- Make
- Mango
- MapMyGut
- Marc Jacobs
- Market District
- Marley Spoon
- Marriott
- Maserati
- MasterClass
- Mattel
- Mayvenn
- MeUndies
- Meadow
- Medium
- Mejuri
- Melissa & Doug
- Memrise
- Menards
- Mercari
- Mercedes-Benz
- MetaMask
- Michaels
- Microsoft Teams
- Mingle Mocktails
- Mini
- Miro
- Miss Selfridge
- Missguided
- Misto Box
- Mitsubishi cars
- Miu Miu
- Mixpanel
- Mixtons
- Moe’s Southwest Grill
- Moment
- Monday
- Moneybox
- Mont Blanc
- Monzo
- Moo
- Moonpig
- Morning Brew
- Morning Recovery
- Muttonhead
- My First Wig
- MyFitnessPal
- N26
- NANUK
- NPR
- Nars Cosmetics
- National Geographic
- NerdWallet
- Nest Furniture
- Netflix
- Netlify
- New Balance
- New Look
- New York City Theatre
- Newegg
- Newfields
- Nicely Noted
- Nike
- No Mercy / No Malice
- Nolan Interior
- Nomatic
- Noom
- Nordstrom
- Nordstrom Rack
- Norwegian Cruise Line
- Notion
- Notonthehighstreet
- Now TV
- Nugg
- Ocado
- OfferUp
- Officevibe
- Ogee
- Old Navy
- Oliver Peoples
- Omega
- On
- Only Natural Pet
- OpenSea
- OpenTable
- Opumo
- Orange Theory
- Otiumberg
- Outdoor Voices
- Overstock
- Ozone Socks
- PBS
- Paka
- PandaDoc
- Pandora
- Parade
- Patagonia
- Patreon
- Paula's Choice Skincare
- Paw Patrol
- PayPal
- Peloton
- People
- Perelman Performing Arts Center (PAC NYC)
- Persol
- Pet Supermarket
- Petco
- Piada Italian Street Food
- Picniic
- Pier 1
- Pipedrive
- Pitch
- Pizza Express
- Plae
- Plated
- Plum
- Pluralsight
- Podia
- Pokemon
- Poshmark
- Postmates
- Pottery Barn
- Prada
- PrettyLittleThing
- Primark
- Process Street
- Publix
- Puma
- Pure Life
- Purple
- QVC
- Qdoba
- Quibi
- QuickBooks
- Quill
- Quip
- Quizlet
- Quora
- REI Co-op
- Racket
- Raleigh Limited
- RallyUp
- Rare Beauty
- Ray-Ban
- Raymond Weil
- Reader’s Digest
- Red Robin
- Redbubble
- Reebok
- Reflectly
- Remitly
- Replit
- RescueTime
- Retool
- Revolut
- Revolve
- Rezi
- Ripcurl
- Ritual Zero Proof
- Road Scholar
- Robinhood
- Rock Grace
- Rootless
- Rosewood Hotels & Resorts
- Royal Caribbean Cruises
- Rumpl
- Runkeeper
- Ruth’s Chris
- SNKRS by Nike
- Saks Fifth Avenue
- Sally Beauty
- Samsonite
- Saratoga
- SavvyCal
- Scentbird
- Schoolhouse
- Scribd
- Sea World
- Seamless
- Search Metrics
- Seedlip
- Segment
- Selfridges
- Sentry
- Sephora
- ServiceNow
- Shark
- Shein
- Shift
- Shop.com
- Shopify
- Shpock
- Shudder
- Shwood and Stanley
- Sierra Club
- Silver Dollar City
- Simba
- Six Flags
- Skechers
- Skillshare
- Skims
- Skyscanner
- Slack
- Slite
- Smartsheet
- Smiley Movement
- Smithsonian Institute
- Snapchat
- Sneaker Politics
- Snowe
- Snowflake
- Society6
- Sock Fancy
- Soka Home
- SoloLearn
- Soludos
- Sonno
- SoundCloud
- Southern Living
- Southwest
- Soylent
- Spacegoods
- Sparkling Ice
- SpeedWeed
- Spotify
- Spreadshirt
- Spyder
- Square
- Squarespace
- Squarespace Scheduling
- St Elmo Steakhouse
- St. Jude
- Stanley
- Staples
- Starbucks
- Steam
- Stitch Fix
- Stojo
- Stone Forest
- Strava
- Strikingly
- Stripe
- Substack
- SumUp
- Sun Basket
- SunGod
- Sunglass Hut
- Sunsama
- Superdrug
- SurveyMonkey
- Swarovski
- Sweatcoin
- Swoon
- Symphony Space
- TRNK
- Tag Heuer
- Tally
- Target
- Taste Trunk
- Teachable
- Teachlr
- Techcrunch
- Technics
- Tecovas
- Ted Baker
- TeePublic
- Tempur
- Tempur-Pedic
- Temu
- Terrain
- Tesla
- The Absorption Company
- The Children’s Museum of Indianapolis
- The Farmers Dog
- The Hustle
- The Jewel Hut
- The Metropolitan Museum of Art (The Met)
- The Museum of Modern Art (MoMA)
- The New York Times
- The North Face
- The Ordinary
- The White Company
- Thinx
- Threadless
- Three Spirit
- Thryve
- Tidal
- Tide.fm
- Tiffany & Co
- TikTok
- Tinder
- Todoist
- Toggl Track
- Tom Ford
- Tommy John
- Topshop
- Tory Burch
- TouchNote
- Trader Joe’s
- Trainline
- TransferWise
- Travelpro
- Trello
- Triibe
- TripAdvisor
- Trivago
- Trustpilot
- Tuft & Needle
- Tumi
- Tunnel to Towers
- TunnelBear
- Twilio
- Twitch
- Typeform
- Typhur
- UGG
- UNICEF USA
- UNIQLO
- Uber
- Uber Eats
- Udacity
- Udemy
- Ulta
- Unbounce
- Unboxme
- UncommonGoods
- Under Armour
- United
- Universe
- Upwork
- Urban Outfitters
- Us Weekly
- VIIA
- VSCO
- Vanity Fair
- Vans
- Veer
- Vercel
- Vessi
- Victoria's Secret
- Viking Cruises
- Vimeo
- Vineyard Vines
- Vinted
- Viome
- Virgin Atlantic
- Vistaprint
- Vogue
- Volvo
- Voog
- Vueling
- W
- WE
- WW (Weight Watchers)
- WalMart
- Walgreens
- Wallapop
- Wallshoppe
- Walt Disney World Resort
- Warby Parker
- Watch Shop
- Watch Station
- Watches.com
- Wattpad
- Wayfair
- Waze
- We Feed Raw
- Wealthsimple
- Webflow
- Weebly
- Wegmans
- Wendy’s
- West Elm
- Which Wich
- Whimsical
- Wikimedia Foundation
- Williams Sonoma
- Winc
- Windstar Cruises
- Wise
- Wistia
- Wix
- WooCommerce
- Wooden Spoon Herbs
- WordPress
- World Market
- World Wildlife Fund
- Wowcher
- YNAB
- Yelp
- Yeti
- YouTube
- YouTube Music
- Zales
- Zapier
- Zara
- Zazzle
- Zeelool
- Zendesk
- Zero
- Zillow
- Zoe & Morgan
- Zoom
- Zoopla
- Zulily
- allure
- eBay
- eToro
- hiyo
- omnisend
- reggie
- uBiome
Framer Registered user
Subscribed 3 years, 11 months ago
<html data-reactroot="" lang="en" xmlns="//www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8" http-equiv="Content-Type"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta name="x-apple-disable-message-reformatting"/>
<meta content="telephone=no,address=no,email=no,date=no,url=no" name="format-detection"/>
<meta content="light dark" name="color-scheme"/>
<meta content="light dark" name="supported-color-schemes"/>
<style type="text/css">
:root{color-scheme:light dark;supported-color-schemes:light dark}
</style>
<title>
Framer 101: How to design with Frames
</title>
<!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
<style type="text/css">
@font-face{font-family:'Inter';src:url("https://inboxflows.com/_/image/https%253A%252F%252Ffonts.gstatic.com%252Fs%252Finter%252Fv1%252FUcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZmb250cy5nc3RhdCJ9:1mVyUr:omne5v2d3NgaxzoY7lYOcSp_t0a5e4do0_iReECBXgY") format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://inboxflows.com/_/image/https%253A%252F%252Ffonts.gstatic.com%252Fs%252Finter%252Fv1%252FUcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hjp-Ek-_EeA.woff/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZmb250cy5nc3RhdCJ9:1mVyUr:omne5v2d3NgaxzoY7lYOcSp_t0a5e4do0_iReECBXgY") format('woff');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://inboxflows.com/_/image/https%253A%252F%252Ffonts.gstatic.com%252Fs%252Finter%252Fv1%252FUcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hjp-Ek-_EeA.woff/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZmb250cy5nc3RhdCJ9:1mVyUr:omne5v2d3NgaxzoY7lYOcSp_t0a5e4do0_iReECBXgY") format('woff');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://inboxflows.com/_/image/https%253A%252F%252Ffonts.gstatic.com%252Fs%252Finter%252Fv1%252FUcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hjp-Ek-_EeA.woff/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZmb250cy5nc3RhdCJ9:1mVyUr:omne5v2d3NgaxzoY7lYOcSp_t0a5e4do0_iReECBXgY") format('woff');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://inboxflows.com/_/image/https%253A%252F%252Ffonts.gstatic.com%252Fs%252Finter%252Fv3%252FUcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuDyYAZ9hjp-Ek-_EeA.woff/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZmb250cy5nc3RhdCJ9:1mVyUr:omne5v2d3NgaxzoY7lYOcSp_t0a5e4do0_iReECBXgY") format('woff');font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://inboxflows.com/_/image/https%253A%252F%252Ffonts.gstatic.com%252Fs%252Finter%252Fv3%252FUcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuBWYAZ9hjp-Ek-_EeA.woff/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZmb250cy5nc3RhdCJ9:1mVyUr:omne5v2d3NgaxzoY7lYOcSp_t0a5e4do0_iReECBXgY") format('woff');font-weight:900;font-style:normal;font-display:swap}html,body{margin:0 auto!important;height:100%!important;width:100%!important;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body{mso-line-height-rule:exactly}*{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}div[style*="margin: 16px 0"]{margin:0!important}table,td{mso-table-lspace:0!important;mso-table-rspace:0!important}table{border-spacing:0!important;border-collapse:collapse!important;table-layout:fixed!important;margin:0 auto!important}img{-ms-interpolation-mode:bicubic}h1,h2,h3,div,p,img,a,li{font-family:'Inter','HelveticaNeue',Helvetica,Arial,sans-serif!important}a[href^=tel]{color:#AAA;text-decoration:none}.full{max-width:960px}.preheader{display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif}img a+a{margin-left:10px!important}a+a{margin-left:10px!important}a.emoji{text-underline-offset:.2em!important}p a+a{margin-left:0!important}.button{margin-top:5px!important;margin-bottom:5px!important}.button.primary:hover{background:#08f!important;transition:.3s!important}.button.secondary:hover{background:#d4d8de!important;transition:.3s!important}.mobile-banner{display:none}.mobile-spacer{height:60px}.show-mobile{display:none}.block{display:block}.logo-dark{display:block}.logo-white{display:none}.dark .logo-text,.dark .bg-image-text{color:#fff!important}.dark .logo-dark{display:none}.dark .logo-white{display:block!important}@media(prefers-color-scheme:dark){body{background:#111!important}h1,h2,h3,div,p,img,li,.logo-text{color:#fff!important}.container{background:#111!important}div.key{color:#000!important}.logo-dark{display:none!important}.logo-white{display:block!important}.bg-box{background:#121212!important}.line{color:#444!important}}@media only screen and (min-device-width:320px) and (max-device-width:374px){.container{min-width:320px!important}}@media only screen and (min-device-width:375px) and (max-device-width:413px){.container{min-width:375px!important}.line{padding:40px 0!important}}@media only screen and (min-device-width:414px){.container{min-width:414px!important}}@media screen and (max-width:600px){.container{width:100%!important;margin:auto!important}.stacked{display:block!important;width:100%!important;max-width:100%!important}.stack{display:block!important;float:none!important}.upsell,.hero{margin:0 auto 20px auto!important;width:92%!important}.mobile-banner{display:block}.mobile-spacer{height:40px}.hide-mobile{display:none}.show-mobile{display:block}.bg-box{padding:40px!important}h1{font-size:38px!important;line-height:1.15em!important}.button{margin:5px 0!important;width:100%!important}}
</style>
<!-- OUTLOOK START -->
<!--[if mso]><style>h1,h2,h3,h4,div,p,img,a,li{font-family:Arial,sans-serif!important}h2{margin-top:40px!important}</style><![endif]-->
<!-- OUTLOOK END -->
</head>
<body class="" style="width:100%;margin:0;padding:30px 0px;text-size-adjust:100%">
<div style="color:transparent;visibility:hidden;opacity:0;font-size:0px;border:0;max-height:1px;width:1px;margin:0px;padding:0px;border-width:0px!important;display:none!important;line-height:0px!important;">
<img alt="" border="0" height="1" src="https://inboxflows.com/_/image/http%253A%252F%252Fpost.spmailtechnolo.com%252Fq%252Fp16z6CHHeGQDCyfO76nT3w~~%252FAARGbAA~%252FRgRjOGROPVcDc3BjQgphUk7fVWEgo3dbUhMxOTM2MDZhZUB1aWZlZWQuY29tWAQAAACB/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cCUzQSUyRiUyRnBvc3Quc3BtYWlsdCJ9:1mVyUr:-_BK-5NhHA-ufaeygR1gDEydXSw2JK-30tSSAjGJd8w" width="1"/>
</div>
<span style="color:transparent;visibility:hidden;display:none;opacity:0;height:0;width:0;font-size:0;">
</span>
<img height="1" src="https://inboxflows.com/_/image/https%253A%252F%252Flinks.framer.email%252Fe%252Feo%253F_t%253D8a025ebd74f9439c8d735d994082f8ec%2526_m%253D534ae4b4560c41eb99cbda36d2e9b5c2%2526_e%253DAfVSTjEiVyh9LOpYMNdrJoCVceUAljqTtzE0e2czivWOyqEQGdo_Sl1CroZVX4ne1AfSNduyyHbApLwIAojb2yoezdJ-Pfz2GGUBPRAgWBlz5PCtVe0GZUI2_YVxsDCC9Pz10tv2gopPPn_DPtOp3h0XNTc6M6ZlJuUjv2p9Vnw%253D/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZsaW5rcy5mcmFtZSJ9:1mVyUr:_-TX7ldv-sPKfpTuj25lKQcNTxHLlq2Yc-yyxpw2JpU" style="border:0;width:1px;height:1px;border-width:0px!important;display:none!important;line-height:0!important;" width="1"/>
<div>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td><![endif]-->
<div class="preheader" style="font-size:0px;color:#FFFFFF;line-height:0px;display:none">
These flexible layers help you build everything from UI elements to entire apps with customizable styles, auto-nesting, and more.
</div>
<div class="preheader" style="font-size:0px;color:#FFFFFF;line-height:0px;display:none">
<div>
</div>
</div>
<table align="center" border="0" borderradius="0" cellpadding="0" cellspacing="0" class="container" role="presentation" valign="top" width="600">
<tbody>
<tr>
<td align="left" style="padding:10px 40px" valign="top">
<table align="left" border="0" borderradius="0" cellpadding="0" cellspacing="0" height="100%" role="presentation" valign="top" width="100%">
<tbody>
<tr>
<td align="left" style="width:32px;padding-bottom:10px" valign="middle">
<a style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#0099FF;text-decoration:underline" target="_blank">
<img class="logo" height="32" src="https://inboxflows.com/_/image/https%253A%252F%252Femail.framercdn.com%252Fimages%252Flogo-avatar%25402x.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZlbWFpbC5mcmFtZSJ9:1mVyUr:DfUND4nwSf6Xt4wBUDEhIjHQKCr2Ha-yhRUWlaRgAJM" width="32"/>
</a>
</td>
<td align="left" style="padding-bottom:10px" valign="middle">
<p>
<a class="logo-text" style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:800;font-size:16px;line-height:34px;color:inherit;text-decoration:none;margin:0 0 0 8px !important" target="_blank">
Framer
</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding:10px 40px" valign="top">
<h1 style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;font-weight:800;letter-spacing:-.03em;margin:0;width:100%;font-size:48px;line-height:1.15em;color:#000">
Framer 101: Frames
</h1>
<h2 style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;font-weight:800;font-size:26px;line-height:36px;letter-spacing:-0.1px;color:#000000;text-rendering:optimizeLegibility;margin:0;padding:10px 0 0">
The foundation of every Framer design
</h2>
</td>
</tr>
<tr>
<td align="center" style="padding:30px 0" valign="top">
<a style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#0099FF;text-decoration:underline" target="_blank">
<img alt="Framer UI in front of a colorful background. The cursor hovers over " class="hero" src="https://inboxflows.com/_/image/https%253A%252F%252Femail.framercdn.com%252Fimages%252Flayout-frames.jpg/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZlbWFpbC5mcmFtZSJ9:1mVyUr:DfUND4nwSf6Xt4wBUDEhIjHQKCr2Ha-yhRUWlaRgAJM" style="border-radius:16px;width:600px" width="600"/>
</a>
</td>
</tr>
<tr>
<td align="left" style="padding:10px 40px" valign="top">
<p style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;font-weight:400;font-size:18px;line-height:1.6em;letter-spacing:-0.1px;text-rendering:optimizeLegibility;margin:0;text-align:left;color:#000">
These super flexible layers allow you to build everything from UI elements to entire apps with customizable styles, auto-nesting, and more.
<br/>
<br/>
</p>
<p style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;font-weight:400;font-size:18px;line-height:1.6em;letter-spacing:-0.1px;text-rendering:optimizeLegibility;margin:0;text-align:left;color:#000">
<strong>
Watch this video on Frames to learn how to:
</strong>
</p>
</td>
</tr>
<tr>
<td align="left" style="padding:10px 40px" valign="top">
<ol style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:400;font-size:18px;line-height:28px;letter-spacing:-0.1px;color:#000000;text-rendering:optimizeLegibility;list-style-type:disc;margin:0;padding:0">
<li style="margin:0 0 10px 20px">
Use Frames to create cards and buttons
</li>
<li style="margin:0 0 10px 20px">
Style and customize properties to make them your own
</li>
<li style="margin:0 0 10px 20px">
Nest and group your layers as desired
</li>
</ol>
</td>
</tr>
<tr>
<td align="left" style="padding:10px 40px" valign="top">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://links.framer.email/u/click?_t=8a025ebd74f9439c8d735d994082f8ec&_m=534ae4b4560c41eb99cbda36d2e9b5c2&_e=or6LQrYhHepaeDsCuOsw4SC3B1sAweyszTq0SN6WIg4EB5DHk9v4GLcc7i_20eKoxfHsGrEFdytqoVNpD9XYucXvWd4qiJDV3IfZkVzTMd1xi3qjD4cnWpTQ56kFFA7e_zN6N5zk1zUe-BX1BfEb9OOH1X2KjmF_VWvMMhUjB3iZefbIK_bPvQn6sm8R-IdrHx5heGi3ztkIb5sPn96GdZ02WLel4CB1Y4J6BvLAk0EGw8wbPMWrtwuhHSGrR80KKEQEgLzLapWXycygDnQba1mOjJy0915cBJu24k8Ugk4iXScPd32C9Skf6nD_jw3_yCLGTsuvj21654pKdkQgc77_OgFIqf-I8P2BdDAIGTxFrf9ku4tj88_4vgED2V1P" style="height:46px;v-text-anchor:middle;width:240;" arcsize="50%" strokecolor="#0099FF" fillcolor="#0099FF"> <w:anchorlock/> <center><![endif]-->
<a class="button primary" style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;border-radius:40px;display:inline-block;font-size:18px;font-weight:600;text-decoration:none;vertical-align:middle;line-height:50px;text-size-adjust:none;text-align:center;width:240px;border:1px solid #0099FF;background-color:#0099FF;color:#FFFFFF" target="_blank">
See how Frames work
</a>
<!--[if mso]></center> </v:roundrect><![endif]-->
<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://links.framer.email/u/click?_t=8a025ebd74f9439c8d735d994082f8ec&_m=534ae4b4560c41eb99cbda36d2e9b5c2&_e=or6LQrYhHepaeDsCuOsw4cjKUzp5XaQZmw_hC7WMNDgwBS-I80IO2zrl00rRofjU1LohIEvQ0-Av9ijlriMAGuOctYiYavrcYukzJ6Qc8u6jdA9vhxXnbXwF_nubQbgp6qzxG4jl9zPOltUtcNeAdFpNbv3QxmvWOxWNTiWMi2Ss-FLoChr_kstCJRR1KDTwlaBqhvtkWoVMscDsMzx2ALY6QYyTalqgP3oSaR0KT5QIzAu7zb1uvzLwHdRrKchJ92-qBmWH84i8enNfTs-2AYJeoSwEuAjSw7pLa7Wbj8Jsf_1MbZHh__CW-HgXasrvV7sP7FkRpI6UkeoPcGzBg57q7Iz1YgX4hSw4-qQLuPNwDW3-W5QSsAAZZSPzdM1sUp9JbSUXItt2BJ8_MSSG42rjG5c09oKwIIZDwNao6TE%3D" style="height:46px;v-text-anchor:middle;width:210;" arcsize="50%" strokecolor="#E2E5E9" fillcolor="#E2E5E9"> <w:anchorlock/> <center><![endif]-->
<a class="button secondary" style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;border-radius:40px;display:inline-block;font-size:18px;font-weight:600;text-decoration:none;vertical-align:middle;line-height:50px;text-size-adjust:none;text-align:center;width:210px;border:1px solid #E2E5E9;background-color:#E2E5E9;color:#000000" target="_blank">
Try them in Framer
</a>
<!--[if mso]></center> </v:roundrect><![endif]-->
</td>
</tr>
<!--[if mso]><table><tr><td height="10"><![endif]-->
<tr>
<td align="left" style="padding:0px" valign="top">
<!--[if mso]><table><tr><td height="10"><![endif]-->
<div style="height:10px">
</div>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
<!--[if mso]></td></tr></table><![endif]-->
<tr>
<td align="left" style="padding:10px 40px" valign="top">
<p style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;font-weight:400;font-size:18px;line-height:1.6em;letter-spacing:-0.1px;text-rendering:optimizeLegibility;margin:0;text-align:left;color:#000">
Next up, we’ll show you how to use Stacks to distribute and sort your layers.
<br/>
<br/>
</p>
<p style="font-family:'Inter', 'HelveticaNeue', Helvetica, Arial, sans-serif;font-weight:400;font-size:18px;line-height:1.6em;letter-spacing:-0.1px;text-rendering:optimizeLegibility;margin:0;text-align:left;color:#000">
If you want more in the meantime, join
<a style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#0099FF;text-decoration:underline" target="_blank">
more than 7K Framer users in our Discord community
</a>
—it’s a great place to dive in and ask questions, chat with other designers, and get tips from the team.
</p>
</td>
</tr>
<tr>
<td align="left" style="padding:10px 40px" valign="top">
<!--[if mso]><table><tr><td height="60"></td></tr></table><![endif]-->
<div style="padding:60px 0 30px">
<div style="padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid #eee">
<p style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:400;font-size:14px;line-height:20px;letter-spacing:-0.1px;color:#AAAAAA;text-rendering:optimizeLegibility;margin:0">
Was this email helpful?
<a style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#0099FF;font-weight:400;text-decoration:none">
👍
</a>
or
<a style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#0099FF;font-weight:400;text-decoration:none">
👎
</a>
</p>
</div>
<p style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:400;font-size:14px;line-height:20px;letter-spacing:-0.1px;color:#AAAAAA;text-rendering:optimizeLegibility;margin:0">
Framer B.V., Singel 258, 1016AB Amsterdam, Netherlands
</p>
<p style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:400;font-size:14px;line-height:20px;letter-spacing:-0.1px;color:#AAAAAA;text-rendering:optimizeLegibility;margin:0">
<a style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#0099FF">
See the web version
</a>
of this email or
<a style="font-family:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#0099FF">
unsubscribe
</a>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td> </tr> </table><![endif]-->
</div>
<img alt="" border="0" height="1" src="https://inboxflows.com/_/image/http%253A%252F%252Fpost.spmailtechnolo.com%252Fq%252FBoJ5t7DLDPXth7PlQAowBA~~%252FAARGbAA~%252FRgRjOGROPlcDc3BjQgphUk7fVWEgo3dbUhMxOTM2MDZhZUB1aWZlZWQuY29tWAQAAACB/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cCUzQSUyRiUyRnBvc3Quc3BtYWlsdCJ9:1mVyUr:-_BK-5NhHA-ufaeygR1gDEydXSw2JK-30tSSAjGJd8w" width="1"/>
</body>
</html>
3 years, 11 months ago - team@email.framer.com
How to start a design with Frames
These flexible layers help you build everything from UI elements to entire apps with customizable...