You need a basic understanding of Auto-layout, Figma Variables and modes, and components. Familiarity with ACSS is assumed.
A Figma Pro seat is required if you want to use variable modes for light/dark and mobile/desktop. Otherwise Schema works fine with a Figma free seat.
After downloading the product from Lemonsqueezy, import the schema.fig file into Figma. You may want to duplicate and rename it - or not.
After opening the file, you should see the Start here page, which contains an introduction and links. For details about the file architecture, read the next article.
I suggest we do something practical that will put you in direct control of all the main concepts in under 5 minutes.
Go to the Layouts page and click on a layout frame. This is an auto-layout frame composed of several sections - each one is a component. Click on a section, then on the top right, click the component's name and select another component from the Heroes and Page titles collection. Optionally, repeat for another section.
Swapping a section component
Select the entire layout frame and drag it to the Mobile section. The layout is automatically adapted to the mobile context. The same applies to any spacing, typographic, or other value. We won't get into further details here - there is a dedicated doc about that. For now, we want to give it some style.
Select the page frame and apply dark mode by using palette > dark. Your layout should now be in dark mode. Remove the mode from the frame to undo and return to light mode.
