Handoff requirements

Structure and documentation

Component structure, library and website documentation following the component guidelines (opens in a new tab).

Branch in Figma library

Create a branch in the Shoreline – Components (opens in a new tab) Figma library adding the new component with the name Add [Component name] or Update [Component name], and using the component section template (opens in a new tab) when adding the component.

Specs file

Create a specs file using the component handoff template (opens in a new tab) in the Figma Handoff Project (opens in a new tab) inside the Shoreline Team.

How to fill in the implementation specifications?

Ask yourself which aspects of the component may cause doubts during implementation or could go unnoticed. Remember that the instructions added to the file will guide a frontend developer on how to better implement the component, so be as detailed as possible.

• Include the component name, description, and a link to the best practices and related components documentation.
• Include examples detailing the variants, specially the ones that are not exposed in the component itself.
• List anything specific to tokens usage in the component.
• Specify any element that is optional in the component.
• If the component includes icons or labels, specify if they can be replaced or if there are any restrictions.
• Include examples detailing how the elements behave when the component changes size.
• Specify the component spacing and bleed usage.
• Detail when a different cursor than the default should be displayed when overlaying an element.
• Detail when a component should have a z-index different from the applied default.
• Detail max/min or height/width, when they are applied.
• Suggest when it is possible to localize a text string in the component.

Structure and documentation

Icon structure and library documentation following the icon guidelines (opens in a new tab).

Branch in Figma library

Create a branch in the Shoreline – Icons (opens in a new tab) Figma library adding the new icon with the name Add [Icon name] or Update [Icon name].

Structure and documentation

Component or icon fix follows the component (opens in a new tab) or icon (opens in a new tab) guidelines.

Branch in Figma library

Create a branch in the Shoreline – Icons (opens in a new tab) or Shoreline – Components (opens in a new tab) Figma library including the bug fix with the name Fix [Component or Icon].

Structure and documentation

Component or icon fix follows the component (opens in a new tab) or icon (opens in a new tab) guidelines.

Branch in Figma library

Create a branch in the Shoreline – Icons (opens in a new tab) or Shoreline – Components (opens in a new tab) Figma library including the bug fix with the name Fix [Component or Icon].

Specs file

If it is a component, follow the same specs guidelines (opens in a new tab) from a new component.