Test drive Abstract

We’ve created a 5-min Abstract walkthrough with sample Sketch files, so you can try out Abstract before diving in with your real work.

Download the .zip file here.

Let’s pretend you receive this design request.

A screenshot of a JIRA ticket requesting a CTA button be added to the homepage

Here’s how to complete that ticket if you’re starting with Abstract for the very first time.

Step 1: Create a private test project.

  1. After you’ve created your Abstract Organization, open the Abstract desktop app.
  2. Toggle to your company’s Organization.
  3. Select New project in the top right corner.
  4. Name your project “Test Drive: Website”.
  5. ⚠️ Important: Check the box next to Make project private. This keeps your test drive invisible to everyone else in your Organization.
  6. Click Create project.

Learn more about creating projects.

Step 2: Download this .zip file and import.

We’ve created a few Sketch files (3 Sketch files and 6 library files) for you to play around with.

  1. Download the .zip file here.
  2. Open the .zip file from your Downloads.
  3. In your “Test Drive: Website” project in Abstract, click Import Sketch file.
  4. Find the .zip file you just downloaded and opened.
  5. Select all files from the Import to Website project folder.
  6. Click Import.
  7. Click I understand.

Learn more about importing files.

Step 3: Create a second private project for your Design System.

We recommend making a separate project for your Design System, so all library files are consolidated in one central location. 

  1. In Abstract, click the home button in the top nav.
  2. Select New project in the top right corner.
  3. Name your project “Test Drive: Design System”.
  4. ⚠️Important: Check the box next to Make project private. This keeps your test drive invisible to everyone else in your Organization.
  5. Click Create project.

Step 4: Import the library files.

Same steps as before, with a slight tweak. 

  1. In your “Design System” project in Abstract, click Import Sketch file.
  2. Find the .zip file you just downloaded and opened.
  3. Select the “Buttons.sketch” file from the Import to Design System project folder.
  4. Click Import.
  5. Click I understand.
  6. Right-click on the file you just imported.
  7. Select Use as Library….
  8. Click Use as Library. The file icon should turn pink.
  9. Now, click Add file.
  10. Select Import Sketch File as Library….
  11. Select the rest of the library files, excluding the one you already imported. Their icons should be pink automatically.
  12. Click I understand.

Now that your library files have been imported into your Organization, you’ll need to link your libraries to your “Website” project.

  1. In Abstract, click the home button in the top nav.
  2. Select the “Website” project.
  3. Click Master in the left side bar.
  4. Go to the Files tab.
  5. Click Add file.
  6. Select Link Sketch Library….
  7. Select “Test Drive: Design System”.
  8. Select the “Buttons.sketch” file, press Shift, select the “Typography.sketch” file. This selects all the library files at once.
  9. Click Link Libraries. Your libraries will be listed under a Linked Libraries section.

Learn more about linking libraries.

Step 6: Create a Branch.

Now that the files and libraries are all in place, let’s tackle the ticket you were assigned and make some edits.

  1. Under the Files tab, select the Homepage.sketch file.
  2. Click Edit in Sketch in the top right.
  3. Select Create a Branch.
  4. Name your Branch “Homepage CTA”.
  5. Select Create Branch. The Homepage.sketch file will open in Sketch.

Learn more about branching.

Step 7: Add a CTA button to the Homepage.

The Homepage file will open in Sketch.

  1. In Sketch, click Insert.
  2. Hover over Buttons > Button > Primary > and select Long.
  3. Place the button where you’d like. 
  4. Override the text with “Only $39/month”.

Step 8: Commit your changes.

Committing saves your edits to Abstract.

  1. Click File > Save in Sketch.
  2. At the bottom of your Sketch window, click Commit changes.
  3. In the Commit comment, write “Added CTA button to the homepage”.
  4. Click Commit changes.
  5. Exit Sketch.
  6. Check out your Commit in the Commits tab.

Learn more about committing.

Step 9: Create a Collection.

Now, you’re ready to share your edits to the Homepage file. You’ll ask for feedback using a Collection.

  1. In your “Test Drive: Website” project in Abstract, click the “Homepage CTA” Branch under Branches.
  2. Click New Collection.
  3. Check the box next to the Homepage Artboard.
  4. Click Continue.
  5. Name your Collection “Homepage CTA”
  6. Click Create & Add 1 Item.

We won’t share your Collection now, but you would click the Share button to copy the link.

Learn more about Collections.

Step 10: Annotate where you need feedback.

When you send your designs out for review, it can be helpful to point out exactly where you need feedback.

  1. Open the Homepage Artboard in presentation mode.
  2. Click on the Show Comments button.
  3. Click the Annotate tool in the right sidebar.
  4. Click and drag over the button you updated.
  5. In the comment box, type “@Mila what do you think about black for this button?”.
  6. Click Comment.
  7. Just for fun, react to your own comment by clicking the reaction tool and choosing an emoji.

Learn more about annotations and comments.

Step 11: Check out the Inspect tab.

The Inspect tab is where everything lives that you’d handoff to a developer.

  1. Exit out of presentation mode.
  2. Click on the Artboard to open the layer detail.
  3. Click the Inspect tab.

Hover over different parts of the Artboard to see code-ready measurements for your designs. Additionally, a developer can download assets right from this tab. Just make the assets exportable in Sketch first.

Step 12: Merge your Branch. 

Let’s pretend you’ve gotten approval on your new button design after the stakeholders reviewed the Collection you sent them. You’re ready to merge to Master! Merging will make your edits part of the Master file. 

  1. In Abstract, click the home button in the top nav.
  2. Open your “Test Drive: Website” project.
  3. Select your “Homepage CTA” Branch from the left sidebar. 
  4. Click Merge Branch in the top right corner.
  5. In the note field, write “Added a CTA button in black to the homepage”.
  6. Click Merge and Archive.

You can now close your ticket.

Learn more about merging.

Step 13: Oops! Restore Master to previous Commit.

At the last minute, you get feedback that Stem Society is no longer offering a subscription model. You need to rollback your merged changes to the homepage ASAP. 

  1. In the “Website” project, click Master in the left side bar.
  2. Click the Commits tab.
  3. Select the Commit called “Started using 6 files as libraries”.
  4. Click the “Restore Commit” button.
  5. In the comment section, write “Received feedback that we’re no longer doing a subscription model. Rolling back until we can explore other designs.”
  6. Click Restore Commit.

Master is now restored to the designs right before you merged the homepage CTA design. 

Learn more about restoring Master to previous Commits.

Step 14: Delete your test drive projects.

And that’s it! Feel free to practice branching, editing the Sketch files, committing your changes, and creating Collections until you have the hang of it.

Whenever you’re finished trying things out, delete both test drive projects.

  1. In Abstract, click the home button in the top nav.
  2. Click the three dots … on the “Test Drive: Website” project card. 
  3. Select Delete project….
  4. Type “CONFIRM DELETE”.
  5. Click I’m sure, delete the project.
  6. Repeat for “Test Drive: Design System”.

Next up: Create your first real project. 

If you’re the Admin for your team, use the same steps listed here to set up your first real projects.

Not sure how your projects should be set up? Fill out the “How we use Abstract” worksheet first.