So you’ve got a new site, and it’s in Sketch / Abstract. We’ve been working with Adobe Illustrator, so how do we do the Illustrator things we’re used to, in Abstract instead? Here’s a list of common topics/questions.
Please note that although we previously were planning to use Sketch, we have now switched to using exclusively Abstract for the development team. Abstract is a program that allows users to edit and comment on design files similar to the way you can edit text documents with Google Docs. It’s easier to read than Sketch, from a development perspective, and has a lot of things that make a developer’s life easier.
Also, this article (and its sequel) about Sketch for front-end developers is helpful. Although it covers Sketch specifically, there are many overlaps between Abstract and Sketch, so you may find it helpful. The documentation below covers how to apply those skills to our sites with Abstract, based on how our designers set up designs for us.
Getting Started
When your site is ready to be built, the designer will post an Abstract link to the Trello card–the link that they post is also the link that you can put in Slate under the Design Repo section. Click the link provided by your designer and you should be taken to the Abstract page for your site. If you click the link and there’s a page telling you to request access, you probably aren’t set up fully with Abstract. Make sure you’re logged in to your Abstract account on web. If that doesn’t work, reach out to Chris S., and he will be able to send you an invitation to Abstract.
You can also find your site on the main homepage of Abstract, either in web or on the desktop app. On the left sidebar, there is a dropdown at the very top which contains the name of the group you’re currently in. It should say “Jack Henry Web Solutons”. Once you’re in the correct group, there is a tab called Projects, which is the default view. On the Projects page, you should see a lot of white tiles with colored borders on top. You can use the search bar on the right side to search for your project. Once you’ve found it, click on it.
From the Abstract page of your project, there will be a column on the left side. That column has a section labeled “Master Files”. Click the line with a triangle next to it, in the format 0000_bankurl–where 0000 is the jSource ID # for your FI, and bankurl is the URL for your bank’s website. A list will appear below which contains the list of sections for your site. The names of most of the sections will look familiar, since most of them are the names of the individual AI files that used to be used. Now, they’re all combined into one file.
When that list of sections appears, you’ll also notice that the large pane on the right changes to display a whole lot of pieces of the site. This is each individual artboard for the design. To narrow it down, there is a search bar above the pane on the right side. Keywords like “desktop” or “alert” can help you find what you’re looking for!
Once you’ve found your desired artboard that you want to work with, click it. You’ll be taken to a larger full-screen pane with a left and right column, and several buttons at the top center. Click the Inspect button from the top center list. This is where you’ll be spending the majority of your time as a developer! So let’s get started.
Basic Abstract Navigation in the Inspect Section
To view the responsive grid, look at the bottom right of your screen when in the Inspect tab. You’ll see a label called “Inspect Options”–click that, and from the menu that appears, click “Layout”. (If it is helpful to you, you can also turn on the Grid option in this menu, though it’s not the same as the responsive grid that we use. This grid is literally just that–like a sheet of graph paper put over the design.) Alternatively, you can press Control+L on the keyboard for a shortcut to toggle the grid on and off. You will notice that this grid is a 12-column, full-width grid, unlike our previous sites which were a 12-column container grid. As a result of this, when building, you may want to use the .container-fluid class instead of .container. (You can also opt not to use any container class at all, since .container-fluid is full-width with padding.)
Note that turning on/off the responsive grid is on a PER-ARTBOARD basis. Turning it on for the “Desktop HD” layout will not turn it on for the tablet layout, etc. etc. You’ll need to click on something in the layout you want and then hit Control+L again, to show the grid for that artboard.
To select items, start with a single-click. That will take you to the group of layers that you’re looking at in the layers panel (the left-side column). If it doesn’t automatically select the object you want, try a double-click and that should bring you to focus on the specific layer or object you need.
As you move your cursor around, you’ll notice pink lines with numbers appearing. Those are measurements, in pixels. For example, if you click the background color of a button, and then hover over the text of that button, you can see the padding amount needed from the top, bottom, and both sides. So helpful!
Left Column
Layers Panel
Layers
Underneath the main folder/artboard name you’ll see folders which include groups of layers–these folders are for things like hover states, opened search, or the items in the header grouped together. As you click on items in the main artbord, notice how the folders in this panel automatically open and close, to focus on the item that you have clicked. You may need to double-click on the item you’re viewing to be taken there–for example, clicking a button may take you to the FOLDER that holds the button, but double-clicking it will focus you on to specifically the button background or text, so you can get the information you need.
Right Column
This column will change based on the item you have selected.
If you have a text object selected, it starts with a section called Content, which includes any text that is in the item you have selected.
If you have another object selected, this will start with a “Fill ##” heading.
Following that, there is a section called Styles. This is a super helpful place for developers–you’ll notice that it includes everything from font-size & line-height to letter-spacing, if applicable. It is important to note though, that for text pieces with shadows, Abstract shows it as a box-shadow. You’ll need to manually convert that to a text-shadow with a site like this. You can also ignore the height and width properties for things like text–obviously, we don’t want to be setting manual height and width on things like that which will be editable!
Then, you’ll see the Properties section. It contains the X and Y position of that object on the artboard, and the width and height of the selected object. In the sub-sections below that, you’ll see the opacity of the object (helpful if your object is translucent), the amount the object has been rotated, and the specific background fill color of the object, if applicable. If you click on the hex value under that Fill section, the hex color will be automatically copied to your clipboard for you to search for in your variables.
If you have a text a text object selected, you will also have a section called Typography. This covers everything from the font face used to the font weight, size, and color. Just like in the Properties, some of these pieces will likely be repeated in the Style setion, but it’s helpful to have the specific values just in case.
Style Guide Section
Going back to the Files view, you’ll see the Style Guide listed alongside the homepage and subpages sections. In this file, each artboard represents a page of the style guide PDF that is provided to the client (or a piece of dev notes.)
Color Palette
This contains the main colors and logo that the designer used for your site. The exact hex colors should be placed by the designer on top of each swatch. If things look wrong, however, you can also click on each swatch tile while in the Inspect window to get more information. (For example, the example I have says the first swatch is #102542, but that hex value gives a dark blue, rather than the bright red that it should be.)
Heading & Body Copy Font Information
The font information should be on the third artboard of your style guide. Just like in Illustrator, you can click (once) on a heading to get more information about it. All the information will appear on the right-side column as described above.
Buttons
You’ll most likely need to double-click on the button to get to the specific background color. And for the text, you’ll need to click specifically on that as well to get the relevant information. In the left-side column, you’ll most likely see that you are in a folder labeled “Button - [button name]” with two inner pieces–one is the text of the button, and the other is an object labeled “Fill ##”. That “fill” layer is the background color that you need, which should also contain the border and border-radius information, if any. (If you can see that your buttons should clearly have a border-radius, but nothing relevant appears in the Style section, the designer probably used a non-standard method to create that button. You’ll need to check with them personally to make sure you ahve the right value for the border-radius.)
Padding
This works slightly differently from the way Illustrator does it. In Abstract, switch to your Style Guide page and scroll to view the buttons if you’re not already there. Click on the text or background fill of a button, going specifically to it in the Layers left-column section if needed. Then, simply hover over the other piece of the button–if you’re focused on the background, hover over the button’s text, and vice-versa. You will see some pink lines appear with numbers inside of pink rounded rectangles. Those measurements are simply the amount of space, in pixels. So for example, with a button, you will see the space from the top of the button to the top of the text, the left side of the button to the start of the text, and so forth. You may need to adjust these values slightly to make the button visually centered in CSS, but they should be accurate to within 1px.
Logo, Iconfont SVGs, etc.
With Abstract, we are unable to export items on our own like we used to be able to do with Illustrator. For this, you’re really relying on the designer to make the objects exportable. In the left side column of Abstract, you will see a scissors icon next to the layer to indicate that it’s exportable.
When you’re viewing a section that has exportable objects, you should see a section in the right side column called Assets, even if you don’t have an object selected. You can click the “Download All” link to get all the pieces that are exportable within this section. This could contain everything from hero images to logos to icons, so you may want to download items individually just to save time weeding out the things you don’t need.