Get started
Quickstart
Verified against Soffi ·
This walks you through one small piece of work from start to finish: open a Workspace, change something on a real screen of your app, leave a comment for a teammate, and ship it as a pull request. It assumes someone on your team has already set up your organization and published a Project, and that you have the Editor role or above.
1. Open a Workspace
On the Workspaces page, choose New. The Project is already selected and the Workspace already has a name, so you can choose Create straight away, or attach a Linear or Jira ticket and rename it first. If you attach a ticket, Soffi reads it and starts by proposing a plan.
Soffi deploys a copy of your app just for this Workspace, and the Preview shows its progress until the app is up. If New is greyed out, you either have the Reviewer role or your team's first Project hasn't been published yet.
2. Find your way around
The Workspace opens in the Grid layout, with your app in the Preview and the Soffi panel beside it. The first time you open one, a short tour highlights each tool in turn, with a video for most of them.
- 1PreviewYour app, running live. Every edit shows up as you make it.
- 2Select⌘EPress ⌘E, then click an element to edit it or send it to Soffi.
- 3Style Editor⌘EPress ⌘E and click an element, then adjust its color, spacing or type here.
- 4SoffiDescribe a change in plain language and Soffi makes it in your code.
- 5CommentsPress C, click any part of your app, and pin a note to it.
- 6ShipOpens Review and ship, then a pull request for each repository.
- 7History, Code, Design SystemA drawer along the bottom, closed when you start.
- 8Switch layoutMove between the Grid and the Review layout.
- 9Who's hereThe faces of everyone in this Workspace right now.
- 1PreviewYour app, running live. Every edit shows up as you make it.
- 2Select⌘EPress ⌘E, then click an element to edit it or send it to Soffi.
- 3Style Editor⌘EPress ⌘E and click an element, then adjust its color, spacing or type here.
- 4SoffiDescribe a change in plain language and Soffi makes it in your code.
- 5CommentsPress C, click any part of your app, and pin a note to it.
- 6ShipOpens Review and ship, then a pull request for each repository.
- 7History, Code, Design SystemA drawer along the bottom, closed when you start.
- 8Switch layoutMove between the Grid and the Review layout.
- 9Who's hereThe faces of everyone in this Workspace right now.
3. Make an edit
Pick something small and visible, like a button's color or the spacing in a card. To edit an element, you first select it: press ⌘E to turn on selection mode, then click the element in the Preview. Open the Style Editor tab (or press Y) and adjust its color, spacing, or type. If you got the text inside a button rather than the button itself, open the layers icon at the top left of the Style Editor and pick the element you meant. The change shows up in the Preview as you make it, using the tokens your design system already has. Press Esc when you're done selecting, to use the app normally again.
Or describe what you want to Soffi in plain language. To point Soffi at a specific part of the screen, select the element with ⌘E and choose to send it to Soffi from the small toolbar next to it, so Soffi knows exactly what you mean: "make the empty state on the projects page friendlier and add a button to create one". Soffi makes the change in your code and the Preview updates.
4. Leave a comment
Open the Comments tab (or press C), click any part of your app, and write your note. Mention a teammate with @ so they're notified. Comments stay pinned to the element they're about, and your teammates can reply to them or resolve them. See Comments.
5. Ship it
When you're happy with the change, choose Ship. It stays disabled until the Workspace has something to send. Review and ship lists your changes for each repository. Choose Ship, and when it's done, View in GitHub takes you to the pull request.
By default Soffi opens the pull request as itself. To be its author, connect your GitHub account first, from the card on the Workspaces page or the sign-in chip in Review and ship. Your account needs write access to the repository; Review and ship shows which way each pull request will open. See Who opens the pull request.
Soffi writes the pull request's title and description for you. From here it goes through your team's normal review, and if reviewers ask for changes, make them in the same Workspace and choose Push changes from the Ship menu to update the same pull request. See From Workspace to pull request.