Create and modify gradients

Create color wheel
Select Angular Gradient to fill the circle

Create color wheel
Create color wheel using Angular gradient

Try these steps to create a color wheel as shown here with Angular Gradients.

  1. Add a circle object on the canvas, select the circle, and click Fill in the Property Inspector.
  2. Select Angular Gradient from the drop-down list in color picker. 
  3. Click the start and finish color stops in the angular gradient editor and move them to select the required colors. 
  4. Click the angular gradient editor to add more color stops. 
  5. Move stops up or down by clicking and dragging the stops on the canvas.
  6. Use the rotation handle at the top of the circle, to rotate the color wheel.

 You cannot save these colors to your Creative Cloud library. As a workaround, you can copy and paste the angular gradient color set into another object. 

ملاحظة:

Imported radial gradients with off-centered origin points are not editable in XD. 

  1. Adobe XD User Guide
  2. Introduction
    1. What's new in Adobe XD
    2. Common questions
    3. Design, prototype, and share with Adobe XD
    4. System requirements
      1. Hardware and software requirements
      2. Adobe XD, Big Sur, and Apple silicon | macOS 11
    5. Workspace basics
    6. Change app language in Adobe XD
    7. Access UI design kits
    8. Accessibility in Adobe XD
    9. Keyboard shortcuts
    10. Tips and tricks
    11. Changes to XD Starter Plan
  3. Design
    1. Artboards, guides, and layers
      1. Get started with artboards
      2. Use guides and grids in XD
      3. Create scrollable artboards
      4. Work with layers
      5. Create scroll groups in XD
    2. Shapes, objects, and path
      1. Select, resize, and rotate objects
      2. Move, align, distribute, and arrange objects
      3. Group, lock, duplicate, copy, and flip objects
      4. Set stroke, fill, and drop shadow for objects
      5. Create repeating elements
      6. Create perspective designs with 3D transforms
      7. Edit objects using Boolean operations
    3. Text and fonts
      1. Work with drawing and text tools
      2. Fonts in Adobe XD
    4. Components and states
      1. Work with components
      2. Work with nested components in Adobe XD
      3. Add multiple states to components
    5. Masking and effects
      1. Create a mask with shapes
      2. Work with blur effects in XD
      3. Create and modify gradients
      4. Apply blend effects
    6. Layout
      1. Responsive resize and constraints
      2. Set fixed padding for components and groups
      3. Create dynamic designs with stacks
    7. Videos and Lotties
      1. Work with videos in XD
      2. Work with Lottie animations in XD
  4. Prototype
    1. Create interactive prototypes
    2. Animate prototypes
    3. Object properties supported for auto-animate
    4. Create prototypes with keyboard and gamepad
    5. Create prototypes using voice commands and playback
    6. Create timed transitions
    7. Add overlays
    8. Design voice prototypes
    9. Create anchor links in Adobe XD
    10. Preview designs and prototypes
    11. Create prototypes with videos in XD
  5. Share and export
    1. Share selected artboards
    2. Share designs and prototypes
    3. Work with prototypes in XD
    4. Coedit documents shared with you
    5. Create shareable links
    6. Review prototypes
    7. Work with design specs
    8. Share design specs
    9. Inspect design specs
    10. Navigate design specs
    11. Review and comment design specs
    12. Export design assets
    13. Export and download assets from design specs
  6. Design systems
    1. Design systems with Creative Cloud Libraries
    2. Work with document assets in Adobe XD
    3. Work with Creative Cloud Libraries in Adobe XD
    4. Migrate from linked assets to Creative Cloud Libraries
    5. Work with design tokens 
    6. Use assets from Creative Cloud Libraries
  7. Cloud documents
    1. Cloud documents in Adobe XD
    2. Collaborate and coedit designs
  8. Integrations and plugins
    1. Work with external assets
    2. Work with design assets from Photoshop
    3. Copy and paste assets from Photoshop
    4. Import or open Photoshop designs
    5. Work with Illustrator assets in Adobe XD
    6. Open or import Illustrator designs
    7. Copy vectors from Illustrator to XD
    8. Plugins for Adobe XD
    9. Create and manage plugins
    10. Jira integration for XD
    11. Slack plugin for XD
    12. Zoom plug-in for XD
    13. Share prototype from XD to Behance
  9. XD for iOS and Android
    1. Preview on mobile devices
    2. Adobe XD on mobile FAQ
  10. Troubleshooting
    1. Known and fixed issues
      1. Known issues
      2. Fixed issues
    2. Installation and updates
      1. XD appears as not compatible on Windows
      2. Error code 191
      3. Error code 183
      4. Issues installing XD plugins
      5.  Prompt to uninstall and reinstall XD on Windows 10
      6. Issues with preferences migration
    3. Launch and crash
      1.  XD crashes when launched on Windows 10
      2.  XD quits when you sign out of Creative Cloud
      3. Issue with subscription status on Windows
      4. Blocked-app warning when launching  XD on Windows
      5. Crash dump generation on Windows
      6. Crash log collection and sharing
    4. Cloud documents
      1. Issues with XD cloud documents
    5. Prototype, publish, and review
      1. Unable to record prototype interactions on macOS Catalina
      2. Issues with publish workflows
      3. Published  links do not appear in browsers
      4. Prototypes do not render correctly in browsers
      5. Commenting panel suddenly showing up on shared links
      6. Unable to publish libraries
    6. Import, export, and working with other apps
      1. Import and export in XD
      2. Photoshop files in XD
      3. Illustrator files in XD
      4. Export to After Effects from XD
      5. Sketch files in XD
      6. Third-party apps not visible in Export

Create, edit, import, use gradients in Adobe XD. Add color stops and control gradient opacity using the Gradient panel.

A gradient is a graduated blend between two or more colors or tints of the same color or different colors. You can use gradients to create color blends, pie-charts, add volume to vector objects, and add a light and shadow effect to your designs.

XD supports linear, radial, and angular gradients.

Linear gradient

XD shades from the starting point to the ending point in a straight line.

Radial gradient

XD shades from the starting point to the ending point in a circular pattern.

Angular gradient

XD applies a fill with color gradients that sweep around a shape from the center of a circle. 

The Gradient color picker

To access the Gradient color picker in XD, select an object, and click Fill in the Property Inspector. You can create linear, radial, and angular gradients in XD.

Choose Linear GradientRadial Gradient or Angular Gradient from the drop-down list at the top of the color picker.

The Gradient Color Picker
The Gradient Color Picker

A. Gradient editor B. Color stop C. Opacity slider D. Color field E. Save as swatch F. On-canvas gradient editor 

You can use the Gradient color picker to choose the colors and set the opacity for gradients.

The Gradient color picker has a gradient editor that shows a quick preview of all the colors used in a gradient. Checkerboards indicate the transparent parts.

The gradient editor also displays the color stops in a gradient. Small circles indicate the color stops. The colors change and mix depending on how close the color stops are to each other. The color stops are also displayed in the on-canvas gradient editor that appears on the object to which the gradient is applied. 

Two color stops are available by default. You can add more color stops by clicking the gradient editors. You can drag the color stops along the gradient editors to change the positions of the color stops and vary the spread of each color. To delete or remove a color stop, drag it away from the gradient editor in the Gradient color picker. Or, click the color stop on the on-canvas gradient editor and press Delete.

The on-canvas gradient editor helps you change the direction of the gradient.

The corner handle helps you change the origination point and angle of a radial gradient.

The slider on the right of the Gradient color picker allows you to control the opacity of the color stop.

Apply a linear, radial, or angular gradient fill

  1. Select an object and click Fill in the Property Inspector.

  2. From the color picker, select Linear Gradient, Radial Gradient or Angular Gradient
    from the drop-down list.

    Color picker

    linear radial and angular gradients
    linear, radial, and angular gradients

  3. Click the color stops in the gradient editor and select the required colors using the color picker. 

    • To add more color stops, click the gradient editor.
    • To modify the color assigned to a color stop, click the color stop.
    • To move color stops, drag them along the gradient editor.
      Note: You cannot move the color stops on either end of the gradient editor.
    • To delete a color stop, drag it away from the gradient editor. If you are using the on-canvas gradient editor, click the color stop and press Delete.
    • To shift between color stops, use the Tab key.
    • To change the orientation point and the angle of radial gradients, drag the corner handle.
    Working with a radial gradient
    Working with a radial gradient

  4. To change the direction of the gradient, drag the on-canvas gradient editor segment (on the object) as required.

    You can also drag the end-points of the on-canvas gradient editor segment outside the bounds of the object. If a color stop is placed outside the bounds of an object, the color (associated with the color stop) is not shown on the object.

    ملاحظة:

    You can move the end of the on-canvas gradient editor segment by using the arrow keys and shift-arrow keys. Once you select an inner color stop, you can move it along the segment by using the arrow keys and shift-arrow keys.

    You can also press Tab to change color stops along the on-canvas gradient editor. 

  5. After creating a gradient, you can save it for later reuse in the Assets panel. Click an object with the gradient and click the + icon next to Colors in the Assets panel to save it. 

    Gradients saved in the Assets panel
    Gradients saved in the Assets panel

How to use Angular Gradients

You can create color wheels, pie-charts, or progress indicators using angular gradients. Apply a fill with color gradients from the starting to ending point in counter-clockwise direction. 

Import objects with gradient fill

  1. Ensure that you save the file as a .svg file before importing into Adobe XD.

  2. Click File > Import, select the SVG file, and click Import.

When you import a gradient as an SVG, the color picker displays the Gradient option by default. When you copy and paste an object in XD, the gradient fill is also copied. You can modify the color and the color stops of the gradient that you import.

More like this

شعار Adobe

تسجيل الدخول إلى حسابك