Skip to content

Update project settings doc for Code export settings dialog rename #220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
atran3 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update project settings doc for Code export settings dialog rename #220

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 7 additions & 24 deletions packages/docs/learn/projects/project-settings.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
---
title: Project settings
description: Configure project settings like code generation and AI preferences.
description: Configure how Subframe generates and exports code for your project.
---

## Access project settings

<Frame>
<img
src="/images/projects/project-settings-entrypoint.png"
alt="The Design System section in the left sidebar with the Project settings gear icon highlighted"
alt="The Design System section in the left sidebar with the Configure code export gear icon highlighted"
/>
</Frame>

{/* TODO: Update image — project settings now opens from the Design System section, not the top-nav project switcher */}

1. Open your project in the editor
2. In the left sidebar, find the **Design System** section
3. Click the **Settings** <Icon icon="settings" size={16} /> icon next to **Design System**
3. Click the **Configure code export** <Icon icon="settings" size={16} /> icon next to **Design System**

You should see the project settings dialog.
The **Code export settings** dialog opens.

<Frame>
<img src="/images/projects/project-settings.png" alt="Project settings showing the project settings dialog" />
<img src="/images/projects/project-settings.png" alt="The Code export settings dialog showing import alias and icon import options" />
</Frame>

{/* TODO: Update image — the dialog is now titled "Code export settings" and no longer includes company context fields */}

## Import alias

Set the path prefix used for component imports in generated code.
Expand All @@ -38,25 +40,6 @@ import { Button } from "@/ui/components/Button"

Change this to match your project's directory structure and TypeScript path aliases.

## Company context

Provide context to help AI generate designs that are more relevant to your product.

#### Company name

Your company or product name. AI uses this to personalize generated content and copy.

#### Description

Describe your company, product, and design preferences. This helps AI understand:

- What your product does
- Your target audience
- Tone and style preferences
- Any specific design guidelines

<Tip>The more context you provide, the better AI can tailor designs to your brand and product.</Tip>

## Icon imports

Choose how icons are imported in generated code.
Expand Down
Loading