Interactive Canvas: The preview updates in real-time as you type. Try changing the label to "Get Started" or the background color to your brand primary.
Onboarding Guide
Your First Module in 15 Minutes
Follow these four steps to get your design system running in production.
01. Workspace 5 min
02. Tokens 5 min
03. Build 3 min
04. Publish 2 min
Step 1 of 4
Create your workspace
Sign up with your email or Google account. We'll automatically generate a new organization for your team and set up the initial environment variables.
Step 2 of 4
Import tokens from Figma
Click "Connect Figma" in the sidebar. Select your Design System file. Modly will scan for style attributes (Colors, Spacing, Typography) and map them to our token engine.
Auto-Mapping
Matches Fill to Color and Stroke to Border automatically.
Instant Sync
Any changes in Figma reflect immediately in the Modly registry.
Step 3 of 4
Build your first Button module
Drag the Button component from the left-hand library onto the canvas. Use the right-hand properties panel to adjust the variant (Primary, Secondary, Outline).
Step 4 of 4
Publish to your team
You're ready to share! Click the "Publish" button in the top right. You can generate a secure sharing link for your team members or export the module directly to your npm registry.
Share Link
Generate a read-only URL that can be shared with non-technical stakeholders for review.
NPM Export
Run npm install @modly/button@latest to pull the component into your existing project.
Pro Tips & Gotchas
Naming Conventions
Keep your Figma naming strict. Use a prefix for tokens (e.g., mod-color-primary) to avoid conflicts during import.
Framework Support
Ensure your component in Figma is built on a Frame or Component, not a Group, for the best export results.
Versioning
Never manually edit the version number in the UI. Always use the "New Version" button to trigger a proper semantic version bump.
Visual Guide
Watch the walkthrough
Follow along with our 15-minute video series covering account setup to your first deploy.
Next Steps
Ready to go deeper? Explore our advanced guides on token management and Storybook integration.